/* ============================= */
/* ===== VARIABLES & SETUP ===== */
/* ============================= */

:root {
   --white: #fff;
   --black: #0A0A0A;
   --grey-primary: #B4B4B4;
   --grey-brigter: #C0C0C0;
   --grey-darker: #808080;
   --navy-blue: #06157F;

   --wallpaper: #008081;
}

@font-face {
   font-family: Sysfont;
   src: url('../../assets/fonts/sysfont.otf') format(opentype);
}

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: Sysfont;
}

body {
   background-color: black;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-self: center;
   overflow: auto;
   padding-bottom: 100px;
}



/* =================== */
/* ===== BUTTONS ===== */
/* =================== */

.landing-btn {
   background-color: var(--grey-brigter);
   width: 70px;
   height: 40px;
   border: none;
   outline: none;
   border-radius: 150px;
   position: relative;
   cursor: pointer;
   box-shadow: inset 0px 0px 8px var(--black);
   transition: all .25s ease;
   -webkit-tap-highlight-color: transparent;
}
.landing-btn-toggle {
   position: absolute;
   top: -9px;
   left: -9px;
   display: block;
   height: 58px;
   width: 58px;
   border-radius: 150px;
   /* background-color: var(--white); */
   background-image: url('../../assets/img/icons/landing-button-active.svg');
   background-size: cover;
   transition: all .25s ease;
}
.landing-btn-toggle.active {
   left: calc(100% - 49px);
   background-image: url('../../assets/img/icons/landing-button.svg');
}
.landing-btn:has(.landing-btn-toggle.active) {
   background-color: var(--grey-darker);
}




/* ======================== */
/* ===== LANDING PAGE ===== */
/* ======================== */

.landing-page-container {
   width: clamp(300px, 70%, 900px);
   background-size: cover;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 24px;
   margin-top: 50px;
}
.landing-page-img {
   width: 100%;
   display: block;
}
.hero-img {
   display: none;
}
.hero-visible {
   display: block;
}

.landing-links {
   margin-top: -75px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
}
.landing-link {
   color: var(--white);
   text-decoration: none;
   font-size: clamp(1.5rem, 3vw, 2.125rem);
   text-transform: capitalize;
}
.landing-link:hover {
   color: var(--grey-brigter);
}








/* --------=======================-------- */
/* -----======= MOBILE STYLES =======----- */
/* --------=======================-------- */


@media (max-width:900px) {


   /* =================== */
   /* ===== BUTTONS ===== */
   /* =================== */

   .landing-btn {
      width: 55px;
      height: 32px;
   }
   .landing-btn-toggle {
      top: -7px;
      left: -7px;
      height: 47px;
      width: 47px;
   }
   .landing-btn-toggle.active {
      left: calc(100% - 40px);
   }




   /* ======================== */
   /* ===== LANDING PAGE ===== */
   /* ======================== */
   
   .landing-page-container {
      width: 100%;
      gap: 24px;
   }
   .landing-links {
      margin-top: -50px;
   }


}


@media (max-width:525px) {

   .landing-links {
      margin-top: -20px;
   }


}