/* ____  _____ ____  _____ _____   ____  ____   ___  
 |  _ \| ____/ ___|| ____|_   _| | __ )|  _ \ / _ \ 
 | |_) |  _| \___ \|  _|   | |   |  _ \| |_) | | | |
 |  _ <| |___ ___) | |___  | |   | |_) |  _ <| |_| |
 |_| \_\_____|____/|_____| |_|   |____/|_| \_\\___/  */
                                    
 
canvas {
        position: absolute;
        left: 0;
        top: 0;
      }

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: normal;
}
/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}


   /* ___  _                                
  / _ \| | __  _ __ ___   ___  _ __ ___  
 | | | | |/ / | '_ ` _ \ / _ \| '__/ _ \ 
 | |_| |   <  | | | | | | (_) | | |  __/ 
  \___/|_|\_\ |_| |_| |_|\___/|_|  \___|  */
                                         

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}


 /* ___       __   ___  ___  ________  _________  _______   ___      ___ _______   ________          _____ ______   ________  ________         
|\  \     |\  \|\  \|\  \|\   __  \|\___   ___\\  ___ \ |\  \    /  /|\  ___ \ |\   __  \        |\   _ \  _   \|\   __  \|\   ___  \       
\ \  \    \ \  \ \  \\\  \ \  \|\  \|___ \  \_\ \   __/|\ \  \  /  / | \   __/|\ \  \|\  \       \ \  \\\__\ \  \ \  \|\  \ \  \\ \  \      
 \ \  \  __\ \  \ \   __  \ \   __  \   \ \  \ \ \  \_|/_\ \  \/  / / \ \  \_|/_\ \   _  _\       \ \  \\|__| \  \ \   __  \ \  \\ \  \     
  \ \  \|\__\_\  \ \  \ \  \ \  \ \  \   \ \  \ \ \  \_|\ \ \    / /   \ \  \_|\ \ \  \\  \|       \ \  \    \ \  \ \  \ \  \ \  \\ \  \    
   \ \____________\ \__\ \__\ \__\ \__\   \ \__\ \ \_______\ \__/ /     \ \_______\ \__\\ _\        \ \__\    \ \__\ \__\ \__\ \__\\ \__\   
    \|____________|\|__|\|__|\|__|\|__|    \|__|  \|_______|\|__|/       \|_______|\|__|\|__|        \|__|     \|__|\|__|\|__|\|__| \|__|   
                                                                                                                                            
                                                                                                                                            
                                                                                                                                            
 _________  ___  ___  _______           ________ ___  ___  ________  ___  __    ___  ________   ________          ___  ___    _____         
|\___   ___\\  \|\  \|\  ___ \         |\  _____\\  \|\  \|\   ____\|\  \|\  \ |\  \|\   ___  \|\   ____\        |\  \|\  \  / __  \        
\|___ \  \_\ \  \\\  \ \   __/|        \ \  \__/\ \  \\\  \ \  \___|\ \  \/  /|\ \  \ \  \\ \  \ \  \___|        \ \  \\\  \|\/_|\  \       
     \ \  \ \ \   __  \ \  \_|/__       \ \   __\\ \  \\\  \ \  \    \ \   ___  \ \  \ \  \\ \  \ \  \  ___       \ \   __  \|/ \ \  \      
      \ \  \ \ \  \ \  \ \  \_|\ \       \ \  \_| \ \  \\\  \ \  \____\ \  \\ \  \ \  \ \  \\ \  \ \  \|\  \       \ \  \ \  \   \ \  \     
       \ \__\ \ \__\ \__\ \_______\       \ \__\   \ \_______\ \_______\ \__\\ \__\ \__\ \__\\ \__\ \_______\       \ \__\ \__\   \ \__\    
        \|__|  \|__|\|__|\|_______|        \|__|    \|_______|\|_______|\|__| \|__|\|__|\|__| \|__|\|_______|        \|__|\|__|    \|__|     */
                                                                                                                                           
        
        
                              
/* FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS FONTS  */

@font-face {
  font-family: Script1; /* set name */
  src: url(assets/fonts/Pixellium.ttf); /* url of the font */
}

@font-face {
  font-family: Informa; /* set name */
  src: url(assets/fonts/informa.ttf); /* url of the font */
}

   /* ____ _       _           _       _          __  __ 
  / ___| | ___ | |__   __ _| |  ___| |_ _   _ / _|/ _|
 | |  _| |/ _ \| '_ \ / _` | | / __| __| | | | |_| |_ 
 | |_| | | (_) | |_) | (_| | | \__ \ |_| |_| |  _|  _|
  \____|_|\___/|_.__/ \__,_|_| |___/\__|\__,_|_| |_|  
                                                       */

body {
  background-color: #000000;

  font-family: Arial, sans-serif;
  padding: 20px;
}

hr {
 
  border-top: 5px dashed rgb(255, 255, 255);
   
      -webkit-filter: blur(3px);
      
}



/* This is the general container that's transparent */


.gen {
max-width:60em;
display:flex;
/* background-color: #ff9; */
min-height: 100%;
height: 100%;
align-items: start;
flex-direction: column;
pointer-events: none;
/* background-color: yellowgreen; */
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.image_inbg img{
  width:100%;
  height:100%;
}
/* Therre is option Therre is option Therre is option Therre is option Therre is option  */

.w-1-2 {width: auto;}
/* @media (max-width: 1300px) {  .w-1-2 {width: 35em;}} */
@media (max-width: 576px) {  .w-1-2 {width: unset;}}

.center { justify-self: center;}

/* hide on mobile */
@media (max-width: 1300px) {
  #hide-on-mobile {
    display: none;
  }
}

/* show on mobile */
#show-on-mobile {
    display: none;
  }
@media (max-width: 1300px) {
  #show-on-mobile {
    display: block;
  }
}

/* Border colors bro */
.c_nb {border-color: var(--c_nb); color: var(--c_nb);}
.c_ng {border-color: var(--c_ng); color: var(--c_ng);}
.c_g {border-color: var(--c-g); color: var(--c-g);}
.c_r {border-color: var(--c_r); color: var(--c_r);}
.c_b {border-color: var(--c_b); color: var(--c_b);}
.c_y {border-color: var(--c_y); color: var(--c_y);}
.c_p {border-color: var(--c_p); color: var(--c_p);}


/* True Shi True Shi True Shi True Shi True Shi True Shi True Shi True Shi True Shi True Shi True Shi True Shi True Shi hi True Shi True Shi  */



/* NUMBEROS */
:root {
  /* Queries */
  --md: 1300px;
  --sm: 576px;



  --h1-s: 5em;
  --h2-s: 2em;
  --p-s: 1.8em;

/* COLORS I MADE UP */
/* 
default narration_blue = "#4da0cd"
default narration_green = "#3bac77"
default green_main = "#4db05b"
default red_main = "#B22B3D"
default blue_main = "#023472"
default yellow_main = "#ffdb0f"
default purple_main = "#994995" 
*/
  --c_nb: #4da0cd;
  --c_ng: #3bac77;
  --c-g: #4db05b;
  --c_r: #B22B3D;
  --c_b: #023472;
  --c_y: #ffdb0f;
  --c_p: #994995;

/* STARS */
  --starsize: 10px;
  --tvsize: 3px;
/* Minimal hover */
  --min-tf: 1.02;

}

/* Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter??Filter?? */
.stargrid:after {
  pointer-events: none;
	box-sizing: border-box;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	z-index: -1;
	background-color: transparent;
	background-image: url('assets/star.png');
	background-size: var(--starsize) var(--starsize);
}

.tv:after {
  pointer-events: none;
	box-sizing: border-box;
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	z-index: 1;
  opacity: 0.5;
  mix-blend-mode: darken;
	background-color: transparent;
	background-image: url('assets/RGB.png');
	background-size: var(--tvsize) var(--tvsize);
}

.box1 {
 
 background-color: #000000; 

 
}

.bright {
  filter: brightness(1.5) contrast(2.5);
}

.saturate {
  filter: brightness(1.0) contrast(1.7);
}

/* TEXTFILTER */
.outline {
 -webkit-text-stroke: 4px rgb(0, 0, 0);
 paint-order: stroke;
}

.hover-min:hover,
 .hover-min:focus {
transform: scaleX(var(--min-tf));

 }

.hover-w:hover, .hover-w:focus {
  letter-spacing: -0.95px;
  
}


/* Background dw, fr */

.z-1{

  z-index: -1;
}


/* The card ok. whatever The card ok. whatever The card ok. whatever  */
.card {
  pointer-events: none;
  border-radius: 1px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 16px;

}
@media (max-width: 576px) {  .card {margin: 2px;}}


.border {

  /* border bro */
  outline-color: var(--c_ng); 

  outline-style: ridge;
  outline-width: 2px;
}



.card h1 {line-height: 1.8; margin: unset; text-transform: uppercase;}
.card h1, h2, p {color: #ffffff; }
.card h2, p {line-height: 0.9; text-wrap: balance;}
/* Fonts for that thing */
.card h1 {font-family: Script1; font-weight: 700;  letter-spacing: 1px;} .card h2 {font-family: Script1;  letter-spacing: 3px;} .card p {font-family: Informa;  letter-spacing: -1px;}
/* SIZE HANDLER LIKE PENIS SIZE HANDLERSIZE HANDLERSIZE HANDLERSIZE HANDLERSIZE HANDLERSIZE HANDLERSIZE HANDLERSIZE HANDLERSIZE HANDLERSIZE HANDLER  */

.card h1 {font-size: var(--h1-s); line-height: normal;} .card h2 {font-size: var(--h2-s);} .card p {font-size: var(--p-s);}
/* // Large devices (desktops, 992px and up) */
@media (max-width: 1300px) {.card h1 {font-size: calc(var(--h1-s) / 1.5);} .card h2 {font-size: calc(var(--h2-s) / 1.1);} .card p {font-size: calc(var(--p-s) / 1.1);}}
/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {.card h1 {font-size: calc(var(--h1-s) / 1.8);} .card h2 {font-size: calc(var(--h2-s) / 1.2);}  .card p {font-size: calc(var(--p-s) / 1.3);}}



   /* ____      _ _                 _ _     _                            _                 _      
  / ___|___ | | | __ _ _ __  ___(_) |__ | | ___   _ __ ___   ___  ___| |__   __ _ _ __ (_) ___ 
 | |   / _ \| | |/ _` | '_ \/ __| | '_ \| |/ _ \ | '_ ` _ \ / _ \/ __| '_ \ / _` | '_ \| |/ __|
 | |__| (_) | | | (_| | |_) \__ \ | |_) | |  __/ | | | | | |  __/ (__| | | | (_| | | | | | (__ 
  \____\___/|_|_|\__,_| .__/|___/_|_.__/|_|\___| |_| |_| |_|\___|\___|_| |_|\__,_|_| |_|_|\___|
                      |_|                                                                       */

.expand {
  
  cursor: pointer;

  pointer-events: visible;
  user-select: none;
   transition: color  0.2s steps(2, end);
    transition: letter-spacing  0.1s steps(2, end);
}

.active, .expand:hover {
  letter-spacing: -0.95px;
  
}



.content {
  display: flex;
  /* background-color: #3bac77; */
  width: 23em;
  display: none;
  overflow: hidden;
   max-height: 0;
  transition: max-height 1.5s steps(10, end);
  /* background-color: #f1f1f1; */
}

@media (max-width: 576px) {  .content {width: unset;}} 

  /* List ofd links  List ofd links List ofd links List ofd links List ofd links List ofd links*/
.list {
  display:flex;
  flex-direction: column;
  
}

button {
  color:#f1f1f1;
  text-wrap: pretty;
  border: unset;
  background-color: transparent;
  pointer-events: all;
  cursor: pointer;
  text-align: left;
  padding: 0;
}


  /* ____                      ____  _                       
 / ___|  ___  _ __   __ _  |  _ \| | __ _ _   _  ___ _ __ 
 \___ \ / _ \| '_ \ / _` | | |_) | |/ _` | | | |/ _ \ '__|
  ___) | (_) | | | | (_| | |  __/| | (_| | |_| |  __/ |   
 |____/ \___/|_| |_|\__, | |_|   |_|\__,_|\__, |\___|_|   
                    |___/                 |___/            */

.audio-popup {
 
  pointer-events: none;
  flex-direction: column;
  
  justify-content: flex-end;
  align-items: end;
z-index:1;

padding: 3em;
display: flex;

}

audio {
   /* filter:  saturate(70%) grayscale(1) contrast(99%) invert(92%); */
  pointer-events:auto;

    height: 23px;
    box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.904);
    width: 27em;
    
}
 @media (max-width: 1300px) {audio {width: 25em;}}
 @media (max-width: 576px) {audio {width: 20em; height: 23px;}}

audio::-webkit-media-controls-enclosure {
    /* width: 100%;
    max-width: 800px;
    height: 30px;
    flex-shrink: 0;
    bottom: 0;
    text-indent: 0;
    padding: 0; */
    box-sizing: border-box;
     border-radius: 3px;
     
}


audio::-webkit-media-controls-panel{
    display: flex;
    flex-direction: row;
    align-items: center;
    /* We use flex-start here to ensure that the play button is visible even
     * if we are too small to show all controls.
     */
    justify-content: flex-start;
   
    position: relative;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    text-align: right;
    bottom: auto;
    height: 23px;
    background: linear-gradient(0deg,rgb(0, 6, 168) 0%, rgb(158, 174, 255) 80%, rgb(204, 255, 0) 90%, rgb(255, 187, 0) 96%);
    background-color: rgb(0, 0, 0);
    border-radius: 1px;

    
}

/* Gallery pop up */

/* Popup container */

.gallery-popup {
 
  pointer-events: none;
  flex-direction: column;
  
  justify-content: flex-start;
  align-items: end;
z-index:1;

padding: 3em;
display: flex;
}
@media (max-width: 1300px) {  .gallery-popup {padding: unset; margin-top:2em; }} 





 
 .modal {
     display: none;
     position: fixed;
    max-width: 30em;
    
    margin:1em;
    padding:1em;
   
     /* background-color: rgb(0, 0, 0); */
 }
 .modal-content { margin: auto; display: block; }
 @media (max-height: 800px) {  .modal-content { width: auto; height: 12em;}  .gallery-popup {padding: unset;  flex-direction: row-reverse;}}   
 .close {
  pointer-events: all;
     position: absolute;
     bottom: 0;
     right: 0;
     color: #f1f1f1;
     font-size: 40px;
     font-weight: 100;
     transition: 0.2s steps(2, end);
     margin:0;
 }

 .close:hover,
 .close:focus {
     color: var(--c_b);
     text-decoration: none;
     cursor: pointer;
 }

/* Signature */

 .signature { margin-top: 10em; }
 @media (max-width: 1300px) {  .signature {margin-top: unset; margin-top:1em;}}