@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;
  --yellow1: #f2e46a;
  --gold: #f9e01e;
  --pink: #d64550;
  --pink1: #b33843;

  --chosenFont: Major;
}

body {
  height: 100vh;
}

.myWorksPage .backgroundImg {
  width: 100%;
  z-index: -2;
}

/* ______________________________________________________show works window */
.worksWindow {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  border: solid 5px var(--gold);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

/* ______________________________________________________sticky-scroll balls */
.myWorksPage {
  position: relative;
}

#legoApp_ball {
  position: absolute;
  top: 5%;
  left: 25%;
  z-index: 2;
}
#pirateGame_ball {
  position: absolute;
  top: 5%;
  left: 35%;
  z-index: 2;
}
#comic_ball {
  position: absolute;
  top: 5%;
  left: 45%;
  z-index: 2;
}
#info_ball {
  position: absolute;
  top: 5%;
  left: 55%;
  z-index: 2;
}
#fitWeb_ball {
  position: absolute;
  top: 5%;
  left: 65%;
  z-index: 2;
}
#logos_ball {
  position: absolute;
  top: 5%;
  left: 75%;
  z-index: 2;
}
#comicPromo_ball {
  position: absolute;
  top: 5%;
  left: 85%;
  z-index: 2;
}

#logos_ball_div,
#legoApp_ball_div,
#pirateGame_ball_div,
#comicPromo_ball_div,
#comic_ball_div,
#info_ball_div,
#fitWeb_ball_div {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--yellow1);
  border: solid 5px var(--gold);

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--chosenFont);
  font-weight: bold;
  color: var(--blue);
  text-align: center;
}
#logos_ball_div p,
#legoApp_ball_div p,
#pirateGame_ball_div p,
#comicPromo_ball_div p,
#comic_ball_div p,
#info_ball_div p,
#fitWeb_ball_div p {
  margin: 0;
}
#logos_ball_div:hover,
#legoApp_ball_div:hover,
#pirateGame_ball_div:hover,
#comicPromo_ball_div:hover,
#comic_ball_div:hover,
#info_ball_div:hover,
#fitWeb_ball_div:hover {
  background-color: #f2e46a00;
}
#logos_ball_img,
#legoApp_ball_img,
#pirateGame_ball_img,
#comicPromo_ball_img,
#comic_ball_img,
#info_ball_img,
#fitWeb_ball_img {
  display: none;
}
#logos_ball_div:hover #logos_ball_img,
#legoApp_ball_div:hover #legoApp_ball_img,
#pirateGame_ball_div:hover #pirateGame_ball_img,
#comicPromo_ball_div:hover #comicPromo_ball_img,
#comic_ball_div:hover #comic_ball_img,
#info_ball_div:hover #info_ball_img,
#fitWeb_ball_div:hover #fitWeb_ball_img {
  display: block !important;
  border-radius: 50%;
  z-index: -1;
}
#logos_ball_div:hover p,
#legoApp_ball_div:hover p,
#pirateGame_ball_div:hover p,
#comicPromo_ball_div:hover p,
#comic_ball_div:hover p,
#info_ball_div:hover p,
#fitWeb_ball_div:hover p {
  display: none;
}

.fallingAnimation_logos {
  animation: fall 2s ease-in-out forwards;
}
@keyframes fall {
  0% {
    top: 5%;
  }
  100% {
    top: 50%;
  }
}
.risingAnimation_logos {
  animation: rise 2s ease-in-out forwards;
}
@keyframes rise {
  0% {
    top: 50%;
  }
  100% {
    top: 5%;
  }
}

.fallingAnimation_legoApp {
  animation: fall1 2s ease-in-out forwards;
}
@keyframes fall1 {
  0% {
    top: 5%;
  }
  100% {
    top: 40%;
  }
}
.risingAnimation_legoApp {
  animation: rise1 2s ease-in-out forwards;
}
@keyframes rise1 {
  0% {
    top: 40%;
  }
  100% {
    top: 5%;
  }
}

.fallingAnimation_pirateGame {
  animation: fall6 2s ease-in-out forwards;
}
@keyframes fall6 {
  0% {
    top: 5%;
  }
  100% {
    top: 30%;
  }
}
.risingAnimation_pirateGame {
  animation: rise6 2s ease-in-out forwards;
}
@keyframes rise6 {
  0% {
    top: 30%;
  }
  100% {
    top: 5%;
  }
}

.fallingAnimation_comicPromo {
  animation: fall2 2s ease-in-out forwards;
}
@keyframes fall2 {
  0% {
    top: 5%;
  }
  100% {
    top: 60%;
  }
}
.risingAnimation_comicPromo {
  animation: rise2 2s ease-in-out forwards;
}
@keyframes rise2 {
  0% {
    top: 60%;
  }
  100% {
    top: 5%;
  }
}

.fallingAnimation_comic {
  animation: fall3 2s ease-in-out forwards;
}
@keyframes fall3 {
  0% {
    top: 5%;
  }
  100% {
    top: 25%;
  }
}
.risingAnimation_comic {
  animation: rise3 2s ease-in-out forwards;
}
@keyframes rise3 {
  0% {
    top: 25%;
  }
  100% {
    top: 5%;
  }
}

.fallingAnimation_info {
  animation: fall4 2s ease-in-out forwards;
}
@keyframes fall4 {
  0% {
    top: 5%;
  }
  100% {
    top: 30%;
  }
}
.risingAnimation_info {
  animation: rise4 2s ease-in-out forwards;
}
@keyframes rise4 {
  0% {
    top: 30%;
  }
  100% {
    top: 5%;
  }
}

.fallingAnimation_fitWeb {
  animation: fall5 2s ease-in-out forwards;
}
@keyframes fall5 {
  0% {
    top: 5%;
  }
  100% {
    top: 40%;
  }
}
.risingAnimation_fitWeb {
  animation: rise5 2s ease-in-out forwards;
}
@keyframes rise5 {
  0% {
    top: 40%;
  }
  100% {
    top: 5%;
  }
}