html, body {
    padding: 0; margin: 0;
}
body {
    background-color:rgb(0, 0, 0);
    font-size: max(2vw, 24px); 
    font-family: Charter, Arial;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
 }

h1 {
    font-size: 1.2em;
    font-weight: 801;
}

 hr {
    border: none;
    border-top: 6px dashed #00bbff;
    margin: 20px 0;
 }
 p {
    text-shadow: none;
    font-weight: 150;

 }
 a,a:visited {
    color: #8b0404;

 }
 footer {
      text-align: center; 
       /* position: fixed; */
        /* left: 100; */
        /* bottom: 0; */
        /* width: 100%; */
          /* margin-left: auto; */
  /* margin-right: auto; */
  display: block;
    font-size: 0.8em;
        color: hsl(196 100% 30% / 1);
    margin-top: 20px;
        background: black;
 }
 main {
     display: flex;
     flex-direction: row;
     height: 100%;
     gap: 50px;
     padding: 3vw;
     justify-content: center;
     flex-grow: 1;
    }
@media (max-width: 800px) {
    main {
        flex-direction: column;
    }
}
    
#timer {
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-top: 30px;
}

canvas {
    display: inline-block;
}

#cuber {
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}


#boldtext {
    text-align: center;
    font-size: 1.5em;
}

section {
    flex: 1;
}
.islandstyle {
    text-align: center;
    background: rgb(255, 255, 7);
    color: hsl(196 100% 30% / 1);
     text-shadow: 0.1vw 0.1vw 0.1vw rgb(0, 0, 0); 
     padding: 5px 5px;
}
.reader {
    /* cant be used with cuber */
    background: rgb(255, 255, 7);
    color: hsl(196 100% 30% / 1);
     text-shadow: 0.1vw 0.1vw 0.1vw rgb(0, 0, 0); 
     padding: 1em;
     display:block
}
#playbutton {
    text-align: center;
    margin: 0px 10vw;
    background: rgb(7, 172, 255);
    color: hsl(140, 100%, 47%);
     text-shadow: 0.1vw 0.1vw 0.1vw rgb(0, 0, 0); 
     padding: 5px 5px; 
}
#logout {
  
    top:50; left:0;

    position: absolute;
    
    background: rgb(7, 172, 255);
    color: hsl(0, 100%, 47%);
     text-shadow: 0.1vw 0.1vw 0.1vw rgb(0, 0, 0); 
     padding: 5px 5px; 
}
#apply {
  
    top:45; left:50;

    position: absolute;
    margin: 0px 10vw;
    
    background: rgb(7, 172, 255);
    color: hsl(0, 100%, 47%);
     text-shadow: 0.1vw 0.1vw 0.1vw rgb(0, 0, 0); 
     padding: 5px 50px; 
}
nav {

}
#sidebar {
    text-align: center;
 
    background: rgb(7, 255, 131);
    color: hsl(196 100% 30% / 1);
     text-shadow: 0.1vw 0.1vw 0.1vw rgb(0, 0, 0); 
     padding: 5px 5px; 
}


form {
    display: flex;
    flex-direction: column;
}    

input[type="text"], input[type="password"] {
    background-color: black;
    color: white;
    display: block;

    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1em;
}
input[type="submit"] {
    font-size: 1em;
    background-color: rgb(7, 255, 131);
    color: black;
    display: block;
    padding: 1em 0em;
}