html,body{
  scroll-behavior: smooth;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#web-body{
  display: grid;
}

a{
  text-decoration: none;
}

body::-webkit-scrollbar {
  width: 0;
}

#navbar-container{
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 10;
  background-color: #4d2e07;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#navbar-header-wrapper{
  display: flex;
  width: 40%;
  justify-content: space-evenly;
  align-items: center;
  margin-left: 30px;
}

#nav-name{
  color: white;
  margin-right: 30px;
}

#header-logo{
  width: 4rem;
  height: auto;
  filter: brightness(1000%);
}

#header-logo:hover{
  cursor: pointer;
  filter: brightness(200%);
  transition: 0.3s all ease-in-out;
}

#navbar-item-wrapper{
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  align-items: center;
  margin-right: 30px;
}

.navbar-item{
  height: 40px;
  width: 100%;
  font-size: 12px;
  border-radius: 20px;
  color: white;
  background-color: #a97b4c;
  margin: 0 10px 0;
  padding: 5px 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.7s;
}

.navbar-item:hover{
  cursor: pointer;
  filter: brightness(90%);
  transition: all 0.3s ease-in-out;
}

.navbar-item > a{
  text-decoration: none;
  color: white;
}

#hamburger-menu{
  display: none;
  flex-direction: column;
  height: 30px;
  justify-content: space-between;
  position: relative;
  margin-right: 5%;
}

#hamburger-menu:hover{
  filter: brightness(80%);
  cursor: pointer;
}

#hamburger-menu input{
  position: absolute;
  top: -5px;
  left: -3px;
  width: 21px;
  height: 21px;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

#hamburger-menu > span{
  display: block;
  width: 40px;
  height: 2px;
  background-color: white;
  border-radius: 3px;
  transition: all 0.7s;
}

#hamburger-menu span:nth-child(2) {
  transform-origin: left center;
}

#hamburger-menu span:nth-child(4) {
  transform-origin: left center;
}

#hamburger-menu input:checked~span:nth-child(2) {
  transform: rotate(45deg);
}

#hamburger-menu input:checked~span:nth-child(4) {
  transform: rotate(-45deg);
}

/* invis span ke 2 / child ke 3 */
#hamburger-menu input:checked~span:nth-child(3) {
  width: 0%;
  opacity: 0;
  transition: .1s
}

#main-content{
  width: 100%;
}

.content-item{
  padding-top: 50px;
}

.content-item:first-child{
  padding-top: 100px;
}

#home-page{
  width: 100%;
  height: 800px;
  display: flex;
  justify-content: space-evenly;
  background: linear-gradient(to bottom, #231709, #000000);
}

.home-page-item{
  width: 35%;
  margin: 50px 2% 0;
}

#my-pic{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -100;
  filter: brightness(90%);
  filter: drop-shadow(5px 5px 10px #a97b4c);
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
      transform: translate(0, 0px);
  }
  50% {
      transform: translate(0, 15px);
  }
  100% {
      transform: translate(0, -0px);
  }
}

#profile-pic{
  margin-top: -10%;
  width: 80%;
  max-width: 500px;
  height: auto;
}

#profile-pic:hover{
  cursor: pointer;
  filter: brightness(80%);
  transition: all 0.3s ease-in-out;
}

#my-desc{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}

.desc-item{
  margin: 0px 10% 0px;
  color: white;
}

.desc-item:first-child{
  margin-top: 50px;
}

#desc-title{
  font-size: 40px;
  margin-bottom: 10px;
}

#desc-hi{
  font-size: 60px;
}

#desc-content{
  font-size: 18px;
  line-height: 30px;
  color: #9a7b4f;
}

#contact-container{
  display: flex;
  justify-content: start;
  align-items: center ;
}

.contact-pic{
  height: 60px;
  width: 60px;
  margin: 10px 5px 10px;
}

.contact-pic:hover{
  cursor: pointer;
  filter: brightness(70%);
  transition: all 0.3s ease-in-out;
}

#about-me-page{
  margin-top: -50px;  
  padding-bottom: 10%;
  width: 100%;
  height: 2800px;
  display: flex;
  justify-content:start;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to top, #231709, #000000);
}

#ab-title-wrapper{
  height: 240px;
  margin-bottom: -50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-title{
  color: white;
  font-size: 50px;
}

#ab-content-wrapper{
  height: 24%;
  display: flex;
  justify-content: center;
  align-items: start;
}

#about-me-content{
  color: white;
  font-size: 24px;
  width: 95%;
  padding: 20px;
  text-align: center;
  line-height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  filter: blur(50%);
}

#DAM-wrapper{
  display: flex;
  justify-content: space-evenly;
  align-items: start;
}

.DAM{                    /*DAM = Dream and Motto*/
  font-size: large;
  color: white;
  width: 40%;
  height: 90%;
  padding: 20px;
  text-align: center;
  line-height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  filter: blur(50%);
  margin: 0 40px 0;
}

#hobi-wrapper{
  color: white;
  font-size: 20px;
  margin-top: 100px;
  width: 90%;
  height: 500px;
  padding: 20px;
  text-align: center;
  line-height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  filter: blur(50%);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

#hobi-n-text-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.hobi-n-text{
  height: 400px;
  width: 40%;
  margin: 0 100px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hobi-img{
  width: 80%;
  max-width: 400px;
  height: auto;
  border-radius: 50px;
  filter: drop-shadow(5px 5px 10px white);
}

#iframe-wrapper{
  margin-top: 100px;
  display: flex;
  flex-direction: row;
}

.iframe-object{
  margin-top: 20px;
  font-size: 25px;
  color: white;
  width: 200%;
  height: 100%;
  padding: 20px;
  text-align: center;
  line-height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  filter: blur(50%);
  margin: 0 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.iframe{
  width: 100%;
  height: 100%;
  border-radius: 30px;
  filter: drop-shadow(5px 5px 15px #a97b4c);
}

#lessonlearn-wrapper{
  color: white;
  font-size: 30px;
  margin-top: 10%;
  padding: 30px;
  width: 90%;
  height: 23%;
  text-align: center;
  line-height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  filter: blur(50%);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

#skills-page{
  width: 100%;
  height: 10%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #231709, #000000);
}

#skills-title-wrapper{
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#skills-content{
  display: flex;
  flex-direction: column;
}

.skills-img{
  height: 200px;
  margin-top: 100px;
}

.skills-img:first-child{
  margin-top: 10px;
}

.skills-img:nth-child(2){
  height: 210px;
  margin-top: 10px;
}

.skills-img:nth-child(3){
  height: 2500px;
  margin: -20px;
  margin-top: 0px;
}

.skills-img:hover{
  cursor: pointer;
}

.skills-img{
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#skills-pic-wrapper{
  margin: 0 50px 0;
  background-color:rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

.skills-pic-row{
  height: 300px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.pic-n-text{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pic-text{
  color: white;
  text-align: center;
  width: 120%;
}

#portfolio-page{
  width: 100%;
  height: 1500px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to top, #231709, #000000);
}

#portfolio-content{
  display: flex;
  align-items: center;
  flex-direction: column;
}

#portfolio-button-wrapper{
  margin-top: 30px;
}

.portfolio-button{
  height: 80px;
  width: 80px;
  color: white;
  border: 1px solid white;
  font-size: large;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 10px 0;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
}

.portfolio-button:first-child{
  background-color: white;
  color: black;
}

.portfolio-button:hover{
  background-color: white;
  color: black;
  cursor: pointer;
}

#portfolio-desc-wrapper{
  margin-top: 30px;
  width: 57%;
  color: white;
  text-align: center;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

#portfolio-desc{
  padding: 20px;
  font-size: x-large;
}

#portfolio-slideshow-wrapper{
  margin-top: 50px;
}

#portfolio-slideshow{
  height: 675px;
  width: 100%;
  box-shadow: 0 0 10px white;
  border-radius: 30px;
}

#circle-wrapper{
  margin-top: 40px;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
}

.circle{
  margin: 0 10px 0;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}

#circle-1{ 
  background-color: white;
}

#circle-2, #circle-3, #circle-4, #circle-5{
  background-color: rgba(255, 255, 255, 0.2);
}

#portfolio-dnb-wrapper{
  display: flex;
  align-items: center ;
  justify-content: center;
}

.dnb-item{
  margin: 0 5px 0;
}

#portfolio-fdesc-wrapper{
  margin-top: 30px;
  width: 60%;
  color: white;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.fbutton{
  margin-top: 30px;
  padding-top: 40px;
  text-align: center;
  width: 100px;
  height: 130px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  transition: 0.3s ease-in-out;
}

.fbutton:hover{
  background-color: lightgray;
  color: black;
  cursor: pointer;
}

#prev-button{
  border-radius: 50% 0 0 50%;
}

#next-button{
  border-radius: 0 50% 50% 0;
}

.fdesc{
  color: white;
  font-size: 25px;
}

#web-scrapping-page{
  display: flex;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to bottom, #231709, #000000);
  color: white;
  font-size: large;
  padding-bottom: 2vw;
}

#web-scrapping-table{
  color: black;
  text-align: center !important;
  font-size: large;
}

#web-scrapping-table th{
  padding: 1vw 7vw 1vw;
  text-align: center;
  background-color: #4d2e07;
  border: 1px solid #231709;
  color: white;
}

#web-scrapping-table th:first-child{
  padding: 1vw 1.5vw 1vw;
}

#web-scrapping-table td{
  background-color: #a97b4c;
  color: white;
  border:1px solid #231709;
}

#footer{
  width: calc(100% - 60px);
  height: 60px;
  margin-bottom: -60px;
  z-index: 10;
  padding: 30px;
  color: white;
  background-color: #4d2e07;
  display: flex;
  justify-content: end;
  align-items: center;
}

@media only screen and (max-width: 768px) {
  /* Styles for mobile devices */
  /* #navbar-item-wrapper{
    display: none;
  } */

  #hamburger-menu{
    display: flex;
  }

  #nav-name{
    font-size: large;
  }

  #about-me-content{
    font-size: medium;
  }

  #navbar-item-wrapper {
    position: absolute;
    display: flex;
    right: 0;
    top: 0;
    height: 2000px;
    width: 42%;
    align-items: center;
    justify-content: start;
    margin-top: 100px;
    margin-right: 0;
    flex-direction: column;
    background-color: #4d2e07;
    z-index: 0;
    transform: translateX(10px);
    transition: all 0.3s ease-in-out;
    opacity: 0;
  }

  #navbar-item-wrapper > .navbar-item{
    margin-bottom: 4px;
    border-radius: 2px;
    border: 1px solid #4d2e07;
  }

  #navbar-item-wrapper > .navbar-item:hover{
    filter: brightness(70%);
  }

  #navbar-item-wrapper.menushow {
    opacity: 1;
    transform: translate(0);
  }

  #main-content{
    transition: all 0.3s;
  }

  #main-content.darkenMain{
    filter: brightness(60%);
  }

  .skills-img{
    height: 130px !important;
  }
}