/* FONT FACE ******************************************************* */


@font-face {
  font-family: "Montserrat";
  src: url(../font/Montserrat-Regular.ttf);
}



@font-face {
  font-family: "Nightwatch";
  src: url(../font/TheNightWatch.ttf);
}


/*  ANIMATION ******************************************************* */


/* ----------------------------------------------
 * Generated by Animista on 2024-11-17 19:29:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-vertical
 * ----------------------------------------
 */
@-webkit-keyframes shake-vertical {

  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  80% {
    -webkit-transform: translateY(6.4px);
    transform: translateY(6.4px);
  }

  90% {
    -webkit-transform: translateY(-6.4px);
    transform: translateY(-6.4px);
  }
}

@keyframes shake-vertical {

  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  80% {
    -webkit-transform: translateY(6.4px);
    transform: translateY(6.4px);
  }

  90% {
    -webkit-transform: translateY(-6.4px);
    transform: translateY(-6.4px);
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2024-12-1 17:45:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {

  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}

@keyframes shake-horizontal {

  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}



/*  RESET ******************************************************* */


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Montserrat";
}


img,
svg,
input,
video {
  width: 100%;
  vertical-align: bottom;
}

#playground {
  overflow-x: hidden;
}


/*  HEADER ******************************************************* */



header {
  width: 100vw;
  height: 100vh;
  background-color: black;
  color: #b47433;
  padding: 20px;
  position: relative;
}



/* Menu */

nav {
  display: flex;
  justify-content: flex-end;
  padding: 5%;
  font-size: 30px;

}



#icon-menu:hover {
  cursor: pointer;
}


#menu {
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  height: 85vh;
  background-color: black;
  display: none;
  text-align: right;
  list-style-type: none;
}



#menu li {
  margin: 40px 0;
  padding-right: 40px;
  border-bottom: 1px solid #b47433;
}


#menu li a {
  font-family: "Nightwatch";
  text-decoration: none;
  font-size: 25px;
  color: #b47433;
}



#menu li a:hover {
  color: #daae81;
  cursor: pointer;
}


#menu .sous-menu {
  font-size: 15px;
  margin-left: 15px;
}


/* Title */

#title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 70%;
}

h1 {
  font-family: "Nightwatch";
  font-size: 50px;
}


#title p {
  font-size: 20px;
  text-align: center;
  letter-spacing: 2px;
}



/* See my work */

#see-my-work {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

#see-my-work p {
  margin-bottom: 20px;
  text-align: center;
}

#icon-arrow-down {
  text-align: center;

}

#icon-arrow-right {
  display: none;
}

.shake-vertical {
  -webkit-animation: shake-vertical 7s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
  animation: shake-vertical 7s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}


#icon-arrow-right {
  text-align: center;

}

.shake-horizontal {
  -webkit-animation: shake-horizontal 7s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
  animation: shake-horizontal 7s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}




/*  MAIN ******************************************************* */


main {
  background-color: black;
  color: #b47433;
  position: relative;
}




.block-css {
  width: 90%;
  height: 10%;
}

.block-css-2 {
  width: 100%;
  height: 10%;
}




#vertical-line-1 {
  width: 1px;
  height: 35vh;
  background-color: #b47433;
  position: absolute;
  top: 17.5%;
  left: 50%;
  transform: translate(-50%, -50%);

}




#vertical-line-2 {
  width: 1px;
  height: 35vh;
  background-color: #b47433;
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);

}




/* Sections */

#under-header {
  display: none;
}



.section {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.section h2 {
  font-family: "Nightwatch";
  font-size: 30px;
  text-align: center;
  font-style: italic;
  font-weight: 200;
}




.section-container {
  width: 80%;
  justify-self: center;
}

.section-container h3 {
  font-weight: 100;
  text-align: center;
  font-size: 15px;
}


/* Project card */

.project-card {
  width: 70%;
  height: 60vh;
  border: 1px solid #b47433;
  border-radius: 10px;
  position: relative;

}

.card-italic {
  font-family: "Nightwatch";
  font-style: italic;
  font-weight: 100;
}

.project-description {
  font-family: "Montserrat";
  font-weight: 100;
  padding: 20px;
  font-size: 15px;
  position: absolute;
  bottom: 2%;
  left: 2%;
}

.github-repo {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45vw;
  height: 8vh;
  background-color: black;
  border: 1px solid #b47433;
  font-size: 15px;
  font-weight: 600;
}

.github-repo:hover {
  background-color: #b47433;
  border: 0;
  cursor: pointer;
}

.github-repo a {
  text-decoration: none;
  color: #b47433;
}

.github-repo a:hover {
  color: white;
}

.project-tag {
  margin-top: 10px;
}


/* Audiobook section */

#section-p01 {

  background-image: url(../img/img_audiobook.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

}

/* Restaurant section */

#section-p02 {

  background-image: url(../img/img_restaurant.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

}

/* Museum section */

#section-p03{

  background-image: url(../img/img_weather.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

}


/* About section */

#about-me {
  min-width: 95%;

}


#about-me p {
  margin: 20px 0;
}


#values {
  text-align: center;
  font-size: 20px;
}

#values-p {
  text-align: center;
}




/* Tech Stack section */

#tech-stack p {
  margin: 20px 0;
}

.tech-titles {
  font-weight: 700;
}


/* *** */


#tech-front {
  margin-top: 80px;
}

#front-title {
  border-bottom: 1px solid #b47433;
  width: 100%;
  margin-bottom: 20px;
}


#front-title p {
  text-align: center;
}

#front-icons {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

#front-icons div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#front-icons div i {
  display: none;
}

/* *** */

#back-title {
  border-bottom: 1px solid #b47433;
  width: 100%;
  margin-bottom: 20px;
}

#back-title p {
  text-align: center;
}


#back-icons {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

#back-icons div {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


#back-icons div img,
#back-icons div i {
  display: none;
}


#back-icons div p {
  text-align: center;
}

/* *** */

#database-title {
  border-bottom: 1px solid #b47433;
  width: 100%;
  margin-bottom: 20px;
}

#database-title p {
  text-align: center;
}


#database-icons {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

#database-icons div {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#database-icons div img {
  display: none;
}

#database-icons div p {
  text-align: center;
}


/* *** */


  #tech-toools {
    margin-top: 50px;
  }




/* Contact section */


#contact {
  min-width: 95%;

}

#contact p {
  text-align: center;
  margin: 20px 0;
}

#icon-github {
  display: flex;
  justify-content: center;
  font-size: 70px;
}

#icon-github a {
  color: #b47433;
}

#icon-github a:hover {
  color: #daae81;
}