@import url('https://fonts.cdnfonts.com/css/sofia-pro');


:root {
    /** ** ** ** ** Color Schemes ** ** ** ** **/

    /** Dark Theme - Backgrounds **/

    --background : #0f0f0f;
    --background-secondary : #1E1E1E;
    --background-secondary-trans : rgba(30, 30, 30, 0.90);
    --background-tertiary : #cbcbcb;
    --black : #000000;
    --gray : #717171;
    --white : #ffffff;

    /** Dark Theme - Text and colors **/

    --text : #ffffff;
    --text2 : #ffffff;
    --nav-text : #ffffff;
    --primary : #FFBC40;
    --secondary : #F2A310;
    --tertiary : #3457CA;
    --primary-gradient : linear-gradient(120deg, #FFBC40, #F2A310);
    --announcement-banner-gradient : linear-gradient(90deg, #0d307f, #0f188d); 
    --accent-header : linear-gradient(120deg, #CA3470, #F2A310);
    --secondary-gradient : linear-gradient(135deg, #41AEFF, #4C11F3);

    --background-dark : 1;
    --background-light : 0;

    --sb-size: 4px;

    --text-size-huge : 3rem;
    --text-size-large : 2.5rem;
    --text-size-medium : 1.5rem;
    --text-size-small : 1rem;
    
}

html, body {
  height: 100%;
  overflow: hidden; /* Prevent default scrolling */
}

body {
    background: var(--background);
    font-family: 'Sofia Pro', sans-serif;
    transition: all 0.5s;
  overflow-x: hidden;
}

#body {
  overflow: auto; /* Enable scrolling for the smoother wrapper */
  height: 100%;
}

body::-webkit-scrollbar {
  width: var(--sb-size);
}

body::-webkit-scrollbar-track {
  background: var(--background-secondary);
  border-radius: 12px;
}

body::-webkit-scrollbar-thumb {
  background: var(--background-tetriary);
  border-radius: 12px;
}

@supports not selector(::-webkit-scrollbar) {
  body {
      scrollbar-color: var(--background-secondary)
                     var(--background-tetriary);
  }
}



html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: 0.2s all;
    font-family: 'Sofia Pro', sans-serif;
}

@media only screen and (max-width: 900px) {

  .nav_content > *:nth-child(n+3)  {
    display: none;
  }

  .hero{
    padding: 2em;
  }

  .main_cookies{
    display: flex !important;
    width: 400px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    justify-content: center !important;
    
  }

  .cookies_center{
    position: fixed !important;
    bottom: 0 !important;
    left: calc(50vw - 50vw) !important;
    width: 100vw !important;
    z-index: 1000000000000000000001 !important;
  }

  .about{
    flex-direction: column !important;
  }

  .about_content{
    width: 100% !important;
    padding: 2em 2em 5px 2em !important;
  }

  .about_server_details{
    width: 100% !important;
    margin: 0 !important;
    padding: 2em !important;
    flex-direction: column !important;
    table-layout: fixed   !important;
    overflow: hidden !important;
    overflow-x: scroll !important;
    overflow: hidden  !important;
    display: flex !important;
    justify-content: space-evenly !important;
    height: 100% !important;
  }

  .about_server_details > *{
    width: 100% !important;
    height: 200px !important;
    padding: 2em 0 !important;
  }

  .screenshots_main{
    margin: 2em !important;
    width: unset !important;
    padding: 0 !important;
  }

  .screenshots_frame{
    width: 100% !important;
    height: fit-content !important;
    padding: 2em !important;
    background-size: cover !important;
    background-position: center right !important;
  }

  .ss_subtitle {
    font-size: 1rem !important;
  }
  .ss_banter {
    font-size: 1.8rem !important;
  }

}


 /**
 
 Rest or something
 i dont know what i am doing at all :D 

 **/




.loader_screen{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary);
  z-index: 99900009;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}




/**Footer**/



@media (max-width: 768px) {

  .hero{
    height: 100vh;
  }

  .hero_announcement{
    padding: 1rem 1.6em !important;
  }

  .ss_button_about{
    font-size: 0.9rem !important;
    padding: 1rem 2rem !important;
    width: 100% !important;
    position: relative !important;
    text-align: center !important;
  }

  .about_content{
    padding: 2em;
  }
  
}