body{
    margin: 0;
    overflow: hidden;
    width:100vw;
    height:100vh;
    background-color:black;

    font-family: sans-serif;
    color:#fff;

    --magenta: rgb(192, 0, 192);
    --magenta-rgb: 192, 0, 192 ;
    --lavender: rgb(153, 153, 255);
}

a,
a:visited {
  color: var(--lavender);
}

a:hover{
    color: var(--magenta);
}

#mainCanvas{
    max-width:100%;
    max-height:100%;
}

#opacityFilter{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

#backCorner{
    position:absolute;
    left:0;
    top:0;
    background: rgba(0,0,0,0.75);
    cursor: default;
    
    width:140px;
    padding:10px;

    border: 0px solid var(--magenta);
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-bottom-right-radius: 35px;
}

#introContents{
    max-height:85vh;
    overflow:auto;
    scrollbar-width: thin;

    padding:20px;
}

#introPanel{
    --wid: 600px;
    --hei 680px;
    
    width: var(--wid);
    height: var(--hei);

    max-width:90vw;
    max-height:90vh;
    overflow:hidden;

    position: fixed;
    left: 50%;
    top: 5vh;
    transform: translate(-50%, 0%);

    border: 1px solid var(--magenta);
    border-radius: 10px;

    background: #111;
   
    text-align: center;
    
    display:none;

}

#introPanel h2, h3{
    margin-bottom: 5px;
    color: var(--magenta);
}

#introPanel i {
    font-size:10px;
}

#screensaverModes{
    margin: auto;
    width: 90%;
    border-collapse: collapse;
    table-layout: fixed;

    box-sizing: border-box;

    --main-width: 15%; /* Out of 50%, how much is title? */
    --side-padding: 7px;
    --side-sep: 4px;
    --interval-padding: 10px;
}

#screensaverModes tr:not(:first-child) td{
    padding-top: var(--interval-padding);
}

#screensaverModes td.buttonSelector{
    border:0 !important;
    padding:0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    width:auto !important;
}

#screensaverModes td:nth-child(odd){
    font-size: 18px;

    width: 65px;
    
    
    text-align:right;
    padding-right: var(--side-padding);
    border-right: 1px solid var(--magenta);
}

#screensaverModes td:nth-child(even){
    font-style: italic;
    font-size: 10px;

    width: calc(45% - var(--side-padding));
    
    text-align: left;
    padding-left: var(--side-padding);
}

#screensaverModes td:nth-child(2){
    padding-right: calc(0.5 * var(--side-sep));
}

#screensaverModes td:nth-child(3){
    padding-left: calc(0.5 * var(--side-sep));
}

.switchButton{
    --border-radius: 5px;
    border: 1px solid var(--magenta);
    border-radius: 0;
    padding:5px;
    background: rgba(0,0,0,0.1);
    color: white;
    font-size:18px;
}

.switchButton:hover{
    background: rgba(128,128,128,0.1);
    color: white;
}

.switchButton.selected{
    background: var(--magenta);
    color: black;
}

.switchButton.selected:hover{
    background: rgba(var(--magenta-rgb),0.5);
}

.switchButton.left{
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    padding-right: 10px;
}

.switchButton.right{
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    padding-left: 10px;
}

#modTable{
    width:100%;
    text-align: center;
    margin-top:20px;
}

#modTable tr:first-child td{
    width:33%;
}

#modTable tr:nth-child(odd) td{
    color:var(--lavender);
}

#modTable tr:nth-child(even) td{
    font-size:10px;
    padding-bottom:15px;
    vertical-align:top;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 4s, opacity 2s linear 2s;
}