body,
html {
  margin: 0;
  padding: 0;
  background-color: black;
  width: 100vw;
  overflow-x: hidden;
}


@font-face {
  font-family: bebas;
  src: url(./font/BebasNeue-Regular.ttf);
}
@font-face {
  font-family: poppins;
  src: url(./font/Poppins-Regular.ttf);
}

.frontPage {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url(./img/bg.png);
  background-size: cover;
  background-position: center;
}

.nameText{
  margin: 0px;
  color: rgb(172, 172, 172);
  font-family: bebas;
  width: 80%;
  font-size: 10vw;
  letter-spacing: 0.05em; 
  text-align: center;
}

.galleryText{
  margin: 0px;
  color: white;
  font-family: bebas;
  width: 80%;
  font-size: 25vw;  
  text-align: center;
  letter-spacing: 0.06em; 
}
.scrollText{
  color: white;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* ! SKETCHES  */
.sketchSection{
  background-color: black;
}
#imageContainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin-bottom: 100px;
  margin-top: -100px;
  margin-left: 40px;
  margin-right: 40px;
}
.sketch{
  height: 400px;
  width: 90%;
  margin: 10px auto;
}
.sketchesTitle{
  margin: 0px auto;
  width: 80%;
  color: white;
  font-family: poppins;
  font-size: 5vw;
  padding: 50px;
}

.img1{
  margin-top:250px;
  background-image: url(./img/img1.png);
  background-size: cover;
  background-position: center;
}

.img2{
  margin-top: 680px;
  background-image: url(./img/micheal.png);
  background-size: cover;
  background-position: center;
}

.img3{
  margin-top:1110px;
  background-image: url(./img/teddy.png);
  background-size: cover;
  background-position: center;
}

.img4{
  margin-top:1540px;
  background-image: url(./img/monkey.png);
  background-size: cover;
  background-position: center;
}

.img5{
  margin-top:1970px;
  background-image: url(./img/moth.png);
  background-size: cover;
  background-position: center;
}

/* paintings */
.paintingSection{
  background-color: black;
}
#paintingTitle{
  margin: 0px auto;
  width: 80%;
  color: white;
  font-family: poppins;
  font-size: 5vw;
  padding: 50px;
}

.paintingContainer{
  display: grid;
  width: 100vw;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-row-gap: 50px;
}

#painting1, #painting3, #painting2,
#painting4{
  max-width: 450px;
  width: 70%;
  margin: 0 auto;
}

.paintingStyle{
  width: 100%;
  border-radius: 4px;
  border: 9px goldenrod solid;
  border-style: groove;
}

/* Digital section */

.digitalTitle{
  margin: 0px auto;
  width: 80%;
  color: white;
  font-family: poppins;
  font-size: 5vw;
  padding: 50px;
}
.digitalImage img{
  max-width: 400px;
  width: 100%;
  margin: 0px;
}
#digitalImageContainer{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 90vh;
}
.digitalImage{
  opacity: 0.2;
}

/* Scroll Progress */
#progress {
  position: sticky;
  top: 0px;
  width: 100%;
  height: 4px;
  z-index: 1;
  background-color: darkgray;
  animation: progress linear forwards;
  animation-timeline: scroll();
}

@keyframes progress {
  from {
    width: 0%;
  }
  
  to {
    width: 100%;
  }
}


/* Media Queries */
@media only screen and (max-width: 500px) {


  @font-face {
    font-family: bebas;
    src: url(./font/BebasNeue-Regular.ttf);
  }
  @font-face {
    font-family: poppins;
    src: url(./font/Poppins-Regular.ttf);
  }
  
  .frontPage {
    display: flex;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(./img/bg.png);
    background-size: cover;
    background-position: center;
  }
  
  .nameText{
    margin: 0px;
    color: rgb(172, 172, 172);
    font-family: bebas;
    width: 80%;
    font-size: 10vw;
    letter-spacing: 0.05em; 
    text-align: center;
  }
  
  .galleryText{
    margin: 0px;
    color: white;
    font-family: bebas;
    width: 80%;
    font-size: 25vw;  
    text-align: center;
    letter-spacing: 0.06em; 
  }
  .scrollText{
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  /* ! SKETCHES  */

  #imageContainer{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }
  .sketch{
    width: 90%;
  }

  .sketchesTitle{
    margin: 0px auto;
    width: 80%;
    font-size: 50px;
    color: white;
    font-family: poppins;
  }
  
  .img1{
    margin-top: 20px;
  }
  
  .img2{
    margin-top: 20px;
  }
  
  .img3{
    margin-top: 20px;
  }
  
  .img4{
    margin-top: 20px;
  }
  
  .img5{
    margin-top: 20px;
  }
  
  /* ! PAINTINGS */
  .paintingSection{
    background-color: black;
  }
  #paintingTitle{
    margin: 0px auto;
    width: 80%;
    color: white;
    font-family: poppins;
    font-size: 50px;
    padding: 50px;
  }
  
  .paintingContainer{
    display: flex;
    width: 100vw;
    flex-direction: column;
    align-items: center;
    grid-row-gap: 50px;
  }
  
  #painting1, #painting3, #painting2,
  #painting4{
    max-width: 450px;
    width: 70%;
    margin: 0 auto;
  }
  
  .paintingStyle{
    width: 100%;
    border-radius: 4px;
    border: 9px goldenrod solid;
    border-style: groove;
  }
  
  /* Digital section */
  
  .digitalTitle{
    margin: 10px auto;
    width: 80%;
    color: white;
    font-family: poppins;
    font-size: 50px;
    padding: 0px;
  }
  .digitalImage img{
    max-width: 400px;
    width: 100%;
    margin: 10px;
  }
  #digitalImageContainer{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .digitalImage{
    opacity: 1;
  }
  
  /* Scroll Progress */
  #progress {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 4px;
    z-index: 1;
    background-color: darkgray;
    animation: progress linear forwards;
    animation-timeline: scroll();
  }
  
  @keyframes progress {
    from {
      width: 0%;
    }
    
    to {
      width: 100%;
    }
  }
  
  

}