.page1 {
  margin: auto;
  display: flex;
  justify-content: center;
  width: 100%;
  background: var(--theme-dark-blue);
  color: #001c58;
  position: relative;
}

.page1 .hh-link-container {
  cursor: pointer;
  font-size: 1.2vw;
  top: calc(2vh + 0.75vw);
  right: calc(28.6vw + 15.5vw);
  position: absolute;
  transition: all 300ms ease-out;
  z-index: 120;
}
.page1 .hh-link-container a {
  color: white;
  text-decoration: unset;
}

.page1 .teachers-link {
  right: calc(46vw + 15.5vw);
}

.page1 .students-link {
  right: calc(37vw + 15.5vw);
}

.page1 .libraries-link {
  right: calc(19vw + 17vw);
}

.page1 .sign-up-text,
.page1 .login-text {
  top: 1.8vw;
  z-index: 1000;
}

.page1 .sign-up-text {
  position: absolute;
  font-size: 1.5vw;
  right: calc(1vw + 26.4vw);
}


.page1 .sign-up-text a {
  position: absolute;
  z-index: 100;
  margin-top: -0.2vw;
  width: 6vw !important;
  text-align: center;
  text-decoration: unset !important;
  border: 0.2vw solid white;
  padding: 0;
  padding: 0 1vw;
  background: var(--theme-dark-blue);
  color:  white !important;
  border-radius: 3vw;
  transition: all ease-in-out 300ms;
}

.page1 .sign-up-text:hover a {
  border: 0.2vw solid white;
  color: white !important;
  background: var(--theme-green) !important;
}

.page1 .login-text {
  position: absolute;
  font-size: 1.5vw;
  right: calc(1vw + 16vw);
}

.page1 .login-text a {
  z-index: 100;
  position: absolute;
  text-decoration: unset !important;
  margin-top: -0.2vw;
  padding: 0.2vw 0;
  text-align: center;
  width: 8.7vw;
  background: white !important; 
  color: var(--theme-dark-blue);
  border-radius: 3vw;
}


.background-g1 {
  position: absolute;
  top: 0vw;
  left: 0;
  opacity: 1;
  width: 8.7vw;
  height: 2.3vw;
  border-radius: 2vw;
  background: var(--tab-gray);
}

.login-text:hover .background-g1 {
  top: -0.4vw;
  left: -0.3vw;
  width: 9.4vw;
  height: 3vw;
  background: white;
  opacity: 0.5;
  border-radius: 2vw;
  transition: all ease-in-out 300ms;
}


@media screen and (min-width: 1060px) {
  .mobile {
    display: none !important;
  }
}

@media (min-aspect-ratio: 2/6) and (max-aspect-ratio: 16/9) {
  .hh-link-container {
    font-size: 1.5vw !important;
  }
}

















.page1 .page-container {
  position: relative;
  width: 100%;
  padding-bottom: 5vw;
  color: white;
}

.page1 .page-container h1 {
  width: 100vw;
  padding-top: calc(2vh + 0.75vw + 2vw + 4vh);
  text-align: center;
}

.page1 .page-container h3 {
  text-align: center;
  font-weight: normal;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.7vw;
  margin: 0;
  margin-bottom: 6vh;
}

.page1 .page-container h3 svg {
  margin-left: 0.5vw;
  width: 2vw;
  height: 2vw;
}


.bottom-boxes > div {
  display: flex;
  align-items: center;
  margin-left: 0.7vw;
  margin-right: 0.7vw;
  font-size: 1.4vw;
}

.bottom-boxes svg {
  width: 2vw;
  height: 2vw;
  margin-right: 0.3vw;
}


.flex-bricks {
  margin-top: 1.7vw;
  margin-bottom: 1.7vw;
  display: flex;
  justify-content: center;
}


#brick-length-1,
#brick-length-2 {
  margin-right: 0.4vw;
  margin-left: 0vw;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*
#fixed-brick-link-4 {
  opacity: 0;
  animation: fade 0.5s 0.05s forwards;
}


#fixed-brick-link-3 {
  opacity: 0;
  animation: fade 0.5s 0.35s forwards;
}

#fixed-brick-link-1 {
  opacity: 0;
  animation: fade 0.5s 0.5s forwards;
}

#fixed-brick-link-2 {
  opacity: 0;
  animation: fade 0.5s 0.7s forwards;
}*/




.competition-timer {
  margin-bottom: 4vh;
}

.competition-timer .competition-timer-boxes .time-box {
  margin: 0.5vw;
  color: white;
  border-radius: 0.4vw;
  height: 4vw;
  width: 5vw;
  font-size: 2.3vw;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), #001C58;
  display: flex;
  align-items: center;
  justify-content: center;
}

.competition-timer .competition-timer-lables div {
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  width: 5vw;
  text-align: center;
  font-size: 0.87vw;
}