/*
 * Globals
 */

 *,
 *:after,
 *:before {
     box-sizing: border-box;
 }

   :root {
            --terminal-text-color: #00ff00;
            --terminal-bg-color: #161b22;
            --terminal-border-color: #00ff00;
            --body-bg-color: #0d1117;
            --ui-green: #27cc14;
            --ui-green-dim: rgba(39, 204, 20, 0.33);
            --accent-color: #008f11; /* Darker Green */
            --text-color: #00ff41; /* Bright Green */
            --transition: 0.25s;
            --spark: 1.8s;
            --speed: 1.2s;

        }
 
 
 /* Custom default button */
 .btn-outline-success,
 .btn-outline-success,
 .btn-outline-success:focus {
   /* color: #BF7545; */
   border-color: #BF7545; 
 }

 .bg-dark { 
  background-color: #45454A !important;
 }
 
 .border-success {
  border-color: #C8FF00 !important;
 }


 
 /*
  * FONTS
  */
  
  /*SWITZER FONTS*/
  @font-face {
    font-family: 'Switzer-Regular';
    src: url('../fonts/switzer/Switzer-Regular.woff2') format('woff2'),
         url('../fonts/switzer/Switzer-Regular.woff') format('woff'),
         url('../fonts/switzer/Switzer-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }

  @font-face {
    font-family: 'Switzer-Medium';
    src: url('../fonts/switzer/Switzer-Medium.woff2') format('woff2'),
         url('../fonts/switzer/Switzer-Medium.woff') format('woff'),
         url('../fonts/switzer/Switzer-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
  }

  @font-face {
    font-family: 'Switzer-Bold';
    src: url('../fonts/switzer/Switzer-Semibold.woff2') format('woff2'),
         url('../fonts/switzer/Switzer-Bold.woff') format('woff'),
         url('../fonts/switzer/Switzer-Bold.ttf') format('truetype');
         font-weight: 700;
         font-display: swap;
         font-style: normal;
  }


  @font-face {
    font-family:'Switzer-Semibold';
    src: url('../fonts/switzer/Switzer-Semibold.woff2') format('woff2'),
         url('../fonts/switzer/Switzer-Semibold.woff') format('woff'),
         url('../fonts/switzer/Switzer-Semibold.ttf') format('truetype');
         font-weight: 600;
         font-display: swap;
         font-style: normal;
  }
  

  @font-face {
    font-family: 'Switzer-Black';
    src: url('../fonts/switzer/Switzer-Black.woff2') format('woff2'),
         url('../fonts/switzer/Switzer-Black.woff') format('woff'),
         url('../fonts/switzer/Switzer-Black.ttf') format('truetype');
         font-weight: 900;
         font-display: swap;
         font-style: normal;
  }

  
  /*SWITZER FONTS*/

  @font-face {
    font-family: 'Manrope-Regular';
    src: url('../fonts/manrope/Manrope-Regular.woff2') format('woff2'),
         url('../fonts/manrope/Manrope-Regular.woff') format('woff'),
         url('../fonts/manrope/Manrope-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }

  @font-face {
    font-family: 'Manrope-Medium';
    src: url('../fonts/manrope/Manrope-Medium.woff2') format('woff2'),
         url('../fonts/manrope/Manrope-Medium.woff') format('woff'),
         url('../fonts/manrope/Manrope-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
  }


  /*BEER GOGGLES FONTS*/
  @font-face {
    font-family: 'Beer-Goggles';
    src: url('../fonts/beer/beerg.woff2') format('woff2'),
         url('../fonts/beer/beerg.woff') format('woff'),
         url('../fonts/beer/beerg.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
  }

  
    /* New code that fixes the mobile scrolling issue, still needs testing */
  html, body { overflow-x: hidden;}

  body {
   background-color: #F1F1F1;
   color: #BF7545;
   overflow: hidden;
   position: relative;
 }
 
  /* old body code */
/*  
 body {
   background-color: #F1F1F1;
   color: #BF7545;
   overflow: hidden;
 } */
 
 #specialisations {
   background-color: #D6E5F5;
   color: #3660EC;
 }

 /* .contact-header {
  font-size: 500%;
 } */

 .page-title h1 {
    font-family: 'Switzer-bold', Helvetica, Arial, sans-serif;
    font-size: 5em;
 }

 .page-title em {
  font-style: normal;
  font-family: 'Beer-Goggles', 'Switzer-Semibold';
}
 
 #missions {
   background-color: #F2EBD7;
   color: #E35C18;
 }
 
 #mission-brief{
   background-color: #45454A;
   color: #C8FF00;
 }
 
 .cover-container {
   max-width: 42em;
 }
 
 .hidden {
    display: none;
}
 
 /*
  * Header
  */
 
 /* .logos {
   width: 180px;
   height: 130px;
   position: absolute;
   left: 5px;
 } */

 .logos {
  width: 180px;
  height: 180px;
  position: absolute;
  left: 5px;
  margin-top: -25px;
}
 
 /*
  * Menu
  */
 /* .menu {
   display: flex;
   margin-bottom: 50px;
 } */
 
 /*
  * Mobile Devices
  */
 
 
 /* .nav-masthead .nav-link {
   color: rgba(255, 255, 255, .5);
   border-bottom: .25rem solid transparent;
 } */
 
 /* .nav-masthead .nav-link:hover,
 .nav-masthead .nav-link:focus {
   border-bottom-color: rgba(255, 255, 255, .25);
 } */
 
 /* .nav-masthead .nav-link + .nav-link {
   margin-left: 1rem;
 } */
 
 /* .nav-masthead .active {
   color: #fff;
   border-bottom-color: #fff;
 } */
 
 
 /* .circle {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -4px 0 0 -4px;
   pointer-events: none;
   mix-blend-mode: screen;
   z-index: 10;
   box-shadow: 0px 0px 8px 0px #FDFCA9 inset, 0px 0px 24px 0px #FFEB3B, 0px 0px 8px 0px #FFFFFF42;
 } */
 
 .button-wrapper {
   position: relative;
   margin:auto;
 }

 .wake-qassandra {
  bottom: 350px;
  display: none;
}

/* .top-starwars{
  z-index: 1;
}

 .audiob {
  position: relative;
  z-index: 10; 
  margin-bottom: 200px;
} */

.aboutus-buttons { 
  margin-bottom: 150px;
  /* visibility: hidden; */
  /* display: none; */
}

.btn-primary {
   border-radius: 50%;
   --bs-btn-bg: #C8FF00;
   --bs-btn-color: #45454A; 
   --bs-btn-hover-color: #F032B1;
   --bs-btn-active-bg: #729200;
   --bs-btn-active-color: #F032B1;
   --bs-btn-active-border-color: #F032B1;
   --bs-btn-disabled-color: #45454A;
   --bs-btn-disabled-bg:#E3FE83;
   --bs-btn-border-color: #C8FF00;
   --bs-btn-hover-bg: #92BA00;
   --bs-btn-hover-border-color: #92BA00;
   --bs-btn-disabled-border-color: #E3FE83;
   height: 100px;
   width: 100px;
}

/* ASSIGN MISSION BUTTON */
.btn-success {
   background: var(--ui-green-dim);
   --bs-btn-border-color: #C8FF00;
   --bs-btn-hover-border-color: #C8FF00;
   --bs-btn-color: #C8FF00; 
   --bs-btn-hover-color: #45454A;
   --bs-btn-hover-bg: #C8FF00;
   --bs-btn-active-bg: var(--ui-green);
   --bs-btn-active-color: #45454A;
   --bs-btn-active-border-color: var(--ui-green); 
}

/* CLOSE BUTTON ON MODAL */
 .assign-mission-modal .btn-secondary {
  --bs-btn-color: #C8FF00; 
  /* --bs-btn-border-color: #C8FF00; */
  --bs-btn-hover-color: #C8FF00;
  --bs-btn-hover-border-color: #C8FF00;
  --bs-btn-active-border-color: #C8FF00;
  --bs-btn-active-color: #F032B1;
}

/* FORM INPUTS IN MODAL */

/* .formErrors {
   color: #F032B1;
} */

.form-control {
   color: #C8FF00;
  background-color: transparent;
  border: var(--bs-border-width) solid #C8FF00;
}

input[type=text]:focus {
  background-color: var(--ui-green-dim);
  color: #C8FF00;
  border: 2px solid #C8FF00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

input[type=email]:focus {
  background-color: var(--ui-green-dim);
  color: #C8FF00;
  border: 2px solid #C8FF00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}


  /*
  * CIRCULAR MENU BUTTONS
  */
 
 .button {
   --cut: 0.2em;
   --active:1;
   --bg:
         radial-gradient(
             40% 50% at center 100%,
             hsl(83 0% 72% / 0.05),
             transparent
         ),
         radial-gradient(
             80% 100% at center 120%,
             hsl(73 0% 70% / 0.1),
             transparent
         ),
         hsl(73 100% 50%);
   background: var(--bg);
   z-index: 1;
   position: relative;
   text-decoration: none;
   text-align: center;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   display: inline-block;
   border-radius: 50%;
   height: 100px;
   width: 100px;
 }

 .wake-button {
  --cut: 0.2em;
  --active:1;
  --bg:
        radial-gradient(
            40% 50% at center 100%,
            hsl(83 0% 72% / 0.05),
            transparent
        ),
        radial-gradient(
            80% 100% at center 120%,
            hsl(73 0% 70% / 0.1),
            transparent
        ),
        hsl(73 100% 50%);
  background: var(--bg);
  z-index: 1;
  position: relative;
  text-decoration: none;
  text-align: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
  border-radius: 50%;
  height: 200px;
  width: 200px;
}

 .button-cool {
    --cut: 0.2em;
    --active:1;
    --bg:
          radial-gradient(
              40% 50% at center 100%,
              hsl(201 0% 72% / 0.05),
              transparent
          ),
          radial-gradient(
              80% 100% at center 120%,
              hsl(191 0% 70% / 0.1),
              transparent
          ),
          hsl(191 94.5% 50.2%);
    background: var(--bg);
    z-index: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    color: #3660EC;
    border-radius: 50%;
    height: 100px;
    width: 100px;
  }

  .button-excitement {
    --cut: 0.2em;
    --active:1;
    --bg:
      radial-gradient(
        40% 50% at center 100%,
        hsl(55 0% 72% / 0.05),
        transparent
      ),
      radial-gradient(
        80% 100% at center 120%,
        hsl(45 0% 70% / 0.1),
        transparent
      ),
      hsl(45 93% 48%);
    background: var(--bg);
    z-index: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    border-radius: 50%;
    height: 100px;
    width: 100px;
  }

  .button-contact {
    --cut: 0.2em;
    --active:1;
    --bg:
          radial-gradient(
              40% 50% at center 100%,
              hsl(330 0% 72% / 0.05),
              transparent
          ),
          radial-gradient(
              80% 100% at center 120%,
              hsl(320 0% 70% / 0.1),
              transparent
          ),
          hsl(320 86.4% 56.9%);
    background: var(--bg);
    z-index: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    border-radius: 50%;
    height: 100px;
    width: 100px;
  }


  /*
  * MENU ITEMS
  */

  /* CALM BUTTONS */
 .btn-outline-success{
    border-radius: 30px;
    --bg:
    radial-gradient(
        40% 50% at center 100%,
        hsl(83 0% 72% / 0.05),
        transparent
    ),
    radial-gradient(
        80% 100% at center 120%,
        hsl(73 0% 70% / 0.1),
        transparent
    ),
    hsl(73 100% 50%);
    background: var(--bg);
    z-index: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    color: #BF7545;
    --bs-btn-hover-bg: #BF7545;
    --bs-btn-hover-color: #C8FF00;
    --bs-btn-active-color: #C8FF00;
    --bs-btn-active-bg: #7B3E11;
    font-family: 'Switzer-Medium', Helvetica, Arial, sans-serif;
 }

 .highlighted-calm {
    --bg:
    radial-gradient(
        40% 50% at center 100%,
        hsl(15 0% 72% / 0.05),
        transparent
    ),
    radial-gradient(
        80% 100% at center 120%,
        hsl(25 0% 70% / 0.1),
        transparent
    ),
    hsl(25 75.7% 27.5%);

    color: #C8FF00;
    border-color: #C8FF00;
 }

 /* COOL BUTTONS */
 .btn-outline-primary{
    border-radius: 30px;
    --bg:
          radial-gradient(
              40% 50% at center 100%,
              hsl(201 0% 72% / 0.05),
              transparent
          ),
          radial-gradient(
              80% 100% at center 120%,
              hsl(191 0% 70% / 0.1),
              transparent
          ),
          hsl(191 94.5% 50.2%);
    background: var(--bg);
    z-index: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    color: #FFF;
    --bs-btn-hover-bg: #3660EC;
    font-family: 'Switzer-Regular', Helvetica, Arial, sans-serif;
    /* --bs-btn-active-color: #C8FF00; what happens when the button is clicked on */
    /* --bs-btn-active-bg: #3660EC;  */
 }

 .highlighted-cool {
  --bg:
  radial-gradient(
      40% 50% at center 100%,
      hsl(216 0% 72% / 0.05),
      transparent
  ),
  radial-gradient(
      80% 100% at center 120%,
      hsl(226 0% 70% / 0.1),
      transparent
  ),
  hsl(226 82.7% 56.9%);

  border-color: #08CEF8;
}

   /* EXCITEMENT BUTTONS */
   .btn-outline-warning {
    border-radius: 30px;
    --bg:
      radial-gradient(
        40% 50% at center 100%,
        hsl(55 0% 72% / 0.05),
        transparent
      ),
      radial-gradient(
        80% 100% at center 120%,
        hsl(45 0% 70% / 0.1),
        transparent
      ),
      hsl(45 93% 48%);
    background: var(--bg);
    z-index: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    color: #fff;
    border-color: #E35C18;
    /* --bs-btn-hover-border-color: #E84500; */
    --bs-btn-hover-bg: #E84500; 
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff; 
    --bs-btn-active-bg: #E35C18; 
    font-family: 'Switzer-Regular', Helvetica, Arial, sans-serif;
 }

  .highlighted-excitement {
    --bg:
    radial-gradient(
        40% 50% at center 100%,
        hsl(8 0% 72% / 0.05),
        transparent
    ),
    radial-gradient(
        80% 100% at center 120%,
        hsl(18 0% 70% / 0.1),
        transparent
    ),
    hsl(18 100% 45.5%);

    border-color: #FFD936;
  }

  /* CURIOUS BUTTONS */
  .btn-outline-danger{
    border-radius: 30px;
    --bg:
          radial-gradient(
              40% 50% at center 100%,
              hsl(330 0% 72% / 0.05),
              transparent
          ),
          radial-gradient(
              80% 100% at center 120%,
              hsl(320 0% 70% / 0.1),
              transparent
          ),
          hsl(320 86.4% 56.9%);
    background: var(--bg);
    z-index: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    color: #C8FF00;
    border-color: #C8FF00;
    --bs-btn-hover-bg: #C8FF00;
    --bs-btn-hover-color: #F032B1;
    --bs-btn-active-bg: #dc3545;
    font-family: 'Switzer-Regular', Helvetica, Arial, sans-serif;
 }

  .highlighted-curious {
    --bg:
    radial-gradient(
        40% 50% at center 100%,
        hsl(83 0% 72% / 0.05),
        transparent
    ),
    radial-gradient(
        80% 100% at center 120%,
        hsl(73 0% 70% / 0.1),
        transparent
    ),
    hsl(73 100% 50%);

    color: #F032B1; 
    border-color: #F032B1;
  }

 
   /*
  * BUTTON GLOWS
  */

  /* CALM BEFORE BUTTON GLOW */
 .button::before, .btn-outline-success::before {
   content: "";
   box-shadow: 0px 0px 24px 0px #FFEB3B;
   /* -webkit-box-shadow: 0px 0px 24px 0px #FFEB3B; */
   mix-blend-mode: screen;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   border-radius: 999px;
   opacity: 0;
   pointer-events: none;
 }

  /* CALM AFTER BUTTON GLOW */
  .button::after, .btn-outline-success::after {
    content: "";
    box-shadow: 0px 0px 23px 0px #E7FF91 inset, 0px 0px 8px 0px #FFFFFF42;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
  }

    /* WAKE QASSANDRA BEFORE BUTTON GLOW */
 .wake-button::before, .btn-outline-success::before {
  content: "";
  box-shadow: 0px 0px 24px 0px #FFEB3B;
  /* -webkit-box-shadow: 0px 0px 24px 0px #FFEB3B; */
  mix-blend-mode: screen;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 999px;
  opacity: 0;
}

 /* WAKE QASSANDRA CALM AFTER BUTTON GLOW */
 .wake-button::after, .btn-outline-success::after {
   content: "";
   box-shadow: 0px 0px 23px 0px #E7FF91 inset, 0px 0px 8px 0px #FFFFFF42;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   border-radius: 999px;
   opacity: 0;
 }
  

 /* COOL BEFORE BUTTON GLOW */
 .button-cool::before, .btn-outline-primary::before  {
    content: "";
    box-shadow: 0px 0px 24px 0px #94E9FC;
    /* -webkit-box-shadow: 0px 0px 24px 0px #94E9FC; */
    mix-blend-mode: screen;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
  }


  /* COOL AFTER BUTTON GLOW */
 .button-cool::after, .btn-outline-primary::after {
    content: "";
    box-shadow: 0px 0px 23px 0px #EDF8FB inset, 0px 0px 8px 0px #FFFFFF42;
    /* -webkit-box-shadow: 0px 0px 23px 0px #EDF8FB inset, 0px 0px 8px 0px #FFFFFF42; */
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
  }

  /* EXCITEMENT BEFORE BUTTON GLOW */
  .button-excitement::before, .btn-outline-warning::before  {
    content: "";
    box-shadow: 0px 0px 24px 0px #FF7E3D;
    mix-blend-mode: screen;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
  }
  
  /* EXCITEMENT AFTER BUTTON GLOW */
  .button-excitement::after, .btn-outline-warning::after {
    content: "";
    box-shadow: 0px 0px 23px 0px #FDFCA9 inset, 0px 0px 8px 0px #FFFFFF42;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
  }

   /* CONTACT BEFORE BUTTON GLOW */
 .button-contact::before, .btn-outline-danger::before {
  content: "";
  /* box-shadow: 0px 0px 24px 0px #FF43C1; */
  box-shadow: 0px 0px 24px 0px #E7FF91;
  mix-blend-mode: screen;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 999px;
  opacity: 0;
}

  /* CONTACT AFTER BUTTON GLOW */
  .button-contact::after, .btn-outline-danger::after {
    content: "";
    box-shadow: 0px 0px 23px 0px #FF90DA inset, 0px 0px 8px 0px #FFFFFF42;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    opacity: 0;
  }
 
  /*
  * BUTTON HOVER EFFECTS
  */
 .button-wrapper:hover {
   .button::before, .button::after, .wake-button::before, .wake-button::after, .button-cool::before, .button-cool::after, .btn-outline-success::before, .btn-outline-success::after, .btn-outline-primary::before, .btn-outline-primary::after, .button-contact::before, .button-contact::after, .btn-outline-danger::before, .btn-outline-danger::after, .button-excitement::before, .button-excitement::after, .btn-outline-warning::before, .btn-outline-warning::after {
     opacity: 1;
   }
   
   .dot { 
    -webkit-transform: translate(0, 0) rotate(var(--rotatation));
    transform: translate(0, 0) rotate(var(--rotatation));
   }
   
   .dot::after {
     -webkit-animation-play-state: running;
             animation-play-state: running;
   }
 }
 
  /*
  * ATOMS THAT SURROUND THE MAIN MENU BUTTON
  */
 .dot {
   display: block;
   position: absolute;
   -webkit-transition: transform calc(var(--speed) / 12) ease;
   transition: transform calc(var(--speed) / 12) ease;
   width: var(--size);
   height: var(--size);
   -webkit-transform: translate(var(--starting-x), var(--starting-y)) rotate(var(--rotatation));
   transform: translate(var(--starting-x), var(--starting-y)) rotate(var(--rotatation));
   
 }

  /* CALM AFTER DOT ANIMATION */
 .dot::after {
   content: "";
   -webkit-animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
           animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
   -webkit-animation-play-state: paused;
           animation-play-state: paused; 
   display: block;
   border-radius: 100%;
   background: #BF7545;
   width: 100%;
   height: 100%;
   box-shadow: 0px 0px 6px 0px #BF7545, 0px 0px 4px 0px #BF7545 inset, 0px 0px 2px 1px #c8ff00;
 }

   /* COOL AFTER DOT ANIMATION */
 .dot-cool::after {
    content: "";
    -webkit-animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
            animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
    -webkit-animation-play-state: paused;
            animation-play-state: paused; 
    display: block;
    border-radius: 100%;
    background: #3660EC;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 6px 0px #3660EC, 0px 0px 4px 0px #3660EC inset, 0px 0px 2px 1px #94E9FC;
  }

  /* EXCITEMENT AFTER DOT ANIMATION */
 .dot-excitement::after {
  content: "";
  -webkit-animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
          animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
  -webkit-animation-play-state: paused;
          animation-play-state: paused; 
  display: block;
  border-radius: 100%;
  background: #E35C18;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 6px 0px #E35C18, 0px 0px 4px 0px #E35C18 inset, 0px 0px 2px 1px #FDFCA9;
}

 /* CURIOUS AFTER DOT ANIMATION */
 .dot-curious::after {
  content: "";
  -webkit-animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
          animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
  -webkit-animation-play-state: paused;
          animation-play-state: paused; 
  display: block;
  border-radius: 100%;
  background: #c8ff00;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 6px 0px #c8ff00, 0px 0px 4px 0px #c8ff00 inset, 0px 0px 2px 1px #FF43C1;
}

 
 .dot-1 {
   --rotatation: 0deg;
   --speed: 14s;
   --size: 6px;
   --starting-x: 30px;
   --starting-y: 20px;
   top: 2px;
   left: -16px;
   opacity: 0.7;
 }
 
 .dot-2 {
   --rotatation: 122deg;
   --speed: 16s;
   --size: 3px;
   --starting-x: 40px;
   --starting-y: 10px;
   top: 1px;
   left: 0px;
   opacity: 0.7;
 }
 
 .dot-3 {
   --rotatation: 39deg;
   --speed: 20s;
   --size: 4px;
   --starting-x: -10px;
   --starting-y: 20px;
   top: -8px;
   right: 14px;
 }
 
 .dot-4 {
   --rotatation: 220deg;
   --speed: 18s;
   --size: 2px;
   --starting-x: -30px;
   --starting-y: -5px;
   bottom: 4px;
   right: -14px;
   opacity: 0.9;
 }
 
 .dot-5 {
   --rotatation: 190deg;
   --speed: 22s;
   --size: 5px;
   --starting-x: -40px;
   --starting-y: -20px;
   bottom: -6px;
   right: -3px;
 }
 
 .dot-6 {
   --rotatation: 20deg;
   --speed: 15s;
   --size: 4px;
   --starting-x: 12px;
   --starting-y: -18px;
   bottom: -12px;
   left: 30px;
   opacity: 0.7;
 }
 
 .dot-7 {
   --rotatation: 300deg;
   --speed: 19s;
   --size: 3px;
   --starting-x: 6px;
   --starting-y: -20px;
   bottom: -16px;
   left: 44px;
 }

 @-webkit-keyframes dimFirefly {
  0% {
      -webkit-opacity: 1;
  }
  25% {
      -webkit-opacity: 0.4;
  }
  50% {
      -webkit-opacity: 0.8;
  }
  75% {
      -webkit-opacity: 0.5;
  }
  100% {
      -webkit-opacity: 1;
  }
}
 
 @keyframes dimFirefly {
   0% {
     opacity: 1;
   }
   25% {
     opacity: 0.4;
   }
   50% {
     opacity: 0.8;
   }
   75% {
     opacity: 0.5;
   }
   100% {
     opacity: 1;
   }
 }

  @-webkit-keyframes hoverFirefly {
    0% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
    }
    12% {
        -webkit-transform: translate(3px, 1px);
        -ms-transform: translate(3px, 1px);
    }
    24% {
        -webkit-transform: translate(-2px, 3px);
        -ms-transform: translate(-2px, 3px);
    }
    37% {
        -webkit-transform: translate(2px, -2px);
        -ms-transform: translate(2px, -2px);
    }
    55% {
        -webkit-transform: translate(-1px, 0);
        -ms-transform: translate(-1px, 0);
    }
    74% {
        -webkit-transform: translate(0, 2px);
        -ms-transform: translate(0, 2px);
    }
    88% {
        -webkit-transform: translate(-3px, -1px);
        -ms-transform: translate(-3px, -1px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
    }
}
 
 @keyframes hoverFirefly {
     0% {
       transform: translate(0, 0);
     }
     12% {
       transform: translate(3px, 1px);
     }
     24% {
       transform: translate(-2px, 3px);
     }
     37% {
       transform: translate(2px, -2px);
     }
     55% {
       transform: translate(-1px, 0);
     }
     74% {
       transform: translate(0, 2px);
     }
     88% {
       transform: translate(-3px, -1px);
     }
     100% {
       transform: translate(0, 0);
     }
 }


 
  /*
  * SPARK ANIMATION
  */

 .spark {
     position: absolute;
     inset: 0;
     border-radius: 100px;
     rotate: 0deg;
     overflow: hidden;
     -webkit-mask: linear-gradient(white, transparent 50%);
             mask: linear-gradient(white, transparent 50%);
     /* -webkit-animation: flip calc(var(--spark) * 2) infinite steps(2, end);
             animation: flip calc(var(--spark) * 2) infinite steps(2, end); */
      -webkit-animation-name: flip;
      -webkit-animation-duration: calc(var(--spark) * 2);
      -webkit-animation-timing-function: steps(2, end);
      -webkit-animation-iteration-count: infinite;
      animation-name: flip;
      animation-duration: calc(var(--spark) * 2);
      animation-timing-function: steps(2, end);
      animation-iteration-count: infinite;

 }

 @-webkit-keyframes flip {
  to {
      -webkit-rotate: 360deg;
  }
}
 
 @keyframes flip {
     to {
         rotate: 360deg;
     }
 }

 
 .spark:before {
     content: "";
     position: absolute;
     width: 200%;
     aspect-ratio: 1;
     top: 0%;
     left: 50%;
     z-index: -1;
     -webkit-translate: -50% -15%;
     translate: -50% -15%;
     rotate: 0;
     -webkit-transform: rotate(-90deg);
     transform: rotate(-90deg);
     opacity: calc((var(--active)) + 0.4);
     background: conic-gradient(
         from 0deg,
         transparent 0 340deg,
         white 360deg
     );
     transition: opacity var(--transition);
     animation: rotate var(--spark) linear infinite both;
     /* -webkit-animation-name: rotate;
     -webkit-animation-duration: var(--spark);
     -webkit-animation-timing-function: linear;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-fill-mode: both;
      animation-name: rotate;
      animation-duration: var(--spark);
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-fill-mode: both; */
 }
            
 
 .spark:after {
     content: "";
     position: absolute;
     inset: var(--cut);
     border-radius: 100px;
 }
 
 .backdrop {
     position: absolute;
     inset: var(--cut);
     background: var(--bg);
     border-radius: 100px;
     transition: background var(--transition) opacity var(--transition);
 }
 

 @-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
  }
}
 
 @keyframes rotate {
     to {
         transform: rotate(90deg);
     }
 }


 

  /*
  * TEXT ON THE MAIN BUTTON
  */

 .text {
     translate: 2% -6%;
     letter-spacing: 0.01ch;
     color: #BF7545;
     /* font-weight: bold; */
     font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
 }
  
 .wake-text {
  translate: 2% -6%;
  letter-spacing: 0.01ch;
  font-size: 1.5em;
  color: #BF7545;
  text-transform: uppercase;
  /* font-weight: bold; */
  font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
}

 .text-cool {
    translate: 2% -6%;
    letter-spacing: 0.01ch;
    color: #FFF;
    /* font-weight: bold; */
    font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif; 
}

.text-contact {
  translate: 2% -6%;
  letter-spacing: 0.01ch;
  color: #C8FF00;
  /* font-weight: bold; */
  font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
}

.text-rec {
  translate: 2% -6%;
  letter-spacing: 0.01ch;
  color: #45454A;
  font-weight: bold;
  font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
}


 /*
  * INTRODUCTION PAGE
  */

.skip {
  cursor: pointer;
  text-transform: uppercase;
  font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
}

.bi-fast-forward-fill {
  font-size: 1em;
}

#menu {
  visibility: hidden;
}

#canvasDiv {
   display: none;
}

/* .blur {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 2;
} */


  /*
  * FLY IN INTRODUCTION
  */
#fly-in {
  font-size: 4em;
  margin: 5vh auto;
  /* height: 20vh;  */
  text-transform: uppercase;
}

#fly-in span {
  display: block;
  font-size: .4em;
  opacity: .8;
  font-family: 'Manrope-Medium', sans-serif;
}

#fly-in div {
 position: fixed;
  margin: 2vh 0;
  opacity: 0;
  left: 10vw;
  width: 80vw;
  animation: switch 48s linear;
  font-family: 'Switzer-Bold', Helvetica, Arial, sans-serif;
}

#fly-in em {
  font-style: normal;
  font-family: 'Beer-Goggles', 'Switzer-Bold';
}

/* .paused{
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused; 
  animation-play-state:paused;
} */

/* #fly-in button {
  position: fixed;
   margin: 2vh 0;
   opacity: 0;
   left: 10vw;
   width: 80vw;
   animation: animationLast 48s linear;
 } */

#fly-in div:nth-child(2) { animation-delay: 7s} /*Has-Now*/
#fly-in div:nth-child(3) { animation-delay: 14s} /*The Entity...*/
#fly-in div:nth-child(4) { animation-delay: 20s} /*Solving*/
#fly-in div:nth-child(5) { animation-delay: 27s}
#fly-in div:nth-child(6) { animation-delay: 34s} /*comment this again next season*/
/* #fly-in div:nth-child(7) { animation-delay: 40s} */
/* #fly-in div:nth-child(7) { animation-delay: 24s}
#fly-in div:nth-child(8) { animation-delay: 28s} */

@keyframes switch {
    0% { opacity: 0;filter: blur(20px); transform:scale(12)}
    3% { opacity: 1;filter: blur(0); transform:scale(1)}
    10% { opacity: 1;filter: blur(0); transform:scale(.9)}
    13% { opacity: 0;filter: blur(10px); transform:scale(.1)}
    80% { opacity: 0}
    100% { opacity: 0}
}

/* @keyframes animationLast { 
  0% { opacity: 1;filter: blur(20px); transform:scale(12)}
  3% { opacity: 1;filter: blur(0); transform:scale(1)}
  10% { opacity: 1;filter: blur(0); transform:scale(.9)}
  13% { opacity: 1;filter: blur(10px); transform:scale(.1)}
  80% { opacity: 1}
  100% { opacity: 1}
} */

/* makes the canvas responsive */
canvas {
  width: 100%;
  max-width: max-content;
  margin-bottom: 70px; /* might have to change this to 20px */
  position: relative;
  z-index: 2;
}

.cookieBanner {
  position: fixed;
  bottom: 20px;
  right: 30px;
  width: 395px;
  z-index: 10;
  display: none;
}

.cookieBanner button {
    font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
}

 .cookieBanner em {
  font-style: normal;
  font-family: 'Beer-Goggles', 'Switzer-Semibold';
}

.alert-success {
    --bs-alert-color: #BF7545;
    --bs-alert-bg: #F1F1F1;
    --bs-alert-border-color: #BF7545
    /* --bs-alert-link-color: var(--bs-success-text-emphasis); */
}

.alert-heading {
    font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
}

.alert-success p {
    font-family: 'Manrope-Medium', sans-serif;
}

.alert-link {
    color: #BF7545;
}


/* ABOUT US PLAY BUTTONS */
.play-button {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    /* background-color: #0d6efd; */
     color: #BF7545;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    transition: all 0.2s ease;
    display: none;
}

.playButtonText {
  display: none;
}

.playButtonText h3 {
  font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
}

.playButtonText h5 {
  font-family: 'Manrope-Medium', sans-serif;
}

.btn-outline-light {
  background-color: transparent;
  border-color: #BF7545;
  border-width: thick;

}

.play-button:hover {
    transform: scale(1.1);
    background-color: #C8FF00;
    border-color: #BF7545;
    color: #BF7545;
    --bs-btn-active-border-color: #BF7545;
    --bs-btn-active-color: #BF7545;
}


/* SPECILISATIONS PLAY BUTTONS */
.play-button-specialise {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    /* background-color: #0d6efd; */
     color: #3660EC;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    transition: all 0.2s ease;
    display: none;
}


.btn-outline-info {
  background-color: transparent;
  border-color: #3660EC;
  border-width: thick;

}

.play-button-specialise:hover {
    transform: scale(1.1);
    background-color: #08CEF8;
    border-color: #3660EC;
    color: #3660EC;
    --bs-btn-active-border-color: #3660EC;
    --bs-btn-active-color: #3660EC;
}

/* .fade {
  position: relative;
  width: 100%;
  min-height: 30vh;
  top: -2px;
  background-image: linear-gradient(0deg, transparent, black 75%);
  z-index: 1;
} */

.star-wars {
  display: flex;
  justify-content: center;
  position: relative; 
  height: 50px; /* change the height to */
  /* color: #feda4a; */
   font-family: 'Manrope-Medium', sans-serif;
  font-size: 500%;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 150%;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  position: relative;
   top: 9999px; 
  transform-origin: 50% 100%;
  animation: crawl 70s forwards;
}

.crawl > .title {
  text-align: center;
}

.crawl > .title h1 {
  font-size: 90%;
  margin: 0 0 100px;
  text-transform: uppercase;
  font-family: 'Switzer-Bold', Helvetica, Arial, sans-serif;
  font-weight: 600;
}

.crawl > .title p {
    font-size: 80%;
}


.crawl > .button-row {
  margin-top: 1500px;
}

.crawl > .title em {
  font-style: normal;
  font-family: 'Beer-Goggles', 'Switzer-Semibold';
}
 

@keyframes crawl {
	0% {
    top: -100px;
    transform: rotateX(20deg)  translateZ(0);
  }
	100% { 
    top: -6000px;
    transform: rotateX(25deg) translateZ(-2500px);
  }
}


/* MISSIONS COMPLETED */

@keyframes dangling {
  0%, 100% {
    transform: rotate3d(0,1,0,0deg);
    rotate: 0;
  }
  30% {
    rotate: -3deg;
  }
  50% {
    transform: rotate3d(0,1,0,5deg);
  }
}

.impossible{
  font-size: 1vmin;
  width: 90em;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  border-radius: 50% 50% 0 0;
  background:
    /* floor */
    radial-gradient(100% 100% at 56% 100%, #fff0 75%, #F2EBD7 0),
    repeating-linear-gradient(-25deg, #0000 0 9.75%, #D2042D 0 10%) 100% 100% / 86% 80%,
    repeating-linear-gradient(25deg, #0000 0 9.75%, #D2042D 0 10%) 100% 50% / 80% 86%,
    radial-gradient(45% 25% at 50% 70%, #ccc4 99%, #ccc0 0),#f000;
    background-repeat: no-repeat;
}
  
  .impossible::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 63em;
    height: 63em;
    transform: skewY(25deg);
    /* background: */
      /* monitor cheating :P */
      /* linear-gradient(-85deg, #0000 20%, #ba9 0 80%, #0000 0) 44% 46% / 10% 20%,
      linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 46% 44% / 10% 20%,
      linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 45.5% 44.5% / 10% 20%,
      linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 45% 45% / 10% 20%,
      linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 44.5% 45.5% / 10% 20%,
      
      linear-gradient(#dcb 0 0) 48% 27% / 35% 30%,
      linear-gradient(#edc 0 0) 50% 25% / 35% 30%,
      linear-gradient(#edc 0 0) 49.5% 25.5% / 35% 30%,
      linear-gradient(#edc 0 0) 49% 26% / 35% 30%,
      linear-gradient(#edc 0 0) 48.5% 26.5% / 35% 30%,
      
      linear-gradient(-45deg, #0000 22%, #a98 0 78%, #0000 0) 18.5em calc(100% - 25em) / 19em 6em,
      linear-gradient(-45deg, #0000 22%, #987 0 78%, #0000 0) 18.5em calc(100% - 24.5em) / 19em 6em, */
      
      /* table back */
      /* linear-gradient(#445 0 0) 4em calc(100% - 4em) / 40em 20em,
      linear-gradient(#445 0 0) 4em calc(100% - 2em) / 2em 2.5em,
      linear-gradient(#445 0 0) 42em calc(100% - 2em) / 2em 2.5em,
 */
      /* table side */
      /* linear-gradient(-45deg, #0000 35%, #334 0 66.6%, #0000 0) 43.9em calc(100% - 4em) / 20em 40em,
      linear-gradient(-45deg, #0000 25%, #334 0 66.6%, #0000 0) 6em calc(100% - 2em) / 2em 5em,
      linear-gradient(-45deg, #0000 25%, #334 0 66.6%, #0000 0) 43.9em calc(100% - 2em) / 2em 6em,
      linear-gradient(-45deg, #0000 25%, #334 0 66.6%, #0000 0) 60.9em calc(100% - 19.5em) / 2.1em 6em,
      linear-gradient(#223 0 0) calc(100% - 2em) calc(100% - 19.5em) / 2em 3em, */
      /* table top */
     /* linear-gradient(-45deg, #0000 24.1%, #556 0 75.6%, #0000 0) 4em calc(100% - 23.9em) / 59em 19.1em, */

      /* table shadow */
      /* linear-gradient(-45deg, #0000 23%, #ccc4 0 63.5%, #0000 0) 0em 100% / 65em 35em,#f000; */
    /* background-repeat: no-repeat; */
  }
  
  .impossible::after {
    --skin: #c77844;
    --hair: #000;
    content: "";
    width: 80%;
    height: 60%;
    position: absolute;
    top: 5%;
    left: 37%;
    transform: skewY(-20deg);
    animation: dangling 3s alternate infinite;
    transform-origin: 52% 0;
    background: 
      /* rope */
      repeating-linear-gradient(45deg, #ddd 0 2%, #ccc 0 2.5%) 52% 0 / 1% 56% no-repeat,
      /* belt */
      radial-gradient(70% 100% at 10% 55%, #0000 49%, #ccc 0 60%, #0000 0) 55% 65.3% / 10% 16.8%,
      /* expression */
      radial-gradient(circle at 25% 56%, #000 0.5em, #0000 0),
      radial-gradient(circle at 20% 56%, #000 0.5em, #0000 0),
      linear-gradient(to top right, #0000 50%, var(--skin) 0) 22% 58% / 3% 10%,
      conic-gradient(at 0 100%, #0000 10deg, #f003 0 80deg, #0000 0) 22% 59% / 3% 8%,
      radial-gradient(farthest-side at 50% 100%, #a00 120%, #0000 0) 24% 64% / 3% 2%,
      /* face */
      /* ear */
      radial-gradient(8% 15% at 31% 60%, var(--skin) 25%, #0000 0),
      /* top hair */
      radial-gradient(39% 60% at 45% 0, var(--hair) 23%, #0000 0) -16% 82% / 65% 48%, 
      radial-gradient(15% 40% at 31% 52%, var(--hair) 25%, #0000 0),
/*       conic-gradient(at 0 0, #0000 100deg, var(--hair) 0 140deg, #0000 0) 16.25% 45.25% / 10% 10%, */
/*       conic-gradient(at 0 100%, #0000 30deg, var(--hair) 0 110deg, #0000 0) 28% 49% / 7% 7%, */
      radial-gradient(farthest-side, var(--hair) 24%, #0000 0) -20% 40% / 65% 40%,
      /* face shape */
      radial-gradient(50% 100% at 25% 55%, var(--skin) 13%, #0000 0),
      radial-gradient(farthest-side at 60% 0, var(--skin) 99%, #0000 0) 20% 54% / 10% 20%,
      /* hair back */
      radial-gradient(50% 80% at 23% 50%, var(--hair) 13%, #0000 0),
      /* headset */
      radial-gradient(60% 50% at 20.5% 67%, #000 2%, #0000 0),
      radial-gradient(farthest-side at 100% 50%, #0000 80%, #ccc 0 99%, #0000) 17% 63% / 4% 12%,
      /* neck */
      radial-gradient(farthest-side at 50% 50%, #f004 99%, #0000 0) 27% 63.4% / 8% 8%,
      radial-gradient(farthest-side at 50% 50%, var(--skin) 99%, #0000 0) 27% 63.4% / 8% 8%,
      /* arm */
      radial-gradient(farthest-side at 55% 50%, #222 99%, #0000) 14.5% 95.5% / 10% 8%,
      radial-gradient(farthest-side at 50% 100%, #222 99%, #0000) 35% 74% / 8% 13%,
      radial-gradient(farthest-side at 50% 30%, var(--skin) 99%, #0000) 35.25% 94% / 7% 20%,
      radial-gradient(farthest-side at 60% 50%, var(--skin) 99%, #0000) 25.25% 95% / 17% 7%,
      /* chest */
      radial-gradient(farthest-side at 50% 40%, #666 99%, #0000) 38% 68% / 28% 19%,
      /* butt!!! butts everywhere!!! */
      radial-gradient(farthest-side at 50% 80%, #000 99%, #0000) 58% 63.4% / 18% 13%,
      radial-gradient(farthest-side at 50% 80%, #222 99%, #0000) 56% 62% / 18% 13%,
      radial-gradient(farthest-side at 50% 50%, #000 99%, #0000) 57% 67% / 20% 13%,
      /* leg 1 */
      radial-gradient(farthest-side at 50% 80%, #000 99%, #0000) 77% 67% / 30% 12%,
      radial-gradient(50% 80% at 70% 55%, #000 99%, #0000) 82.5% 60% / 7% 24%,
      /* shoe 1 */
      linear-gradient(#333 0 0) 90.5% 37% / 15.5% 2%,
      radial-gradient(60% 50% at 0% -10%, #ccc 99%, #0000) 100% 47.7% / 20% 20%,
      radial-gradient(60% 50% at 100% -10%, #ccc 99%, #0000) 79% 47.7% / 7% 20%,
      /* leg 2 */
      radial-gradient(60% 80% at 50% 80%, #222 99%, #0000) 70% 60% / 25% 7%,
      conic-gradient(at 90% -50%, #0000 196deg, #222 0 216deg, #0000 0) 90% 60% / 35% 22%,
      /* shoe 2 */
      linear-gradient(#555 0 0) 95% 38% / 15.5% 2%,
      radial-gradient(60% 50% at 0% -10%, #ddd 99%, #0000) 105% 49% / 20% 20%,
      radial-gradient(60% 50% at 100% -10%, #ddd 99%, #0000) 85% 49% / 7% 20%,
      /* arm 2 */
           
      radial-gradient(farthest-side at 50% 55%, #222 99%, #0000) 16.25% 58% / 7% 12%,
      radial-gradient(farthest-side at 50% 45%, var(--skin) 99%, #0000) 16.5% 80.25% / 5.5% 24%,
 linear-gradient(-65deg, #f000 55%, #222 0 80%, #f000 0) 25% 68% / 30% 10%,
      radial-gradient(farthest-side at 100% 100%, #0000 80%, var(--skin) 0 99%, #0000 0) 24% 77% / 23% 25%,
      radial-gradient(farthest-side at 0% 0%, #0000 80%, var(--skin) 0 99%, #0000 0) 21% 79% / 12% 30%,
      #f000;
    background-repeat: no-repeat;
    mask:linear-gradient(#0000, #000 10%);
    -webkit-mask:linear-gradient(#0000, #000 10%);
  }

/* input {
  opacity: 0;
} */

label {
  cursor: pointer;
}

/* body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  font-family: 'Roboto';
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.folder {
  position: relative;
  width: 150px;
  height: calc(150px / 100 * 75);
  font-family: 'Switzer-Bold', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  perspective: 750px;
  color: #111;
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  margin-left: 500px;
  margin-bottom: 100px;
}

.folder span::before, .folder span::after, .folder::before, .folder::after {
  position: absolute;
  content: "";
  border-radius: calc(150px / 100 * 5);
}

.folder::before {
  width: 100%;
  height: 92%;
  bottom: 0;
  background-color: #cca352;
}

.folder span::after {
  width: 90%;
  height: 85%;
  bottom: 0;
  left: 5%;
  background-color: #fff;
  z-index: 2;
  transition: transform 250ms ease 0ms;
  transform: translate3d(0px, 0px, 0px);
}

.folder span::before {
  background-color: #ffcc66;
  width: 100%;
  height: 92%;
  bottom: 0;
  left: 0;
  z-index: 3;
  content: "Missions \a" 'Completed';
  white-space: pre;
  transition: transform 500ms ease 0ms;
  transform-origin: 0 100% 0;
  outline: 1px solid transparent;
  /* Firefox anti-aliasing hack */
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder::after {
  top: 0;
  left: 0;
  width: 40%;
  height: 50%;
  background-color: #cca352;
  z-index: 1;
}

.folder input:checked + span::before {
  transform: rotateX(-35deg);
}




/* TERMINAL STYLING */

    .terminal {
    background-color: var(--terminal-bg-color);
    border: 2px solid var(--terminal-border-color);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    width: 90vw; /* Responsive width */
    max-width: 900px;
    height: 50vh; /* Responsive height */
    max-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    font-family: 'Consolas', 'Monaco', monospace; /* Monospace for terminal text */
    font-size: 0.9rem; /* Slightly smaller font for terminal */
    white-space: pre-wrap;
    line-height: 1.9;
    }

     .window-title {
       background-color: var(--terminal-bg-color);
       box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
       border-bottom: 2px solid var(--terminal-border-color);
       margin-bottom: 20px;
       font-size: 1.2em;
    } 

    /* Glitch Effect */
    .glitch-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.1s ease-out;
    }

    .glitch-active .glitch-overlay {
        animation: glitch-anim 0.5s infinite alternate;
    }

    @keyframes glitch-anim {
        0% {
            transform: translate(0, 0);
            opacity: 0.1;
            filter: hue-rotate(0deg);
        }
        20% {
            transform: translate(-2px, 2px);
            opacity: 0.2;
            filter: hue-rotate(90deg);
        }
        40% {
            transform: translate(2px, -2px);
            opacity: 0.1;
            filter: hue-rotate(180deg);
        }
        60% {
            transform: translate(-1px, 1px);
            opacity: 0.2;
            filter: hue-rotate(270deg);
        }
        80% {
            transform: translate(1px, -1px);
            opacity: 0.1;
            filter: hue-rotate(360deg);
        }
        100% {
            transform: translate(0, 0);
            opacity: 0;
            filter: hue-rotate(0deg);
        }
    }

      /* Additional Glitch Types */
        .glitch-scanline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                to bottom,
                transparent 0%,
                rgba(0, 255, 0, 0.1) 1px,
                transparent 2px,
                transparent 4px
            );
            animation: scanline-anim 0.3s infinite steps(1);
        }

        @keyframes scanline-anim {
            from { background-position: 0 0; }
            to { background-position: 0 100%; }
        }

        .glitch-rgb-split {
            animation: rgb-split-anim 0.2s infinite alternate;
        }

        @keyframes rgb-split-anim {
            0% { text-shadow: 1px 0 red, -1px 0 blue; }
            50% { text-shadow: -1px 0 green, 1px 0 yellow; }
            100% { text-shadow: 0 1px cyan, 0 -1px magenta; }
        }

   /* ASSIGN MISSION TERMINAL BUTTON */

    
  #assignMission {
    display:none;
  }

  .btn-outline-secondary {
    width: 200px;
    background: transparent;
    border: 2px solid rgb(200, 255, 0);
    border-radius: 8px;
    --bs-btn-color: rgb(200, 255, 0);
    --bs-btn-hover-bg: var(--ui-green-dim);
    --bs-btn-hover-border-color: var(--ui-green-dim);
    --bs-btn-hover-color: rgb(200, 255, 0);
    --bs-btn-active-color: #1d1d1d;
    --bs-btn-active-bg: var(--ui-green);
    --bs-btn-active-border-color: var(--ui-green);
  }



 /* MODAL STYLING */

  .cookie-policy-modal .modal {
  --bs-modal-border-color:  #BF7545;
  --bs-modal-header-border-color: #BF7545;
  --bs-modal-footer-border-color: #BF7545;
  z-index: 999999;
 }

 .btn-light {
     color: #BF7545;
     background: #C8FF00;
     --bs-btn-border-color: #BF7545;
    --bs-btn-hover-bg: #BF7545;
    --bs-btn-hover-color: #C8FF00;
    --bs-btn-active-color: #C8FF00;
    --bs-btn-active-bg: #7B3E11;
 }



   .access-denied .modal {
      --bs-modal-bg: #E84500;
        color: #fff;
      --bs-modal-border-color: #842029;
      --bs-modal-header-border-color: #842029;
      --bs-modal-footer-border-color:  #842029;
  } 

  .modal-header h5 {
      font-family: 'Switzer-Bold', Helvetica, Arial, sans-serif;
      text-transform: uppercase;
  }

   .modal-body {
    font-family: 'Manrope-Regular', sans-serif;
  }

  .modal-footer button {
    font-family: 'Manrope-Regular', sans-serif;
    word-spacing: 0.3em;
  }


  .btn-warning a {
     color: #842029;
     text-decoration: none;
  }

  .btn-warning a:active {
    color: #ffc107;
  }

  .btn-warning {
      background: #ffc107;
      --bs-btn-color: #842029;
      /* --bs-btn-border-color: #842029; */
      --bs-btn-hover-border-color: #842029;
      --bs-btn-hover-color: #842029;
      --bs-btn-active-bg: #842029;
      --bs-btn-active-color: #ffc107;
      /* --bs-btn-hover-bg: #842029; */
  }


    .access-denied .fade.show {
     animation: flash 0.5s infinite alternate;
    }

    @keyframes flash {
        from {
          background-color: rgba(255,0,0,.5); 
        }
        to { 
          background-color: rgba(139,0,0,.5);
         }
    }

 .assign-mission-modal .modal {
  --bs-modal-bg: #45454A;
  --bs-modal-border-color:  rgb(200, 255, 0);
  --bs-modal-header-border-color:  rgb(200, 255, 0);
  --bs-modal-footer-border-color:  rgb(200, 255, 0);
 }

  .assign-mission-modal .btn-close{
  --bs-btn-close-color:  rgb(200, 255, 0);
  color: rgb(200, 255, 0);
 }

  .modal-header em {
  font-style: normal;
  font-family: 'Beer-Goggles', 'Switzer-Semibold';
  padding-right: 3px;
}

/*POPOVER STYLING */
.popover {
  --bs-popover-bg:#45454A;
  --bs-popover-header-bg: #45454A;
  --bs-popover-header-color: rgb(200, 255, 0);
  --bs-popover-body-color:  rgb(200, 255, 0);
  --bs-popover-border-color: rgb(200, 255, 0);
}


 /*
  * MEDIA QUERIES
 */

  /* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
   .assign-mission-modal .modal.show .modal-dialog {   
    margin-top: 4.375rem;
}

 }

 @media (max-width: 1200px) { 
  /* .myrow {
    width: 22%;
    margin: auto;
  } */

  .playButtonText h5 {
   font-size: 1.2em;
  }


  canvas {
   width: 100%;
   max-width: max-content;
   margin-bottom: 255px;
}

/* canvas {
  width: 100%;
  max-width: max-content;
  margin-bottom: 250px;
} */

 .wake-qassandra {
   bottom: 550px;
   display: none;
 }


  /* .top {
   position: absolute;
   bottom: 200px;
 } */

   .star-wars {
  display: flex;
  justify-content: center;
  position: relative; /* I just changed this to absolute for mobile; */
  height: 10px; /* change the height to */
  /* color: #feda4a; */
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 300%;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 150%;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  position: relative;
  margin-top:-30px;
   /* top: 9999px;  */
  transform-origin: 50% 100%;
  animation: crawl 190s forwards;
}

.crawl > .title {
  text-align: center;
}

.crawl > .title h1 {
  font-size: 137%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Switzer-Bold', Helvetica, Arial, sans-serif;
}

.crawl > .title p {
    font-size: 145%;
}

.impossible::after {
 left: 27%;
}

.folder {
margin-left: 187px;
}

.centre-modal {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}

}


@media screen 
  and (device-width: 1024px) 
  and (device-height: 600px) {

    canvas {
      width: 65%;
      max-width: max-content;
      margin-bottom: 10px;
  }

  .wake-qassandra {
    bottom: 200px;
    display: none;
}

#fly-in {
  font-size: 2.5em;
  margin: 5vh auto;
  text-transform: uppercase;
}

   .star-wars {
  display: flex;
  justify-content: center;
  position: relative; /* I just changed this to absolute for mobile; */
  height: 10px; /* change the height to */
  /* color: #feda4a; */
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 300%;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 150%;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  position: relative;
  margin-top:100px;
   /* top: 9999px;  */
  transform-origin: 50% 100%;
  animation: crawl 190s forwards;
}

.crawl > .title {
  text-align: center;
}

.crawl > .title h1 {
  font-size: 137%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Switzer-Bold', Helvetica, Arial, sans-serif;
}

.crawl > .title p {
    font-size: 145%;
}
  

}


 /* Medium devices (tablets, less than 992px) */
 @media (max-width: 992px) { 
  /* .myrow {
    width: 22%;
    margin: auto;
  } */

   
  canvas {
   width: 100%;
   max-width: max-content;
   margin-bottom: 200px;
}

/* canvas {
  width: 100%;
  max-width: max-content;
  margin-bottom: 250px;
} */

 .wake-qassandra {
   bottom: 550px;
   display: none;
 }

  /* .top {
   position: absolute;
   bottom: 200px;
 } */

  .star-wars {
  display: flex;
  justify-content: center;
  position: relative; /* I just changed this to absolute for mobile; */
  height: 10px; /* change the height to */
  /* color: #feda4a; */
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 300%;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 150%;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  position: relative;
  margin-top:-50px;
   /* top: 9999px;  */
  transform-origin: 50% 100%;
  animation: crawl 190s forwards;
}

.crawl > .title {
  text-align: center;
}

.crawl > .title h1 {
  font-size: 137%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Switzer-Bold', Helvetica, Arial, sans-serif;
}

.crawl > .title p {
    font-size: 145%;
}

/* .centre-modal {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
} */
  
}



  /* Small devices (landscape phones, less than 768px) */
 @media (max-width: 768px) { 
   /* .myrow {
     width: 22%;
     margin: auto;
   } */

   canvas {
    width: 100%;
    max-width: max-content;
    margin-bottom: 120px;
}

.folder {
  margin-left: 90px;
}


  .wake-qassandra {
    bottom: 420px;
    display: none;
  }

   /* .top {
    position: absolute;
    bottom: 200px;
  } */

 }

  /* EXTRA SMALL DEVICES */
@media (max-width: 576px) { 
  .myrow {
    width: 27%;
    margin: auto;
  }

  .playButtonText h5 {
    font-size: 1em;
  }

  .wake-qassandra {
    bottom: 350px;
    display: none;
  }

  .top {
   position: absolute;
   bottom: 410px;
 }

  .mission-completed-top {
  position: absolute;
  bottom: 150px;
}

 .top-contact {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: -100px;
}

.centre-modal {
    display: flex;
    align-items: flex-start;
}


  /* .specialisation-top {
   position: absolute;
   bottom: 410px;
 } */

 .blur {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: absolute;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
}

  /* .menu {
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   position: relative;
   padding-top: 200px;
   z-index: 2; 
  } */

  canvas {
    width: 100%;
    max-width: max-content;
    margin-bottom: -30px;
  }

   .menu {
    display: flex;
    margin-bottom: 40px;
  }


   #fly-in {
   font-size: 2.5em;
   margin: 5vh auto;
   /* height: 20vh;  */
   text-transform: uppercase;
 }

 #fly-in div {
   position: fixed;
    margin: 2vh 0;
    opacity: 0;
    margin-top: 250px;
    left: 10vw;
    width: 80vw;
    animation: switch 48s linear;
    font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
  }
  

 #fly-in span {
   display: block;
   font-size: .4em;
   opacity: .8;
   font-family: 'Manrope-Medium', sans-serif;
 }

 /* .logos {
   width: 150px;
   height: 100px;
   position: absolute;
   left: 5px;
 } */
 
 .logos {
   width: 120px;
   height: 120px;
   position: absolute;
   left: 5px;
  z-index: 10px;

 }

 .star-wars {
  display: flex;
  justify-content: center;
  position: relative; /* I just changed this to absolute for mobile; */
  height: 10px; /* change the height to */
  /* color: #feda4a; */
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 120%;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 150%;
  perspective: 400px;
  /* text-align: justify; */
}

.crawl {
  position: relative;
  margin-top:300px; /* was 200px before */ /* change this to show more text */
   /* top: 9999px;  */
  transform-origin: 50% 100%;
  animation: crawl 190s forwards;
}

.crawl > .title {
  text-align: center;
}

.crawl > .title h1 {
  font-size: 140%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Switzer-Bold', Helvetica, Arial, sans-serif;
}

.crawl > .title p {
    font-size: 120%;
}

/* .cookieBanner {
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
} */
 .cookieBanner {
    width: 92%;
    max-width: 100%;
    left: auto;
    right: auto;
    bottom: 0;
}


.folder {
  margin-left: 5px;
}

.impossible::after {
 left: 27%;
}

.impossible {
  transform: translate(-50%, -70%);
}


}



/* ----------- iPhone 15 and 16 PLUS ----------- */

@media screen 
  and (min-width: 430px) 
  and (max-height: 932px)  { 

    /* canvas {
    width: 100%;
    max-width: max-content;
    margin-bottom: 30px;
  } */

  /* .menu {
    display: flex;
    margin-bottom: 100px;
  } */

  .skip {
    padding-bottom: 50px;
  }

}


/* ----------- iPhone 15 and 16 PRO ----------- */
 
@media screen 
  and (min-width: 393px) 
  and (max-height: 852px)  { 

    /* canvas {
    width: 100%;
    max-width: max-content;
    margin-bottom: 10px;
  }

  .menu {
    display: flex;
    margin-bottom: 100px;
  } */

  .skip {
    padding-bottom: 50px;
  }

}


 /* EXTRA SMALL DEVICES */
 @media (max-width: 375px) { 
  .myrow {
    width: 30%;
    margin: auto;
  }

  .playButtonText > h3 {
   font-size: 1.2em;
  }

  .playButtonText h5 {
    font-size: 0.9em;
}

/* .mission-completed-top {
  position: absolute;
  bottom: 150px;
} */
 
 .top {
    position: absolute;
    bottom: 300px;
}

.top-contact {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: -100px;
}

.wake-qassandra {
  bottom: 300px;
  display: none;
}

/* canvas {
  width: 100%;
  max-width: max-content;
  margin-bottom: 130px;
} */

canvas {
  width: 100%;
  max-width: max-content;
  margin-bottom: -20px;
}

.folder {
  margin-left: 5px;
  width: 100px;
  height: calc(100px / 100 * 75);
  font-size: 0.7em;
}

.impossible {
  transform: translate(-50%, -60%);
}

.impossible::after {
 left: 27%;
}


 /* .menu {
    display: flex;
    margin-bottom: 40px;
  } */
   

/* .aboutus-buttons { 
  margin-bottom: 0px;
  visibility: hidden;
} */


/* canvas {
  width: 100%;
  max-width: max-content;
  margin-bottom: -20px;
} */

/* .menu {
 -webkit-backdrop-filter: blur(5px);
 backdrop-filter: blur(5px);
 position: relative;
 padding-top: 200px;
 z-index: 2; 
} */

/* .menu {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: relative;
  padding-top: 127px;
  z-index: 2;
} */

 #fly-in {
 font-size: 2.5em;
 margin: 5vh auto;
 /* height: 20vh;  */
 text-transform: uppercase;
}

#fly-in div {
 position: fixed;
  margin: 2vh 0;
  opacity: 0;
  margin-top: 250px;
  left: 10vw;
  width: 80vw;
  animation: switch 48s linear;
  font-family: 'Switzer-Semibold', Helvetica, Arial, sans-serif;
}


#fly-in span {
 display: block;
 font-size: .4em;
 opacity: .8;
 font-family: 'Manrope-Medium', sans-serif;
}

/* .logos {
 width: 150px;
 height: 100px;
 position: absolute;
 left: 5px;
} */

.logos {
 width: 120px;
 height: 120px;
 position: absolute;
 left: 5px;
}
/* 
.recorder {
  width: 50%;
} */

 /* .page-title h1 {
    font-size: 2em;
 } */

   ::-webkit-scrollbar {
     -webkit-appearance: none;
   }

.star-wars {
  display: flex;
  justify-content: center;
  position: relative; /* I just changed this to absolute for mobile; */
  height: 10px; /* change the height to */
  /* color: #feda4a; */
  font-family: 'Manrope-Regular', sans-serif;
  font-size: 120%;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 150%;
  perspective: 400px;
  /* text-align: justify; */
}

.crawl {
  position: relative;
  margin-top:150px;
   /* top: 9999px;  */
  transform-origin: 50% 100%;
  animation: crawl 190s forwards; /*try 270s*/
}

.crawl > .title {
  text-align: center;
}

.crawl > .title h1 {
  font-size: 140%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Switzer-Bold', Helvetica, Arial, sans-serif;
}

.crawl > .title p {
    font-size: 120%;
}

 .window-title {
       margin-bottom: 0px;
       /* font-size: 1.2em; */
    } 

  .modal-title span{
    display: none;
  }

}