@font-face {
  font-family: Atteron;
  src: url(../font/Atteron.ttf);
}
@font-face {
  font-family: Reborn;
  src: url(../font/Reborn.woff);
}
@font-face {
  font-family: Canter;
  src: url(../font/Canter.otf);
}

@media screen and (min-width: 1024px) {
      .is-centered {
        font-family: Atteron;
      }
    }

@media screen and (max-width: 1023px) {
      .navbar-menu {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100%;
        background-color: white;
        padding-top: 4rem;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        transition: left 0.3s ease;
        z-index: 1001;
        display: flex;
        flex-direction: column;
      }

      .navbar-menu.is-active {
        left: 0;
      }

      .navbar-item {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #eee;
      }

      /* Dimmed overlay */
      .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 1000;
      }

      .menu-overlay.is-active {
        opacity: 1;
        visibility: visible;
      }
    }

#maindesktophero {
    background-color: #042d62;
}

#maindesktophero canvas{
  position: absolute;
  height: 100vh;
}

#maindesktophero .level {
  z-index: 100;
}

#herologodesktop {
    width: 30vw;
    border-style: solid;
    border-width: 8px;
    border-color: #efdd70;
}

.sideimgdesktop{
  width: 20vw;
  border-style: solid;
  border-width: 8px;
  border-color: #efdd70;
}

.coolhead {
  font-family: Atteron;
  color: #FFFFFF;
}

.coolheadlink {
  color: #FFFFFF;
  text-decoration: none;
}
.coolheadlink:visited {
  color: #FFFFFF;
  text-decoration: none;
}
.coolheadlink:hover {
  color: #e5aeb6;
  text-decoration: none;
}

.mainsection {
  background-color: #F5F5F5;
}

.mainsectionhead {
  font-family: Atteron;
  color: #212121;
}

.mainsectiontext {
  font-family: Canter;
  color: #212121;
}

.lscontainer {
  overflow: hidden;
}

.mainsectionbutton {
  font-family: Canter;
}

.footer {
  background-color: #EEEEEE;
}