*{
    box-sizing:border-box;
}

p{
    color:white;
    font-size: 2vw;
    font-family: "Inter", sans-serif;
}

button{
    color:white;
    background:rgba(0, 0, 0, 0) ;
    border: solid rgba(0, 0, 0, 0) 3px;
    font-size: 3vw;
    font-family: Arial, Helvetica, sans-serif;

}


a {
    text-decoration: none;
}


.space{
    
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position:fixed;
  z-index:-10;
  
    
}

#starfield{
    z-index:-1;
}

.prosto-one-regular {
  font-family: "Prosto One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.inter-roman {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

canvas {
  display: block;
}

.campaign-btn {
    position: fixed;
    top: 15vh;
    left: 35vw;
    /* transition: text-shadow .4s ease-out; */

    background-color: #007bff00;
  border-radius: 50%; 
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
     
}

.campaign-btn:hover {
    /* text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc; */
    
    box-shadow: 0 0 10px 10px rgba(255, 136, 0, 0.618); 
  background-color: rgba(255, 136, 0, 0.618);
}

.campaign-btn.active {
    /* text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc; */

    box-shadow: 0 0 10px 10px rgb(255, 136, 0); 
  background-color: rgb(255, 136, 0);
    
}



.campaign-btn.hidden {
    display:none;
}

.threedmodel-btn{
    display:block;
    transition: background .2s ease-out,
                border-radius .2s ease-out;
}

.threedmodel-btn:hover{
background:rgb(255, 136, 0);
border-radius: 20px;
}

.ps-btn{
    display:block;
    transition: background .2s ease-out,
                border-radius .2s ease-out;
}

.ps-btn:hover{
background:rgb(255, 136, 0);
border-radius: 20px;
}

.abstract-btn {
    position: fixed;
    top: 25vh;
    left: 10vw;

    background-color: #007bff00;
  border-radius: 50%; 
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
    /* transition: text-shadow .4s ease-out; */
}

.abstract-btn:hover {
    /* text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc; */

    box-shadow: 0 0 10px 10px rgba(255, 136, 0, 0.618); 
  background-color: rgba(255, 136, 0, 0.618);
    
}

.abstract-btn.hidden {
    display:none;
}

.abstract-btn.active{
    box-shadow: 0 0 10px 10px rgb(255, 136, 0); 
  background-color: rgb(255, 136, 0);
}

.web-btn p{
display:block;
background:rgba(255, 136, 0, 0);
transition: background .2s ease-out,
            border-radius .2s ease-out;

}

.web-btn:hover p{
background:rgb(255, 136, 0);
border-radius: 20px;
}

.about-btn {
    position: fixed;
    top: 65vh;
    right:15vw;

    background-color: #007bff00;
  border-radius: 50%; 
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
    /* transition: text-shadow .4s ease-out; */
}

.about-btn.hidden {
    display:none;
}

.about-btn:hover {

     box-shadow: 0 0 10px 10px rgba(255, 136, 0, 0.618); 
  background-color: rgba(255, 136, 0, 0.618);

    /* text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc; */
    
}

.about-btn.active{

 box-shadow: 0 0 10px 10px rgb(255, 136, 0); 
  background-color: rgb(255, 136, 0);

}

.settings-btn {
    position: fixed;
    bottom: 15vh;
    right:35vw;
}

.settings-btn.hidden {
    display:none;
}


.subtitle {
    /* background: #ff000069; */
    display: flex;
    position: absolute;
    height: 50px;
    width: 442px;
    left: 122%;
    bottom: 2%;
    font-family: "Prosto One", sans-serif;
    font-size: 3vw;
    align-items: flex-end;

}

.subtitle-upsidedown {
    /* background: #ff000069; */
    display: flex;
    position: absolute;
    height: 50px;
    width: 435px;
    right: 119%;
    bottom: 50%;
    font-family: "Prosto One", sans-serif;
    font-size: 3vw;
    align-items: center;
    justify-content: flex-end;
}

.subtext{
    height: 90vh;
    width: 40vw;
    /* position: absolute; */
    /* background: rgba(0, 0, 255, 0.407); */
    /* left: 6%; */
    /* bottom: 8%; */
    padding-bottom: 22px;
    margin-top: 10px;
    /* overflow: scroll; */

    
}

.sub-image{
    height: 90vh;
    width: 42vw;
    /* position: absolute; */
    /* background: rgba(0, 0, 255, 0.407); */
    left: 6%;
    bottom: 8%;
    padding-bottom: 22px;
    margin-top: 111px;
    /* overflow: scroll; */

    
}

.subtext-settings {
    height: 90vh;
    width: 42vw;
    position: relative;
    /* background: rgba(0, 0, 255, 0.407); */
    left: 40vw;
    bottom: -6%;
    padding-bottom: 22px;
    /* overflow: scroll; */
}

.subtext-upsidedown{
    height: 90vh;
    width: 42vw;
    position: absolute;
    /* background: rgba(0, 0, 255, 0.407); */
    left: 50%;
    bottom: 8%;
    padding-bottom: 22px;
}

.sublayout{
    height:90vh;
    width:90vw;
    position:fixed;
    /* background: red; */
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
}



::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: yellowgreen;  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #88ba1c;  
}

body {
    color:white;
    font-family: "Inter", sans-serif;
    font-size:2vw;

}

.background{
    background: #000000;
background: radial-gradient(circle,rgba(0, 0, 0, 1) 43%, rgba(9, 15, 36, 1) 100%);
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:1;
    z-index: -950;
}



.threedmodel{
    visibility:hidden;
    background:#0b0b3ee8;
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    z-index:1;
    opacity:0;
    display:flex;
    gap:10px;
    justify-content: center;

    transition: visibility .2s ease-in,
                opacity .2s ease-in;
}



.threedmodel.active{
    visibility:visible;
    opacity: 1;
   
}



.pspiece{
     visibility:hidden;
    background:#0b0b3ee8;
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    z-index:1;
    opacity:0;
    display:flex;
    gap:10px;
    justify-content: center;

    transition: visibility .2s ease-in,
                opacity .2s ease-in;
}

.pspiece.active{
    visibility:visible;
    opacity: 1;
}

.designer{
    visibility:hidden;
    background:#0b0b3ee8;   
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0;
    z-index:1;  
    transition: visibility .2s ease-in,
                opacity .2s ease-in;  
}

.designer-btn{
        display: block;
    transition: background .2s ease-out, border-radius .2s ease-out;
}

.designer-btn:hover{
    background:rgb(255, 136, 0);
border-radius: 20px;
}

.designer.active{
    visibility:visible;
    opacity: 1;
}

.settings{
    visibility:hidden;
    background:#0b0b3ee8;
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0;
    z-index:1;

    transition: visibility .2s ease-in,
                opacity .2s ease-in; 
}

.settings.active{
    visibility:visible;
    opacity: 1;
}

.ssc{
    visibility:hidden;
    background:#0b0b3ee8; 
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0;
    z-index:1;  
    transition: visibility .2s ease-in,
                opacity .2s ease-in;    
}

.ssc.active{
    visibility:visible;
    opacity: 1;
}

.ssc-btn{
        display: block;
    transition: background .2s ease-out, border-radius .2s ease-out;

}

.ssc-btn:hover{
    background:rgb(255, 136, 0);
border-radius: 20px;
}


.circle{
    width: 100px;
    height: 100px;
    border: white 4px solid;
    border-radius: 50%;
    top: 4px;
    left: 53px;
    position: relative;
    transition: animation 2s ease-in-out;
}

.circle.active{
animation: circle-selection 2s ease-in-out;

}



.circle-color {
    visibility:hidden;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgb(255, 136, 0);
    top: 11px;
    left: 11px;
    position: relative;
}


.circle-color.active {
    visibility: visible;
    border: 10px solid radial-gradient(circle,rgba(255, 136, 0, 1) 0%, rgba(148, 187, 233, 0) 100%);

}



.circle-upsidedown{
    width: 100px;
    height: 100px;
    border: white 4px solid;
    border-radius: 50%;
    top: 83.5%;
    left: 92%;
    position: relative;
    }

.vertical-line {
    height: 85px;
    border-right: white 3px solid;
    position: absolute;
    bottom: -37px;
    right: -4px;
}

.vertical-line-upsidedown {
    height: 85px;
    border-right: white 3px solid;
    position: absolute;
    bottom: 45px;
    right: 93px;
}

.horizontal-line {
    width: 85px;
    border-bottom: white 3px solid;
    position: absolute;
    bottom: -3px;
    right: -43px;
}

.horizontal-line-upsidedown {
    width: 85px;
    border-bottom: white 3px solid;
    position: absolute;
    bottom: 93px;
    right: 40px;
}



.curved-square {
    border: white 4px solid;
    border-bottom-left-radius: 100px;
    overflow: auto;
    margin-left: 150px;
    height: calc(100% - 100px);
    padding: 20px;
    padding-bottom: 50px;
    max-width: 446px;
}

.image-curved-square {
    border: white 4px solid;
    border-top-right-radius: 100px;
    overflow-x: scroll;
    display: flex;
    gap:35px;
    margin-left: 150px;
    height: calc(100% - 100px);
    padding: 20px;
    padding-bottom: 50px;
    max-width: 446px;
    width: 500px;

}

.curved-square-settings {
    display: flex;
    border: white 4px solid;
    border-top-left-radius: 100px;
    /* overflow: auto; */
    margin-left: 150px;
    height: calc(100% - 100px);
    padding-top: 34px;
    /* padding-bottom: 50px; */
    max-width: 446px;
    position: relative;
    bottom: 96px;
    flex-direction: column;
    align-items: center;
}

.curved-square-upsidedown {
    border: white 4px solid;
    border-top-left-radius: 100px;
    overflow: auto;
    margin-left: 150px;
    height: calc(100% - 100px);
    padding: 20px;
    padding-bottom: 50px;
    max-width: 446px;
    position: relative;
    bottom: 96px;
}

.submenu-exit{
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px; 
    z-index:0;
}

.palette{
    visibility:hidden;
    background:rgba(0, 0, 0, 0);
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0;
    z-index:1; 

    transition: visibility .2s ease-in,
                opacity .2s ease-in; 
}

.palette.active{
    visibility: hidden;
    opacity: 1;
    
}

.palette-exit{
    background:red;
   visibility:hidden;
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px; 
}

.audio{
    visibility:hidden;
    background:rgba(0, 0, 0, 0);
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0;
    z-index:1; 

    transition: visibility .2s ease-in,
                opacity .2s ease-in; 
}

.audio.active{
    /* visibility: visible; */
    opacity: 1;
    
}

.filter{
    visibility:hidden;
    background:rgba(0, 0, 0, 0);
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0;
    z-index:1; 

    transition: visibility .2s ease-in,
                opacity .2s ease-in; 
}

.filter.active{
    /* visibility: visible; */
    opacity: 1;
    
}

.reset{
    visibility:hidden;
    background:rgba(0, 0, 0, 0);
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0;
    z-index:1; 

    transition: visibility .2s ease-in,
                opacity .2s ease-in; 
}

.reset.active{
    /* visibility: visible; */
    opacity: 1;
    
}

.submenu {
    display:flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;

    visibility:hidden;
    background: #ff000000;
    position: fixed;
    height: 39vh;
    width: 0vw;
    padding-top: 22px;
    top: 25%;
    left:86px;
    opacity: 1;
    z-index: 1;
    border: white solid 4px;
    border-top-right-radius: 100px;

    transition: visibility .2s ease-out,
                width .2s ease-out;
}

.submenu.active { 
    visibility:visible;
    width:34vw;
    left:86px;
    z-index:2;
}




img {
    max-width: 100%;
}



.flexible {

    padding: 10px;
    max-width: 60%;
    margin:0 auto;
}
 /**STARTUP SCREEN**/

.logo{
    position:fixed;
    height:0px;
    width:0px;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    animation: fadeout 3s;
    opacity: 0;
}

@keyframes fadeout {

0%{
    height:200px;
    width:200px;
    opacity: 100%;
    display:block;
}
75%{
    opacity: 0;
    height:200px;
    width:200px;
}
100%{
    display:none;
    opacity: 0;
    height:0px;
    width:0px;
}
}

.startup {
    background:black;
    position: fixed;
    height:0vh;
    width:0vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0;
    animation: black-out 9s linear; 
}

@keyframes black-out{
    0%{
    background:rgb(51, 126, 255);
    height:100vh;
    width:100vw;
    opacity:1;
    }
    25%{
    background: black;
    height:100vh;
    width:100vw;    
    }
    95%{
    opacity:1;
    height:100vh;
    width:100vw;
    }
    99%{
    opacity:0;
    height:100vh;
    width:100vw;
    }
    100%{
    height:0vh;
    width:0vw;
    }
}

.circle-skew{
    position:fixed;
    height:50vh;
    width:65vw;
    left: 50%;
    bottom: 50%;
    border: solid white 6px;
    border-radius: 60%;
    z-index:-1;
    box-shadow: 0 0 20px 5px rgba(145, 141, 223, 0.667);

    transform: translate(-50%, 50%) skew(-0.7rad);
    
    
    animation: fadein 9s ease ;

}

@keyframes fadein {

0%{
    height:300px;
    width:300px;
    transform:skew(0) translate(-50%, 50%);
    border: solid white 10px;
    z-index:0;
    
}
33%{
    transform:skew(0) translate(-50%, 50%);
}
75%{
    height:300px;
    width:300px;
    transform:skew(0) translate(-50%, 50%);
    
}
80%{
    height:50vh;
    width:65vw;
    transform: translate(-50%, 50%) skew(-0.7rad);
}
100%{
    z-index:0;
}
}

/**END OF STARTUP**/

/**BORDER ASSETS**/

.fix-top{
    position: absolute;
    top:-4px;
}

.fix-bottom{
    position: absolute;
    bottom:-4px;
}


.footer-design {
    
    position:fixed;
    display:flex;
    justify-content: end;
    width: 80vw;
    height: 15vh;
    flex-shrink: 0;
    fill:white;
    bottom:4vh;
    left:50vw;
    transform: translate(-50%, 50%);
    float:right;
    


    align-items:baseline;

}

.footer-inner{
    width:70vw;
    position:relative;
    border-bottom:4px solid white;

}

.bottom-line {
    translate: 0px 5px ;
    
}

.header-design {
position:fixed;
width: 80vw;
height: 2vh;
flex-shrink: 0;
fill:white;
top:4vh;
left:50vw;
transform: translate(-50%, 50%);
float:right;
border-top:4px solid white;
}



.white-top {
  right:0;  
    
}



/** END OF BORDER ASSETS**/
.main-menu{
    display:block;    
}

.main-menu.hidden{
    display:none;
}

.campaign{
visibility:hidden;
opacity:0;
position: absolute;
text-align:center;
width: 30vw;
height: 20vh;
top: 20vh;
left: 50vw;
transform: translate(-50%, 90%);
transition: visibility .2s ease-in-out,
            opacity .2s ease-in-out;

}

.campaign.active {

visibility:visible;
opacity:1;

}


.abstract{
visibility:hidden;
opacity:0;
position: fixed;
text-align:center;
width: 30vw;
height: 20vh;
top: 20vh;
left: 50vw;
transform: translate(-50%, 90%);
transition: visibility .2s ease-in-out,
            opacity .2s ease-in-out;
}

.abstract.active {

opacity:1;
visibility:visible;

}

.about{
visibility:hidden;
opacity:0;
position: absolute;
text-align:center;
width: 30vw;
height: 20vh;
top: 20vh;
left: 50vw;
transform: translate(-50%, 90%);
transition: visibility .2s ease-in-out,
            opacity .2s ease-in-out;

}

.about.active {
visibility:visible;
opacity:1;

}



.exit{
visibility:hidden;
opacity:0;
position: absolute;
text-align:center;
width: 30vw;
height: 20vh;
top: 16vh;
left: 50vw;
transform: translate(-50%, 90%);
transition: visibility .2s ease-in-out,
            opacity .2s ease-in-out;

}

.back{
    display:block;
}

.exit.active {
visibility:visible;
opacity:1;


}

.selectionbackground {
    display: none;
    opacity:0;
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0;
    z-index: -1;

    transition: visibility .2s ease-in-out,
                opacity .2s ease-in-out;
}



.selectionbackground.active {
    display:block;
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0.4;

}
 
.setting-submenu {
    display:block;
    background:rgba(0, 90, 128, 0.541);
    position: fixed;
    height:100vh;
    width:100vw;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    opacity:0.4;
}

.setting-submenu.active{
    display:block;
}

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


    .flexible {
        border:1px solid;
        max-width:80%;
    }

}

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

    body{
        

    }

    .flexible {
        max-width:60%;
    }
}

/**FOOTER**/

.exit-btn {
    display: block;
    position: absolute;
    bottom: 27px;
    left: 27px; 
}

.exit-btn.submenu {
    display:none;
}

.no-btn{
display:block;
background:rgba(255, 136, 0, 0);
transition: background .2s ease-out,
            border-radius .2s ease-out;

}

.no-btn:hover{
background:rgb(255, 136, 0);
border-radius: 20px;

}

.back-btn {
    display:none;
    position: fixed;
    bottom: 27px;
    left: 27px;    
}

.exit-skew{
    position: fixed;
    height: 15vh;
    width: 11vw;
    border: white 4px solid;
    border-radius: 100%;
    bottom: 15px;
    left: 13px;
    transform: skew(-0.7rad);
    transition: background .3s ease-out;
}

.exit-skew:hover{
   background-color: rgb(255, 136, 0); 
}

.exit-skew.active{
   background-color: rgb(255, 136, 0); 
}

.back-btn.active {
    display:block;
}


footer{
    display: flex;
    justify-content: space-between;
    position: fixed;
    height: 7vh;
    width: 95vw;
    color: white;
    bottom: 0vh;
    left: 0vw;
    left: 50vw;
    translate: -50%;
    margin: auto;
    align-items: center;
    z-index: 1;
}

.footer-right{
    display: flex;
    width: 74%;
    align-items: baseline;
    position: relative;
    justify-content: space-between;
    left: 17.5vw;
    align-items: center;
    font-size: 1.5vw;
}

.scroll-container {
    width: 70%;
    font-size:1.5vw;
}

#clock-container {
    
}

/**AUDIO**/


.scroll-container,
.marquee {
  pointer-events: none;
}