* {
    margin: 0;
    padding: 0;
   box-sizing: border-box;
    scroll-behavior: smooth;
}

#container {
    display: grid;
   text-align: left;
   overflow: hidden;
   font-size: 1rem;
   width: 100%;
   height: 100%;
}

body{
    font-family:"Michroma", sans-serif;
    background-color: #99C1F5;
}

h1 {
    font-family: "Press Start 2P";
}

img{
    width: 100%;
}

/*fonts*/

.press-start-2p-regular {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
}

.michroma-regular {
    font-family: "Michroma", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*header*/

header {
    background-size: cover;
    background-repeat: no-repeat;
    /* grid-template-columns: 1fr 1fr; */
    background-color: rgb(240 240 240 /1);
    min-height: 40vh;
    border-radius: 5rem 5rem 2rem 2rem;
    margin: 2rem;
    padding: 2rem;

    
}

#top-banner{
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    background: radial-gradient(circle,rgb(178, 197, 252) 0%, rgb(98, 173, 239) 50%,  rgb(30, 38, 154) 100%);
    border-radius: 5rem;
    height: 12vh;
    margin-bottom: 2rem;
    font-family:"Press Start 2P", system-ui ;
}




header p {
    font-family:"Press Start 2P" ;
    font-size: 1rem;
}

/*nav*/

nav {
    width: auto;
    overflow: hidden;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr ;
    height: 5rem;
    text-align: center;
    align-items: center;
    align-self: end;
   
    
} 

nav a {

    
    border-radius:1rem;
    background: linear-gradient(#f5f5f5 34%, #aeaeae 91%, #656465 100%);
    color: #000000;
    text-decoration: none;
    transition: opacity 0.5s ease, transform 0.8s ease;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
    font-family: "Press Start 2P";
    padding: 0.5rem;
    }
    
 nav a:hover {
     transform: scale(1.25);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }

/*body*/

body {
    background-color: rgb(152, 204, 249);

}

section{
    margin: 20px auto;
    padding: 20px;
    width: 100%;
    background: linear-gradient(#A6E650, #f2efef);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

section p{
    font-size: 1rem;
}


/*section 1*/

#about-website {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr ;
    margin-top: 3rem
   
}

/*section 2*/

#thumbnail-def {
    display: grid;
    grid-template-columns: 1fr;


}

/*section 3*/

#important-aspects {
    display: grid;
    grid-template-columns: 1fr ;
    gap: 1rem;
}

#important-aspects figure{
    position: relative;
}
#important-aspects .visible{
    position: absolute;
    top: 0;
    left: 0;
}



a:link {
    transition: color 0.5s;
}

img {
    opacity: 0.25;
    transition: opacity 500ms;
}

img:hover {
    opacity: 1;
}

figure .visible {
    opacity: 1;
}

figure .hidden {
    opacity: 0;
}


figure:hover .hidden {
    opacity: 1;
}

figure:hover .visible {
    opacity: 0;
}

/*#keys {
    height: 300px;
    width: 300px;
    display: inline-block
} 
    */

  
/*section 4*/

#niche-explanation {
    display: grid;
    grid-template-columns: 1fr;
   
}



/*section 5*/

#app-explanation {
    display: grid;
    grid-template-columns: 1fr ;
   
    gap: 6rem;
}
  .title-scroller {
      font-size: 15px;
      padding-block: 8px;
      border-block: 1px solid;
      overflow: hidden;
      display: flex;
      user-select: none;
      gap: 2rem;
      width: 90vw;    
  }

  .title-scroller ul {
      list-style: none;
      flex-shrink: 0;
      display: flex;
      min-width: 100%;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
      background-color: #A6E650;

      animation: scroll 20s linear infinite
  }

  .carousel {
      font-family: "Press Start 2P";
  }

  .title-scroller .carousel {
      margin-inline: 4px;
  }

  @keyframes scroll {
      to {
          transform: translateX(-100%);
      }
  }

.apps-grid {
   margin: 0;
    display: grid;
    margin: 2rem auto 0 auto;
    gap: 2rem;
}

.apps-grid img {
    max-height: 200px;
}

#procreate, #picsart, #fresco {
    transition: transform 0.5s;
}

#procreate:hover, #picsart:hover, #fresco:hover {
    transform: rotate(45deg);
    }
    
    
    

/*section 6*/

#thumbnail-demo {
    display: grid;
    grid-template-columns: 1fr;
}

.inside-cont {
    padding: 2rem;
}

.slider-wrapper {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
}

.slider{
    display: flex;
    aspect-ratio: 16/9;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
    border-radius: 0.5rem;
}

.slider img{
    flex: 1 0 100%;
    scroll-snap-align: start;
    object-fit: cover;
}

.slider-nav {
    display: flex;
    column-gap: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.slider-nav a{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.75;
    transition-property: opacity ease 250ms;
}

.slider-nav a:hover{
    opacity: 1;
}
/*section 7*/

#thumbnail-demo2 {
    display: grid;
    grid-template-columns: 1fr;
}



/*details*/
#stars {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr; 
   
}

#pinkst{
    width: 100%;
    display: inline-block
}

#pinkst {
    animation-name: spinningstar1;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes spinningstar1{
    0%{
        transform: translateX(0px);
    }

         50% {
             transform: rotateZ(180deg);
         }

           100% {
               transform: rotate (360deg);
           }
}

#greenst {
    width: 100%;
    display: inline-block;
}

#greenst {
    animation-name: spinningstar2;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes spinningstar2 {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: rotateZ(-180deg);
    }

    100% {
        transform: rotate (360deg);
    }
}

#yellost {
    width: 100%;
    display: inline-block
}

#yellost {
    animation-name: spinningstar1;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes spinningstar1 {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: rotateZ(180deg);
    }

    100% {
        transform: rotate (360deg);
    }
}


/*footer*/

#S2, #S4{
    max-width: 50rem;
    margin: 0 auto;
    line-height: 1.94;
}


/* media queries */

@media screen and (min-width: 666px) {
    #s1 {
        grid-template-columns:  repeat(2, 1fr);
    }
    .apps-grid {
        grid-template-columns:  repeat(3, 1fr);
    }
    
}



@media screen and (min-width: 999px) {
    #s3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    
}

@media screen and (min-width: 1600px) {
    #s3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
}