/* =====
   fonts 
   ===== */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* ======
   Layout
   ====== */

/* color text  ==> #f5f5f5 */
/* color primary  ==> #121212 */
/* color accent  ==> #2a2a2a */

/* ff-text ==> sans-serif */
/* ff-title/text ==> 'Rubik', sans-serif */



*,
*::after,
*::before {
   box-sizing: inherit;
}

html {
   box-sizing: border-box;
   color: #f5f5f5;
   font-size: 1.25rem;
}

body {
   font-family: sans-serif;
   margin: 0;
   background: #121212;
   font-weight: 300;
}

img {
   display: block;
}

section {
   padding: 2.5em 1em;
}

/* ==========
   typographie
   =========== */

h2,h3 {
   line-height: 1;
   letter-spacing:  .89px;
}

h2 {
   font-family: 'Rubik', sans-serif;
   font-size: 2.2rem;
}


a {
   text-decoration: none;
   color: inherit;
}

.section-title span {
   color: rgb(0,120,242);
   font-family: 'Rubik', sans-serif;
   font-weight: 300;

}

p {
   margin-bottom: 0.85em;
}

p:last-child {
   margin-bottom: 0;
}

/* ==========
   navigation
   ========== */

header {
   padding: .5em;
   background-color: #2a2a2a;
}

nav {
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: space-between;
}

.logo {
   height: 40px;
   width: 102px
}

nav .ul__nav {
   box-shadow: 0 .5px 2px rgba(0,0,0, 0.5);
   display: flex;
   flex-direction: column;
   background-color: #1a1a1a;
   position: absolute;
   top: 60px;
   left: -100%;
   width: 100%;
   height: 100vh;
   align-items: center;
   transition: all 300ms ease-in-out;
}

label #btn,
label #cancel {
   font-size: 1.5rem;
   color: #f5f5f5;
}


label {
   position: relative;
}

.ps{
   position: absolute;
   bottom: -11px;
   top: -19px;
   right: 0px
}

.ps:hover {
   cursor: pointer;
}

#check {
   display: none;
}

#cancel {
   display: none;
}

#check:checked ~ .ul__nav {
   left: 0;
   z-index: 3;
}

#check:checked ~ label #btn {
   display: none;
}

#check:checked ~ label #cancel {
   display: block;
}

.li__nav + .li__nav{
   margin-top: .5em;
}

.li__nav a{
   display: inline-block;
   padding: 1.5em;
   font-size: 1.2rem;
   position: relative;
}

.li__nav a::after {
   content: '';
   position: absolute;
   bottom: 20px;
   left: 25px;
   width: 60%;
   height: 4px;
   background-color: rgb(0,120,242);
   transform: scaleX(0);
   transition: transform 250ms ease-in-out;
   transform-origin: right;
}

.li__nav a:hover::after {
   transform-origin: left;
   transform: scaleX(1);
}

.hero {
   background: url(pic/hero-bg.jpg);
   background-color: #2a2a2aa1;
   background-blend-mode: multiply;
   background-size: cover;
   color: white;
   font-weight: 500;
   text-align: center;
   padding: 13vh 1em;
}

.intro {
   background-color: #1a1a1a;
   color: #f5f5f5;
   text-align: center;
}

.intro h2 {
   font-size: .9rem;
   font-weight: 300;
   line-height: 1.3;
}

.platforms {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
   gap: 20px;
   text-align: center;
   padding: 2em;
}

.platforms__consoles, 
.platforms__laptops {
   max-width: 300px;
   padding: 2em 2em;
   background-color: #2a2a2a;
   font-weight: 300;
   border-radius: .5em;
   cursor: pointer;
   position: relative;
   z-index: 1;
}

.platforms__consoles::after,
.platforms__laptops::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   background-color: #2a2a2ac2;
   width: 100%;
   height: 100%;
   z-index: -1;
   border-radius: .5em;
   transform: scaleY(0);
   transform-origin: bottom;
   transition: transform 300ms ease-in-out;
}

.platforms__consoles:hover::after,
.platforms__laptops:hover::after {
   transform: scaleY(1);
   transform-origin: top;
}


.platforms__laptops {
   background-image: url(pic/laptop-bg.jpg);
   background-position: center;
   background-size: cover;
   background-blend-mode: overlay;
   padding: 2em 2.5em;
}

.platforms__consoles {
   background-image: url(pic/console-bg.jpg);
   background-position: center;
   background-size: cover;
   background-blend-mode: overlay;
}

.games-showcase header {
   max-width: 500px;
   margin: 0 auto;
   border-radius: 5px;
}
.games-showcase header h2 {
   font-family: 'Rubik';
   font-weight: 500;
   text-align: center;
   font-size: 1.5rem;
   color: white;
}

.games {
   padding: .5em;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.game {
   box-shadow: 0 .3em .5em black;
   border-radius: 5px;
   overflow: hidden;
   
}

.game__info {
   position: relative;
   overflow: hidden;
}

.game__img {
   width: 100%; 
}

.game__about {
   font-size: .7rem;
   position: absolute;
   bottom: -100%;
   left: 0;
   font-family: sans-serif;
   line-height: 1.3;
   letter-spacing: .4px;
   text-shadow: 0 .2em .4em black;
   width: 100%;
   padding: .3em;
   text-align: center;
   color: white;
   background-color: #2a2a2abb;
   transition: bottom 250ms ease-in-out;
   cursor: pointer;
}

.game__about span {
   font-family: 'Rubik', sans-serif;
   font-weight: 600;
   font-size: .7rem;
   color: rgb(0,120,242);
}

.game__info:hover .game__about,
.game__about:focus {
   bottom: 0;
}

.game__content {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
}

.game__content p {
   font-size: .75rem;
   font-family: 'Rubik', sans-serif;
   font-weight: 200;
   color: white;
   padding: .5em;
}

.game__btn {
   padding: .5em;
   background-color: rgb(0,120,242);
   font-size: 1.3rem;
   transition: filter 200ms ease;
}

.game__btn:hover {
   filter: brightness(120%);
}
.fa-credit-card{
   transition: color 200ms ease 50ms;
}
.game__btn:hover .fa-credit-card {
   color: gold;
}

.game:last-of-type {
   margin-bottom: 50px;
}
footer {
   background: #7a7a7a;
}

.footer-container {
   background-color: #7a7a7a;
   display: flex;
   flex-direction: column;
   padding: 1em;
}

.social-btn {
   display: flex;
   flex-direction: row;
   gap: 40px;
   justify-content: center;
   padding: 1em 0 1em;
}

.social-link {
   display: inline-block;
   font-size: 2em;
}

.fa-facebook:hover {
   color: #3969cf;
}

.fa-twitter:hover {
   color: #00acee;
}

.fa-instagram:hover {
     background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
     background-clip: text;
     -webkit-text-fill-color: transparent;
}


@media only screen and (min-width: 756px) {
   header {
      padding: 0;
   }
   nav {
      justify-content: space-between;
   }
   label {
      display: none;
   }
   nav .ul__nav {
      box-shadow: none;
      display: flex;
      flex-direction: row;
      position: static;
      height: auto;
      width: auto;
      background-color: transparent;
      align-items: center;
   }
   .li__nav a{
      display: block;
      padding: 1.1em .5em;
      font-size: .8rem;
      position: relative;
   }
   .li__nav + .li__nav{
      margin: 0;
   }
   .li__nav a::after {
      bottom: 0;
      left: 0;
      height: 2px;
      width: 100%;
   }
   .hero {
      padding: 25vh 1em;
   }
   .intro {
      padding: 3em 1em;
   }
   .intro h2,
   .section-title span {
      font-size: 1.1rem;
      font-weight: 400;
   }
   .platforms {
      flex-direction: row;
      gap: 10px;
   }
   .platforms__consoles, 
   .platforms__laptops {
      padding: 3em 3em;
   }
   .games {
      flex-direction: row;
      max-height: 300px;
      justify-content: center;
   }
   .game {
      max-width: 250px;
   }
   .game img {
      height: 200px;
      object-fit: cover;
   }
   .game:last-of-type {
      margin: 0;
   }
   .game__content {
      justify-content: space-between;
   }
   .game__about {
      font-size: .6rem;
   }
   .game__about span {
      font-size: .65rem;
   }
   .footer-container {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 400px;
      margin: 0 auto;
   }
}