:root{
    --web-red: rgb(158, 43, 43);
    --main-gradient: linear-gradient(rgba(0,0,0,0.125),rgba(255,255,255,0.75));
}
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background: rgb(240, 240, 240);
}
@font-face{
    font-family: Frutiger;
    src: url(/fonts/NotoSans-Regular.ttf);
    font-weight: normal;
}
.header{
    background: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.5)), url(/Tethys/images/Banner.png);
    background-size: cover;
    background-position: center 47%;
    background-repeat: no-repeat;
    flex: 1.25;
    display: flex;
    align-items: center;
}
.header img{
    display: block;
    max-height: 150px;
    margin-left: 50px;
    filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.5));
}
.navbar{
    background: linear-gradient(0deg,rgba(51, 51, 51, 1) 0%, rgba(102, 102, 102, 1) 100%);
    flex: 0.15;
    box-shadow: 0 0 5px black, inset 0 0 2px rgba(255,255,255,0.5);
    display: flex;
    flex-direction: row;
    font-family: Frutiger;
    align-items: center;
    padding: 0 40px;
}
.navlink{
    margin-left: 30px;
    padding-bottom: 3px;
    font-weight: bold;
}
.navlink a{
    color: white;
    text-decoration: none;
}
.navlink a:hover{
    text-decoration: underline;
}
.main{
    flex: 5;
    display: flex;
    align-items: center;
    font-family: Frutiger;
    flex-direction: column;
    overflow: scroll;
}
.banner{
    margin-top: 50px;
    width: 75%;
    height: 150px;
    border: 1px solid gray;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 5px rgb(192, 192, 192);
    background: var(--main-gradient);
}
.banner h1, .banner p{
    margin: 0;
    display: block;
    filter: drop-shadow(0 -2px 1px rgba(0,0,0,0.25));
    color:rgb(50, 50, 50);
    font-size: 100%;
}
.banner h1{
    font-weight: bold;
    color: var(--web-red);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 300%;
}
.spacer{
    width: 75%;
    font-weight: bolder;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 1.5em;
}
.spacer h2{
    margin-right: 15px;
    color:rgb(50, 50, 50);
}
.spacer-line{
    flex-grow: 1;
    height: 1px;
    background: rgb(50, 50, 50);;
}
.readlist{
    width: 75%;
    margin: 0;
    padding: 0;
    color: black;
}
.readlist a{
    display: flex;
    flex-direction: row;
    background: linear-gradient(rgba(0,0,0,0.05),rgba(255,255,255,0.25));
    border: 1px solid gray;
    border-radius: 2px;
    text-decoration: none;
    margin-bottom: 1em;
    padding: 5px;
    box-shadow: 0 0 2px rgb(192, 192, 192);
    color: black;
}
.readlist a:hover{
    text-decoration: underline;
}
.red-bar{
    width: 7px;
    background: var(--web-red);
}
.readlist-text{
    width: 1000px;
    color: black;
    transition: .2s;
    margin-left: 7px;
}
.readlist-text h3,.readlist-text p{
    margin: 0;
    padding: 0;
}
.header-text{
    width: 75%;
    border-bottom: 1px solid gray;
    margin-top: 2em;
    padding: 0;
    font-family: 'Times New Roman', Times, serif;
}
.header-text h1{
    margin: 0;
    padding: 0;
    font-weight: normal;
}
.main-text{
    width: 75%;
    margin-top: 25px;
}
.main-text a{
    text-decoration: none;
    color: #36c;
}
.main-text a:hover{
    text-decoration: underline;
}
.right{
    width: 33%;
    float: right;
    margin-left: 1em;
}
.right img{
    width: 100%;
}
.right h4{
    text-align: center;
    margin: 0;
    font-size: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.right-box{
    background: #e9e9e9; 
    border: 1px solid #b3b3b3;  
    padding: 15px;
    font-size: 0.9em;
}
.right-box img{
    max-width: 100%;
}
.right-box p{
    margin: 0;
    text-align: center;
    margin-bottom: 0.5em;
}
.table{
    width: 100%;
    margin: 0;
    line-height: 1.5em;
}
.table th{
    width: 40%;
    text-align: left;
    vertical-align: text-top;
}
.table th, .table td{
    padding: 0.25em 0;
}
.main-text h2{
    font-family: 'Times New Roman', Times, serif;
    font-weight: normal;
    font-size: 1.75em;
    display: flex;
    margin: 1em 0 0.5em 0;
    padding: 0;
    border-bottom: 1px solid gray;
}
.main-text h3{
    margin-top: 1.5em;
}
video{
    width: 100%;
    height: auto;
}
.video{
    width: 360px;
    background: #e9e9e9; 
    border: 1px solid #b3b3b3;  
    padding: 5px;
    font-size: 0.9em;
}
.divider{
    background: #c8d3e7;
    text-align: center;
    font-weight: bold;
    padding: 5px 0;
}
.larger{
    width: 40%;
}