/* variables Friday */

.theme-native {
  --links : coral;
  --hoverlinks: #460c52;
  --storylink:rgb(65, 214, 228);
  --back:#222;
  --text: antiquewhite;
  --headertext:antiquewhite;
  --interface: #850033;
  --sliderbuttonbackground: darkslategrey;
  --sliderbuttonbackgroundhover: rgb(29, 63, 143);
  --sliderbackground: #460c52;
  --slidertext: antiquewhite;
  --sliderbuttonbackgroundhighlight:antiquewhite;
  --sliderbuttontextselected:darkslategrey;
}

.theme-light {
    --links: #222;
    --hoverlinks: #222;
    --sliderbackground: #222;
    --slidertext: antiquewhite;
    --storylink: #222;
    --back: #fff5d7;
    --text: #222;
    --headertext: antiquewhite;
    --interface: #ffccee;
    --sliderbuttonbackground: #00ffff;
    --sliderbuttonbackgroundhover: #55aaff;
    --sliderbuttonbackgroundhighlight: #55aaff;
    --sliderbuttontextselected: antiquewhite;
}

.theme-high-contrast {
    --links : coral;
    --hoverlinks: #460c52;
    --storylink:rgb(65, 214, 228);
    --back:#222;
    --text: antiquewhite;
    --headertext:antiquewhite;
    --interface: #850033;
    --sliderbuttonbackground: darkslategrey;
    --sliderbuttonbackgroundhover: rgb(29, 63, 143);
    --sliderbackground: #460c52;
    --slidertext: antiquewhite;
    --sliderbuttonbackgroundhighlight:antiquewhite;
    --sliderbuttontextselected:darkslategrey;
}



body {
    background-color: black;
    margin:0px;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
}

a {
    text-decoration: none;
    font-weight: 700;
    color: var(--links);
  }
  
a:visited {
color: --var(links);
}

main {
    display:grid;
    grid-template-areas:    "hlside heading hrside"
                            "barlside barnav barrside"
                            "setbar cont sidenav"
                            "botlside foot botrside";

    grid-template-columns: 100px 3fr 160px;
    grid-template-rows: 60px 100px 2fr 80px;
    background-color: var(--interface);
    border-radius: 30px;
    height: 95vh;
    width: 90vw;
    margin: 10px auto;
}

#heading {
    padding-left:40px;
    height:80px;
}

#heading h1, #heading h4 {
    margin-top: 0px;
    margin-bottom: 0px;
}

#heading h1 {
    font-size: 2.3rem;

}

#heading h4 {
    margin-left: 90px;
}


#cont {
    min-height:20px;
    padding:30px;
}

#hlside, #hrside {
    padding:0px;
    color: var(--text);
}

#barlside, #barnav, #barrside, #setbar, #sidenav, #botlside, #botrside, #foot {
    margin-top:15px;
    padding: 15px;
    color: var(--text);
    font-weight: 700;
}

#setbar {
    
    padding: 0px;
    
}

#heading, #cont {
    background-color:var(--back);
    color: var(--headertext);
    border:none;
}

#hlside, #setbar, #botlside, #barlside {
    text-align: right;
}

#hrside { grid-area: hrside; }
#hlside { grid-area: hlside; }

#hlside, #hrside { background-color: black; }

#hrside div, #hlside div {
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    background-color: var(--interface);
    padding: 15px;
    height:100%;
}

#heading {
    grid-area: heading;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    background-color: black;
}

#barlside {
    grid-area: barlside;
}

#barnav {
    grid-area: barnav;
    padding-left:50px;
}

#barrside {
    grid-area: barrside;
}

#cont {
    grid-area: cont;
    color: var(--text);
    border-radius: 30px;
    overflow:scroll;
    scrollbar-width: none;  /* Firefox */

    
}

#cont::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.nonscrollable {
    display:none;
    font-size: 1.5rem;
    position:fixed;
    left:82%;
    top: 188px; 
    width:20px;  
    background-color:var(--back);
    z-index:100;
}


.scrollable {
    display:block;
}

#sidenav {
    grid-area: sidenav;
}

#botlside {
    grid-area: botlside;
}

#foot {
    grid-area: foot;
    text-align: center;
    font-size: 0.7rem;
    margin-top:5px;
    padding: 5px;
    min-height: 150px;
}

#botrside {
    grid-area: botrside;
}

.slide {
    
    position:fixed;
    background-color: var(--sliderbackground);
    color:var(--slidertext);
    top:calc(50vh - 150px);
    left:-500px;
    border:2px solid var(--text);
    border-radius:  30px;
    padding:20px;
    height: 300px;
    width: 200px;
    z-index:10;
    transition: all .75s ease-in-out;
}
.righthand {
    left:150%;
}



#slidepane5 {
    height:80px;
    #asidecontainer {
        margin:auto;
    }
}


.slidein {
    left:calc(50vw - 100px);
    color:var(--slidertext);
}



#sliderbutton1 {
    margin-top:100px;
}



.sliderbutton {
    font-size: 1rem;
    font-weight:500;
    background-color: var(--sliderbuttonbackground);
    color:var(--text);
    border-radius: 5px;
    border:2px var(--text) solid;
    margin-bottom: 10px;
    width: 80px;
    
}

.sliderbutton:hover {
    background-color: var(--sliderbuttonbackgroundhover);
    color:var(--text);
}

.sliderclicked {
    background-color: var(--sliderbuttonbackgroundhighlight);
    color:var(--sliderbuttontextselected);
    
}

#sidenav .sliderbutton {
    width:100px;
    height:60px;
}



div.buttoncontainer .closebutton {
    position:absolute;
    top:-80px;
    left:105%;
    font-size: 2rem;
    border:2px solid var(--text);
    background-color: var(--hoverlinks);
    color:var(--slidertext);
    border-radius: 20px;
    line-height: 1.5;
    width:70px;
    height: 70px;
    

}

div .closebutton:hover {
    border:5px solid var(--hoverlinks);
    background-color: var(--slidertext) ;
    color:var(--hoverlinks);
}

#starsearch label, #starsearch input {
    display: none;
    vertical-align: middle;
    margin-top: 15px;

}

#starsearch input {
    background-color: var(--text);
    color:var(--sliderbuttonbackground);
    border:var(--interface) 1px solid;
    border-radius: 5px;
}

#starsearch input[type="submit"]:hover {
    background-color: var(--back);
    color:var(--text);
    border:var(--text) 1px solid;

}

#starsearch input[type="submit"]:active {
    background-color: var(--text);
    color:var(--back);
    border:var(--back) 1px solid;
}

#starsearch input[type="text"]:invalid {
    background-color: var(red);
    color:var(--back);
    border:var(--back) 1px solid;
}


.searchhead {
    display:none;
    margin-top: 0px;
    padding: 0px;
}