body { background: #000; }
html { scroll-behavior: smooth; }

:root {
  --font_xl: 2vw;  
  --font_md: 2vw;  
  --font_sm: 1.5vw;
  --font_es: 1vw;

  --bg_size: contain;

  --anim_cristal_width:  25vw; 
  --anim_cristal_height: 25vh; 
  --anim_cristal_top:    200px; 
  --anim_cristal_left:   15vw; 

  --beacon_header_height: 20vh;
  --beacon_content3_height: 18vh;

  --gap3_height: 40vh;

  --call_to_arms_height: 120vh;
  --call_to_arms_size:   80%;

  --cristal_width:  40vw;
  --cristal_height: 30vh;
  --cristal_top:    -8vh;
  --cristal_left:  -15vw;
  
  --cristal2_top:  -5vh;
  --cristal2_left: -12vw;

  --page_gap_top:    20vh; 
  --page_gap_bottom: 20vh; 

  --best_height: 100vh;
  --best_width:  100vw;

  --intro_grid_columns: 15% content 15%;
  --intro_grid_areas:   ". content .";

  --best_grid_columns: 20% 29% 2% 29% 20%;
  --best_grid_rows:    100vh;
  --best_grid_areas:   ". best_content gap best_slide .";

  --center_grid_columns: 20% auto auto 20%;
  --center_grid_areas:
      ". info1    info1    ."
      ". header   header   ."
      ". content  content  ."
      ". content2 content2 ."
      ". beacon   beacon   .";

  --core_grid_columns: 30% 25% 25% 25% auto;
  --core_grid_areas:
      ". . . . ."
      ". core_box1 . . ."
      ". . core_box2 . ."
      ". core_box3 . . ."
      "gap3 gap3 gap3 gap3 gap3"
      "core_img core_img core_img core_img core_img";

  --beacon_grid_columns: 15% 25% 20% 25% 15%;
  --beacon_grid_row_gap: 8vh;
  --beacon_grid_areas:
      "header header header header header"
      ". content  . box  ."
      ". content2 . box2 . "
      "content3 content3 content3 content3 content3";

  --call_to_arms_grid_top:  -20vh;
  --call_to_arms_grid_columns: 30% auto 30%; 
  --call_to_arms_grid_rows: auto;
  --call_to_arms_grid_areas:
      "header header header"
      ". content  ."
      ". content2 .";
  
  --clock_grid_columns: auto 4vw 2vw 4vw 2vw 4vw 2vw 4vw auto;
  --clock_grid_areas:
      ". clock_box1 clock_gap1 clock_box2 clock_gap2 clock_box3 clock_gap3 clock_box4 .";

  --best_slider_grid_columns: auto;
  --best_slider_grid_rows: auto 30vh auto;
  --best_slider_grid_areas:
      "."
      "box_slider_content"
      ".";  

  --contact_list_width: 12vw;
  --contact_list_top:   15vh;
  --contact_item_width: 10vw;
  --contact_item:       10vw;

  --link_color: white;

  --privacy_info_top:    25vh; 
  --privacy_info_bottom: 25vh; 

  --contact_bg_size: 50%;
  --logo_width: 5vw;
  --contact_item_box: auto 50vh auto;
  --contact_item_font_size: 1.5vw;

  /* PRESALE */
  --presale_logo_width: 50vw;
  --presale_logo_height: 40vh;
  --presale_block: 50vw;
  --presale_calc_grid: column;
  --calc_font_size: 3vw;
  --address_font: 60px;
  --address_size: 2.5vw;
  --address_title_size: 3vw;
  --margin_top: 10vh;
  --margin_top_xl: 20vh;
  --presale_block_font_size: 2vw;
  --presale_info_font_size: 2vw;
}

/* DESKTOP */
@media screen and (min-width: 1350px) and (max-width: 2500px){     
  :root {
    /* PRESALE */
    --presale_logo_width: 50vw;
    --presale_logo_height: 40vh;
    --presale_block: 80vw;
    --presale_calc_grid: column;
    --calc_font_size: 5vw;
    --address_font: 3vw;
    --address_size: 4vw;
    --address_title_size: 3vw;
    --margin_top: 10vh;
    --margin_top_xl: 20vh;
    --presale_block_font_size: 3.5vw;
  }
}

/* MOBILE */
@media only screen and (pointer: coarse) and (min-height: 600px) {
  :root {
    --font_xl: 8vw;
    --font_md: 5vw;  
    --font_sm: 4vw;
    --font_es: 3vw;
    
    --bg_size: 130%;

    --anim_cristal_width:  auto; 
    --anim_cristal_height: 15vh; 
    --anim_cristal_top:    100px; 
    --anim_cristal_left:   20vw; 

    --beacon_header_height: 12vh;
    --beacon_content3_height: 5vh;

    --gap3_height: 10vh;

    --call_to_arms_height: 100vh;
    --call_to_arms_size:   130%;

    --cristal_width:  50vw;
    --cristal_height: 30vh;
    --cristal_top:   -10vh;
    --cristal_left:  -5vw;
    
    --cristal2_top:  -10vh;
    --cristal2_left: -5vw;

    --page_gap_top:    5vh; 
    --page_gap_bottom: 15vh; 

    --best_height: 100vh;
    --best_width:  100vw;

    --intro_grid_columns: content;
    --intro_grid_areas:   "content";


    --best_grid_columns: 48% 4% 48%;
    --best_grid_rows:    100vh;
    --best_grid_areas:   "best_content gap best_slide";
    
    --center_grid_columns: auto auto;
    --center_grid_areas: 
        "info1    info1   "
        "header   header  "
        "content  content "
        "content2 content2"
        "beacon   beacon  ";

    --core_grid_columns:  auto 40% 40%;
    --core_grid_areas:
        ". . ."
        ". core_box1 ."
        ". . core_box2"
        ". core_box3 ."
        "gap3 gap3 gap3"
        "core_img core_img core_img";

    --beacon_grid_columns: 5% 35% 20% 35% 5%;
    --beacon_grid_row_gap: 5vh;
    --beacon_grid_areas: 
        "header header header header header"
        ". content  . box  ."
        ". content2 . box2 . "
        "content3 content3 content3 content3 content3";

    --call_to_arms_grid_top:  0px;
    --call_to_arms_grid_columns: 15% 20% auto 20% 15%; 
    --call_to_arms_grid_rows: 18% 45% auto;
    --call_to_arms_grid_areas: 
        "header  header  header   header   header"
        ". content content  content ."
        ". content2 content2 content2 ."; 

    --clock_grid_columns: auto 12vw 6vw 12vw 6vw 12vw 6vw 12vw auto;
    --clock_grid_areas:
        ". clock_box1 clock_gap1 clock_box2 clock_gap2 clock_box3 clock_gap3 clock_box4 .";
    
    --best_slider_grid_columns: auto;
    --best_slider_grid_rows: auto 18vh auto;
    --best_slider_grid_areas:
        "."
        "box_slider_content"
        ".";

    --contact_list_width: 100vw;
    --contact_list_top:   15vh;
    --contact_item:       25vw;

    --privacy_info_top:    15vh; 
    --privacy_info_bottom: 15vh; 

    --contact_bg_size: contain;
    --logo_width: 15vw;
    --contact_item_box: auto 50vh auto;
    --contact_item_font_size: 6vw;

    /* PRESALE */
    --presale_logo_width: 90vw;
    --presale_logo_height: 90vh;
    --presale_block: 100vw;
    --presale_calc_grid: column;
    --calc_font_size: 70px;
    --address_font: 4vw;
    --address_size: 2.5vh;
    --address_title_size: 5vw;
    --presale_block_font_size: 6vw;
    --margin_top: 6vh;
    --margin_top_xl: 15vh;
    --presale_info_font_size: 5vw;
  }
}

.menu {
  position: fixed;
  top: 0px;
  z-index: 100;  
}

.img_logo {
  width: var(--logo_width); 
  margin-left: 5vw; 
  padding: 1vh;
}

.best_slider_grid {
  display: grid;
  grid-template-columns: var(--best_slider_grid_columns);
  grid-template-rows:    var(--best_slider_grid_rows);
  grid-template-areas:   var(--best_slider_grid_areas);
}

.clock_grid {
  display: grid;
  grid-template-columns: var(--clock_grid_columns);
  grid-template-areas:   var(--clock_grid_areas);
  grid-template-rows:    auto;

  text-align: center;
  border: 1px solid white;
              
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.call_to_arms_grid {
  display: grid;
  row-gap: 6vh;

  /* position: sticky;
  top: var(--call_to_arms_grid_top); */

  grid-template-columns: var(--call_to_arms_grid_columns);
  grid-template-rows:    var(--call_to_arms_grid_rows);
  grid-template-areas:   var(--call_to_arms_grid_areas);

  background-color: #000;
}

.beacon_grid {
  display: grid;
  grid-template-columns: var(--beacon_grid_columns);
  grid-template-areas:   var(--beacon_grid_areas);
  row-gap:               var(--beacon_grid_row_gap);
  grid-template-rows: auto;
  background-color: #000;
}

.center_grid {
  display: grid;
  position: absolute;
  z-index: 40;

  width: 100vw;

  background-color: #000;
  grid-template-columns: var(--center_grid_columns);
  grid-template-areas:   var(--center_grid_areas);
  grid-template-rows:    auto;
}

.intro_grid {
  display: grid;
  grid-template-columns: var(--intro_grid_columns);
  grid-template-areas:   var(--intro_grid_areas);
  grid-template-rows: auto;
}  

.best_grid {
  display: grid;
  grid-template-columns: var(--best_grid_columns);
  grid-template-rows:    var(--best_grid_rows);
  grid-template-areas:   var(--best_grid_areas);
}  

.best {
  height: var(--best_height);
  width:  var(--best_width);
  position: sticky;
  top: 0vh;
}

.page_gap {
  grid-area: info1; 
  margin-top: var(--page_gap_top); 
  margin-bottom: var(--page_gap_bottom);
}

.cristal {
  width:  var(--cristal_width); 
  height: var(--cristal_height);
  
  margin-top:  var(--cristal_top); 
  margin-left: var(--cristal_left);
  position: absolute;
  z-index: 2;

  filter: blur(3px);
  background-image: url('cristal2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.cristal2 {
  width:  var(--cristal_width); 
  height: var(--cristal_height);
  
  margin-top:  var(--cristal2_top); 
  margin-left: var(--cristal2_left);
  position: absolute;
  z-index: 2;

  transform: rotate(90deg);
  
  background-image: url('cristal2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.call_to_arms {
  height: var(--call_to_arms_height);

  background-image: url('horseman.webp'), url('bg_plus.svg');
  background-size: var(--call_to_arms_size), auto;
  background-repeat: no-repeat, repeat;
  background-position: bottom, bottom;
}

.img_beacon_header {
  position: absolute; 
  object-fit: contain; 
  object-position: bottom left;
  vertical-align: bottom; 
  z-index: 30;
  height: var(--beacon_header_height);
}

.beacon_header {
  grid-area: header;
  position: relative;
  height: var(--beacon_header_height);
}

.anim_cristal {
  width:  var(--anim_cristal_width); 
  height: var(--anim_cristal_height); 
  
  object-fit: contain; 
  position:   relative; 
  
  top:  var(--anim_cristal_top);
  left: var(--anim_cristal_left);

  z-index: 20;
}

.gap3 {
  grid-area: gap3;
  height: var(--gap3_height);
}

.bg1 {
  width: 100vw;
  height: 100vh;
  
  background-image: url('./statue_sm.webp');
  background-size: var(--bg_size);
  background-repeat: no-repeat;
  background-position: center;
  
  position: sticky;
  top: 0px;
  z-index: 1;
}

.privacy_info {
  grid-area: content2;
  text-transform: uppercase;

  margin-top:    var(--privacy_info_top);
  margin-bottom: var(--privacy_info_bottom);
}

/* BEACONS */

.beacon {
  grid-area: beacon;
  min-height: 30vh;
  color: white;
  text-transform: uppercase;
}


.beacon_content  { 
  grid-area: content;  
}

.beacon_content2 { 
  grid-area: content2;
}

.beacon_content3 { 
  grid-area: content3;
  text-transform: uppercase; 
  height: var(--beacon_content3_height);
}

.beacon_box  { grid-area: box;  }
.beacon_box2 { grid-area: box2; }
.beacon_box3 { grid-area: box3; }

.beacon_love {
  background-image: url('');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.beacon_example {
  background-image: url('cristal2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(150deg);
}

.beacon_example2 {
  background-image: url('cristal1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(45deg);
}

.anim1 {
  animation: MoveDownUp 4s linear infinite;
}

.army_box {
  margin-left: auto;
  margin-right: auto;
  width: 20vw;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid #2e2e2e;

  padding: 20px;
}

@keyframes MoveDownUp {
  0%, 100% {
    bottom: 10%;
  }
  50% {
    top: 10%;
  }
}

/* CALL TO ARMS */


.arms_wrapper {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #2e2e2e;
}

.arms_header {
  grid-area: header;
  
  background-image: url('presale_header.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.arms_content {
  grid-area: content;
  font-size: 4vw;
  text-align: center;
}

.arms_content2 {
  grid-area: content2;
}

.arms_footer {
  grid-area: content3;  
}

.clock_box1  { grid-area: clock_box1; }
.clock_box2  { grid-area: clock_box2; }
.clock_box3  { grid-area: clock_box3; }
.clock_box4  { grid-area: clock_box4; }

.clock_gap1  { grid-area: clock_gap1; }
.clock_gap2  { grid-area: clock_gap2; }
.clock_gap3  { grid-area: clock_gap3; }
.clock_gap4  { grid-area: clock_gap4; }


/* CONTACT */

.contact_page {
  position: sticky;
  height: 50vh;
}


.contact_item {
  border: 1px solid white;
  width: var(--contact_item);
  text-align: center;
  padding-top: 6vh;
  font-size: var(--contact_item_font_size);
}

/* .contact_img {
  width: 50vh;
  height: 70vh;

  background-image: url('./damianu.JPG');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom left;
} */

.contact_slide {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 20vh auto;
  grid-template-areas:
    "header"
    "body";

  position: sticky;
  height: 95vh;
  top: 5vh;
}

.contact_header {
  grid-area: header;
  background-image: url('./contact_header.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.contact_body {
  grid-area: body;
  border-bottom: none;

  background-image: url('./damianu.JPG');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}

.contact_item_box {
  display: grid;
  grid-template-columns: auto 50vh auto;
  grid-template-rows: auto;
  grid-template-areas:
    ". contacts .";

  position: sticky;
  height: 20vh;
  top: 80vh;
}

.contacts {
  grid-area: contacts;
  display: flex;
}

.contact_grid {
  display: grid;
  height: 100vh;

  position: sticky;
  top: 0px;

  background-color: #000;
  grid-template-columns: 10% auto auto 20% 10%;
  grid-template-rows: auto;
  column-gap: 2vw;
  row-gap: 2vw;
  grid-template-areas:
    ". content  content  content ."
    "content2 content2 content2 box2 box2"
    "content3 content3 content3 content3 content3";

  /* background-image: url('damianu1.png'); */
  background-size: var(--contact_bg_size);
  background-repeat: no-repeat;
  background-position: bottom;
}

.contact_content {
  grid-area: content;
}


/* FONTS */
.roboto_bold {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
  color: white;
}

.roboto_medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: white;
}

.roboto_normal {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white;
}

.roboto_thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
  color: white;
}

.vt323 {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

.sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 00;
  font-style: normal;
}

.color_white {
  color: white;
}

.bg2 {
  grid-area: page1;

  width: 100vw;
  height: 100vh;
  
  background-image: url('./triden_logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  position: relative;
  z-index: 2;
}

.main_grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: 
    "page1"
    "page2"
    "page3"
    "page4";
}

/* -------- BEST -------- */

.best_placeholder_end {
  grid-area: box_slider_content;
}

.designed {
  background-image: url('designed.svg');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.secured {
  background-image: url('secured.svg');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.private {
  background-image: url('private.svg');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.best_ex {
  background-image: url('crypto_platform.svg');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.best_placeholder_box {
  grid-area: box_slider_content;
  border: 2px dotted #2e2e2e;
}

.top_frame {
  border: 2px solid rgb(48, 48, 48);
  border-bottom: none;
  height: 1vh;
}

.bottom_frame {
  border: 2px solid rgb(48, 48, 48);
  border-top: none;
  height: 1vh;
}


/* INTRO */

.intro_content {
  grid-area: content;

  background-image: url('triden_main.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --------- */
/* END INTRO */
/* --------- */

.gap {
  grid-area: gap;
}

.best_placeholder {
  grid-area: best_placeholder;
  margin-top: 3vh;
  height: 20vh;
}

.best_bg {
  background-image: url('the_best1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.best_content {
  grid-area: best_content;
  
  background-image: url('the_best2.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.best_slide {
  grid-area: best_slide;
}

/* ---------------------- */


.contact_footer_grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-template-rows: 100vh;
  grid-template-areas: 
    "";

  color: aliceblue;
}

.word_link {
  text-align: center; 
  background-color: white; 
  color: #000;
}


/* -------- core ------- */

.core_header {
  grid-area: header;
  height: 30vh;
  background-image: url('./core.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position:bottom left;
}

.core_content {
  grid-area: content;
  font-size: 1vw;
  text-wrap: wrap;
}

.core_box {
  /* border: 1px dashed #35f2e6; */
  border: 1px dashed white;
  text-transform: uppercase;
}

.core_box_header {
  border-bottom: 1px dashed white;
  padding: 1vw; 
  /* color: #35f2e6; */
  color: white;
}

.core_box_content {
  padding: 1vw;
  /* color: #14a99f; */
  color: white;
}

.core_grid {
  display: grid;
  grid-template-columns: var(--core_grid_columns);
  grid-template-areas:   var(--core_grid_areas);
  grid-template-rows: auto;
  row-gap: 5vh;

  background-image: url('./redbull_can.svg'), url('./bg_plus.svg');
  background-size: contain, auto;
  background-repeat: no-repeat, repeat;
  background-position: bottom;  
}

.core_box1 { grid-area: core_box1; }
.core_box2 { grid-area: core_box2; }
.core_box3 { grid-area: core_box3; }

/* ---------------------- */


.index10 { z-index: 10; }
.index20 { z-index: 20; }
.index30 { z-index: 30; }
.index40 { z-index: 40; }
.index50 { z-index: 50; }

.sticky1 { position: sticky; }

.bg_red    { background-color: red;     }
.bg_black  { background-color: black;   }
.bg_black2 { background-color: #4B0082; }
.bg_green  { background-color: green;   }
.bg_pink   { background-color: #FFC1CC; }
.bg_white  { background-color: white;   }

.no_bg {
  background-image: none;
}

.bg_trans {
  background-color: transparent;
}

.bg_plus {
  background-image: url('bg_plus.svg');
  background-size:auto;
  background-repeat: repeat;
  background-position: center;
}

.bg_blur_xl {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.bg_blur_lg {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bg_blur_md {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bg_blur_sm {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.border_red    { border: 2px solid red;    }
.border_yellow { border: 2px solid yellow; }
.border_green  { border: 2px solid green;  }
.border_blue   { border: 2px solid blue;   }
.border_pink   { border: 2px solid pink;   }
.border_purple { border: 2px solid purple; }
.border_white  { border: 2px solid white;  }
.no_border     { border: none; }

.border_top_white_dashed { border-top: 1px dashed white; }

.font_xl { font-size: var(--font_xl); }
.font_md { font-size: var(--font_md); }
.font_sm { font-size: var(--font_sm); }
.font_es { font-size: var(--font_es); }

.text_align_right { text-align: right; }

a:link    { color: var(--link_color); }
a:visited { color: var(--link_color); }
a:hover   { color: var(--link_color); }
a:active  { color: var(--link_color); }

a:link, a:visited { text-decoration: none; }

/* PRESALE */

.section {
  color: #fff;
  width: 100vw;  
  display: grid;
  place-items: center;
  row-gap: 1vh; 
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.caption {
  height: var(--presale_logo_height);
  width: var(--presale_logo_width);

  background-image: url('presale_logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.block {
  width: var(--presale_block);
  text-transform: uppercase;
  font-size: var(--presale_block_font_size);
}

.block_1 {
  width: 50vw;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto;
  text-transform: uppercase;
  margin-top: 100px;
}

.block_1 .content {
  padding-left: 20px;
}

.list_number {
  font-size: 10vh;
  border-right: 1px solid yellow;
}

.square {
  width: 6vw;
  height: 6vw;
}

.token_address {
  border: 2px solid #f8401c;
  backdrop-filter: blur(12px);          
  -webkit-backdrop-filter: blur(12px);  
  margin-top: 10vh;
  margin-bottom: 10vh;
}

.address_content {
  padding: 5vh;
  font-size: var(--address_size);
  text-transform: none;
  text-align: center;
}

.token_address .title {
  background-color: #f8401c;
  border-bottom: 2px solid #f8401c;
  padding: 20px;
  text-align: center;
  font-size: var(--address_title_size);
}

.token_address .checkbox {
  border-top: 2px solid #f8401c;
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: column;
  font-size: var(--address_font);
  text-align: center;
}

.terms_blur {
  filter: blur(8px);
}

.token_address .content {
  padding: 100px 20px 100px 20px;
  text-align: center;
  font-size: 80px;
}

.reveal {
  border-right: 1px solid #f8401c;
  padding: 20px;
}

.terms {
  padding: 20px;
  text-align: center;
}

.calculator {
  display: grid; 
  grid-auto-flow: column;
  grid-template-columns: auto;
  background-color: #f8401c;
  border-radius: 10px;
}

.token_box {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 100%;

  text-align: center;
  padding-bottom: 100px;
}

.token_amount {
  height: 10vh;
}

.token_title {
  padding: 20px;
  text-align: center;
  border-bottom: 2px solid white;
}

.token_amount input[type="text"] {
  font-size: var(--calc_font_size);
  outline: none;
  border: none;
  background-color: #f8401c;
  color: white;
  text-align: center;
  border-bottom: 2px dotted white;
  box-sizing: border-box;
  width: 100%;
 }

input[type="text"]:focus {
  border-color: #007bff;
}

.section_title {
  font-size: 5vw;
}

.features {
  display: grid;
  gap: 20px 0px;
}

.features_tab {
  display: grid;
  grid-auto-flow: column;
  gap: 0px 10px;
}

.active_tab {
  color: red;
}

.word {
  color: #f8401c;
}

.features_number {
  text-align: center;
  border: 1px solid pink;
  padding: 50px;
  font-size: 100px;
}

.hide {
  display: none;
}

.features_content {
  border: 1px solid red;
}

.features_content_item {
  padding: 100px 20px 100px 20px;
}

.terms_link {
  text-decoration: underline !important;
  text-underline-offset: 10px;
  text-decoration-color: #f8401c !important;
}

.presale_limits {
  display: grid;
  grid-auto-flow: column;
  background-color: #f8401c;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10vh;
}

.presale_logo {
  background-image: url('presale_logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.intro {
  height: 100vh;
  background-image: url('horseman.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}

.presale_info {
  font-size: var(--presale_info_font_size);
}

.presale_how {
  height: 40vh;
  background-image: url('presale_how.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}

.presale_what {
  height: 40vh;
  background-image: url('presale_what.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}

.margin_top {
  margin-top: var(--margin_top);
}

.margin_top_xl {
  margin-top: var(--margin_top_xl);
}

.padding_top_bottom {
  padding: 10vh 0 10vh 0;
}