@font-face {
  font-family: Agency FB;
  src: url(../fonts/AgencyFB-Bold/AgencyFB-Bold.ttf);
}

@font-face {
  font-family: Marquee;
  src: url(../fonts/marquee-moon/marquee\ moon.ttf);
}

@font-face {
  font-family: Nova;
  src: url(../fonts/Nova_Mono/NovaMono-Regular.ttf);
}

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

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

@font-face {
  font-family: Major;
  src: url(../fonts/Major_Mono_Display/MajorMonoDisplay-Regular.ttf);
}

:root {
  --cream: #fff4e3;
  --blue: #08415c;
  --yellow: #efcb68;
  --pink: #d64550;
  --pink1: #b33843;
  --colorPickerPink: #db796d;

  --chosenFont: Major;
}

body {
  height: 100vh;
}

html {
  background-color: var(--cream);
}
/* ____________________________________________________________________________________landingPage */
.landingPage {
  height: 100vh;
  background-image: url("../images/beauty1.7.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* ____________________________________________________Logo & navbar */

.logoIMG {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 10%;
}

.navbar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute !important;
  top: 30%;
  left: 3.5%;
  height: 70%;
  padding-bottom: 3% !important;
  font-family: var(--chosenFont) !important;
}

.navItem {
  background-color: #db7a6d00;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--chosenFont) !important;
}

.navItem:hover {
  background-color: var(--colorPickerPink);
  box-shadow: rgb(253, 253, 253) 0px 4px 12px;
  transition: background-color 0.5s ease-in-out;
}

.navItem:hover .flowerIMG {
  display: none;
}

.navItem a {
  text-decoration: none;
}

.navItem a p {
  display: none;
}

.navItem:hover a p {
  display: block;
  margin: 0;
  color: var(--cream);
}

.aboutMe_flower {
  position: absolute;
  top: 45%;
  right: 20%;
}
.myWorks_flower {
  position: absolute;
  top: 20%;
  right: 40%;
}
.contactMe_flower {
  position: absolute;
  top: 70%;
  right: 30%;
}

.aboutMe_flower .flowerIMG {
  width: 100%;
  animation: pulse 5s infinite;
}
.myWorks_flower .flowerIMG {
  width: 130%;
  animation: pulse 5s infinite;
}
.contactMe_flower .flowerIMG {
  width: 80%;
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.3) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

/* ________________________________________________________flowers in hair */
#flowerInHair_1 {
  position: absolute;
  top: 35%;
  left: 10%;
  width: 3%;
  animation: smallPulse 6s infinite;
}
#flowerInHair_2 {
  position: absolute;
  top: 42%;
  right: 16%;
  width: 3%;
  animation: smallPulse 6s infinite;
}
#flowerInHair_3 {
  position: absolute;
  top: 20%;
  right: 25%;
  width: 3%;
  animation: smallPulse 6s infinite;
}
#flowerInHair_4 {
  position: absolute;
  top: 57%;
  left: 5%;
  width: 3%;
  animation: smallPulse 6s infinite;
}
#flowerInHair_5 {
  position: absolute;
  top: 64%;
  right: 40%;
  width: 3%;
  animation: smallPulse 6s infinite;
}
#flowerInHair_6 {
  position: absolute;
  top: 70%;
  left: 13%;
  width: 3%;
  animation: smallPulse 6s infinite;
}
#flowerInHair_7 {
  position: absolute;
  top: 77%;
  right: 10%;
  width: 3%;
  animation: smallPulse 6s infinite;
}

@keyframes smallPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* _________________________________________________________homepage content */
#text {
  margin-top: 50%;
}

/* ___________________________________________________________introduction */
.introduction {
  position: absolute;
  top: 5%;
  right: 5%;

  background-color: #d64551c4;
  color: white;
  border-radius: 15px;
  padding: 10px;

  font-family: var(--chosenFont);
}

.introduction p {
  font-family: var(--chosenFont);
}

.toughtBubble1 {
  position: absolute;
  top: 35%;
  right: 40%;
  width: 30px;
  height: 30px;
  background-color: #d64551c4;
  border-radius: 50%;
  animation-name: bubble1Appear;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes bubble1Appear {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.toughtBubble2 {
  position: absolute;
  top: 32%;
  right: 35%;
  width: 50px;
  height: 50px;
  background-color: #d64551c4;
  border-radius: 50%;
  animation-name: bubble2Appear;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes bubble2Appear {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.toughtBubble3 {
  position: absolute;
  top: 23%;
  right: 28%;
  width: 70px;
  height: 70px;
  background-color: #d64551c4;
  border-radius: 50%;
  animation-name: bubble3Appear;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes bubble3Appear {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}