@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Montserrat-Light.ttf") format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-Regular.ttf") format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Montserrat-Medium.ttf") format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Montserrat-Bold.ttf") format('woff2');
}
@font-face {
  font-family: 'Staatliches';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Staatliches-Regular.ttf") format('woff2');
}

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     color: #dae0ea;
     font-family: "Montserrat", sans-serif;
}
body{
  background-color: #1d1f25;
}
 h1, h2, h3, p, span {
     background: none;
}
.btn-outline-warning
{
  color: white !important;
  border-color: #e16428;
}
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active, .btn-outline-warning.active
{
  background: #e16428 !important;
  border-color: #e16428 !important;
}
.btn-outline-warning:focus{
  box-shadow: 0 0 0 2px rgba(237, 111, 50, .5) !important;
}
 .container h1 {
     font-weight: 500;
}
 .container h2 {
     font-weight: 400;
}
section{
       padding: 3rem 1rem 3rem 1rem;
}
 .section{
     background-color: #272a33;
}
 .section-even {
     background-color: #202229;
}
 .section-heading{
     padding: 0 0 1em 0;
}
 #home{
   height:100vh;
   width: 100%;
   background: url("../img/bacground.webp") no-repeat center center fixed;
   background-size: cover;
   background-position: top !important;
   background-color: rgba(1,1,1,1);
}
#home .h1
{
  font-family: 'Staatliches', cursive;
    color: white;
    font-size: 11vh;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
}
#home .h2
{
    color: white;
    font-size: 5vh;
    height: 17vh;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
}
.arrow-anim{
  position: relative;
  animation: moveY 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  width: 75px;
  height: 75px;
}
@keyframes moveY {
  0% {transform: translateY(0vh);}
  50% {transform: translateY(2vh);}
  100% {transform: translateY(0vh);}
}
.type-text
{
  color: #e16428;
}
#about{
  padding: 0;
}
 .about{
     text-align: justify;
}
#about .about p
{
  font-size: 1.2em;
  font-weight: 400;
}
#about ul
{
  align-items: center;
}
 .profile p{
     text-align: center;
}
 .avatar{
     border: 3px solid #ff5722;
     border-radius: 100%;
     display: block;
     margin: 0 auto 20px auto;
     box-shadow: 0px 0px 21px -6px rgba(0,0,0,1);
}
 .network-icon {
     padding: 0;
}
 .network-icon li{
     list-style: none;
     margin: 0 0;
}

 .icon{
     opacity: 0.9;
     transition: all 0.5s ease;
}
 .icon:hover {
     transform:translateY(3px);
     opacity: 1;
}
 .skillIco{
     display: block;
     margin: 0 auto 20px auto;
     padding: 1em;
}
 .project{
     padding: 0 0 50px 0;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .project-thbnail{
     margin-right: 20px;
}
 .project-thbnail, .project-text{
     float:left;
}
 .project-title{
     font-size: 22px;
     color:white;
     
}
.project-text{
  text-align: justify;
}
 a:link, a:visited{
     color: white;
     text-decoration: none;
}
 .project-title a:hover{
     color: #e16428;
}
 .project-description{
     font-size: 16px;
     width: 320px;
     height: 70px;
     display: flex;
     align-items: center;
}
 .project-icon{
     border: 3px solid #e16428;
     border-radius: 100%;
     width: 100px;
     height: 100px;
     box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.4);
     transition: filter 0.2s ease, transform 0.2s ease;
}
 .project-icon:hover {
     filter: brightness(105%);
     transform: perspective(1px) scale(1.1)
}
#contact{
  padding: 5rem 1rem 5rem 1rem;
}
 input[type="text"], input[type="email"], textarea {
     color: white !important;
     background-color: #272a33 !important;
     font-size: 24px !important;
     border-width:1px;
}
 input[type="text"]:focus, input[type="email"]:focus, textarea {
     color: white;
     outline-color: white;
     background-color: #272a33;
}
 input:-webkit-autofill, input:-webkit-autofill:hover,
 input:-webkit-autofill:focus, textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
 select:-webkit-autofill, select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
     border: 1px solid white;
     font-size: 24px;
     -webkit-text-fill-color: white;
     transition: background-color 5000s ease-in-out 0s;
}
 footer {
     background-color: #1d1f25;
}
.animate-in {
    -webkit-animation: fadeIn 0.5s ease-in-out;
    animation: fadeIn 0.5s ease-in-out;
}

.btn-itchio {
  background-color: #fa5c5c;
  color: white;
  border: none;
}

.btn-itchio:hover,
.btn-itchio:focus {
  background-color: #d83a3a;
}

.btn-github {
  background-color: #24292e;
  color: white;
  border: none;
}

.btn-github:hover,
.btn-github:focus {
  background-color: #1c2024;
}

.btn-more {
  background-color: #de6328;
  color: white;
  border: none;
  min-width: 36px;
  min-height: 36px;
}

.btn-more:hover,
.btn-more:focus {
  background-color: #c25623;
}

.btn-steam {
  background-color: #3b6491;
  color: white;
  border: none;
}

.btn-steam:hover,
.btn-steam:focus {
  background-color: #214585;
}

.btn-ps-store {
  background-color: #007BFF;
  color: white;
  border: none;
}

.btn-ps-store:hover,
.btn-ps-store:focus {
  background-color: #0056b3;
}

.btn-xbox-store {
  background-color: #107c10;
  color: white;
  border: none;
}

.btn-xbox-store:hover,
.btn-xbox-store:focus {
  background-color: #0b5d0b;
}

.btn-epic-store {
  background-color: #858585;
  color: white;
  border: none;
}

.btn-epic-store:hover,
.btn-epic-store:focus {
  background-color: #666666;
}

.btn-gog {
  background-color: #4d4d76;
  color: white;
  border: none;
}

.btn-gog:hover,
.btn-gog:focus {
  background-color: #3b3b61;
}

.btn-nintendo {
  background-color: #e60012;
  color: white;
  border: none;
}

.btn-nintendo:hover,
.btn-nintendo:focus {
  background-color: #b3000b;
}

.project-link:hover p,
.project-link:focus p {
  color: #e16428; /* Zmiana koloru tekstu po najechaniu na odnośnik */
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.button-grid a {
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

.producent_logo {
  width: 200px;
  height: 200px;
}

.logo-experience {
  width: 50px;
  height: auto;
  display: flex;
  align-items: center;
}

.experience-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.experience-details h5 {
  line-height: 1.2;
}

.experience-details p {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: #afb7bd;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

 @media (max-width:1000px) {
     .about{
         margin-top: 50px;
    }
     .about h1 {
         text-align: center;
    }

    .project{
      justify-content: unset;
    }
    .project-description{
        width: 100%;
        height: 100%;
   }
}

@media (max-width:540px) {

  #home .h1
  {
      font-size: 11vh;
  }
  #home .h2
  {

      font-size: 2.5vh;
      height: 10vh;
  }
}