@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 {
  background-color: var(--cream) !important;
  height: 100vh;
  width: 100vw;
}

#allLogos {
  width: 100%;
}

.navItem {
  background-color: #db7a6d00;
  width: 100px;
  height: 100px;
  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);
}

.backBTN {
  position: absolute;
  top: 5%;
  left: 2%;
}

.backBTN .flowerIMG {
  width: 100%;
  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);
  }
}