@font-face {
  font-family: "Karla";
  src: url('../fonts/Karla/Karla-Italic-VariableFont_wght.ttf') format('woff2');
}

@font-face {
  font-family: "Space_Mono";
  src: url('../fonts/Space_Mono/SpaceMono-Regular.ttf') format('woff2');
}

@font-face {
  font-family: "W95FA";
  src: url('../fonts/W95FA/w95fa.woff2') format('woff2');
}


html {font-size: 14px;}

body {
  font-family: "W95FA", arial;
  font-weight: false;
  line-height: 1.65;
}

p, a {
  font-size: 1.3em;
  font-family: "W95FA", arial;
}

h1,
h2,
h3 {
  font-family: 'Space_Mono', verdana;
  font-weight: true;
  line-height: 1.15;
}

h4,
h5, 
h6 {
  font-family: 'W95FA', arial;
  font-weight: true;
  line-height: 1.15;
}

h1,
.text-size-h1 {
  font-family: 'Space_Mono', verdana;
  font-weight: 700;
  margin-top: 0;
  font-size: 3.05em;
}

h2,
.text-size-h2 { font-size: 2.44em; }

h3,
.text-size-h3 { font-size: 1.95em; }

h4,
.text-size-h4 { font-size: 1.56em; }

h5,
.text-size-h5 { font-size: 1.25em; }

.text-caption { font-size: 0.8em; }

small,
.text-small {
  font-size: 0.64em;
}

p, a {
    font-family: "W95FA", arial;
}

body {
    background-image: url("../img/bg.gif");
    background-color:#d9dfec;
}

.grid {
    display: flex;
    grid-template-columns: auto auto auto;
    padding: 10px;
    justify-content: center;
    margin: 0px;
    max-width:400px;
}

.content {
    max-width: 800px;
    margin: 0px auto;
    background-color:#b5c1d9;
    padding: 10px;
    margin-top:80px;
}

.box {
    border-color:#2617a7;
    background-color: rgb(103, 121, 162);
    border:1px solid;
    margin: 0px 0px 10px 0px;
}

.boxbar {
    text-align:left;
    background-color:rgb(25, 66, 178);
    padding-left: 6.5px;
}

.boxbar h2 {
    margin: 0px;
    color:#d9dfec
}

.grid-item {
    flex-shrink:1;
    background-color: #d2d2e9;
    border: 0px solid black;
    padding: 10px;
    margin: 5px 10px;
    text-align: center;
    width: 200px;
    min-width: 100px;
    max-height: 700px;
    animation-name: unhoverGrid;
    animation-duration: 0.1s;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

.grid-item:hover {
    animation-name: hoverGrid;
    animation-duration: 0.1s;
    width:300px;
    background-color: #f6f9ff;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.image-container {
    width: fit-content(100%);
    overflow: hidden;
    object-fit:contain;
    align-content:center;
    border-radius:3%;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    background-position: right;
    display:flex;
    justify-content: center;
}

.image-container img {
    max-height: 300px;
}

.captioned-header {
    text-align:left;
    background-color:rgb(25, 66, 178);
    padding-left: 6.5px;
}

.captioned-header h2,
.captioned-header h3,
.captioned-header h4,
.captioned-header h5,
.captioned-header h6 {
    margin: 0px;
    color:#d9dfec
}

.captioned-img {
    background-color: #f6f9ff;
    width:min-content;
    padding:5px;
    margin:10px;
}

.captioned-img img {
    max-height:500px;
}

.grid-item p {
    font-weight: 600;
}

.nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content:space-between
}

.nav-sub {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content:space-between;
    max-width: 800px;
    width: 600px;
    position: fixed;
    left:300px;
    top:18px;
}

.nav-item {
    margin:10px;
    padding:0px 0px;
    align-items: top;
    align-content: center;
    justify-content: center;
    position: relative;
    display: flex;
    height: 20px;
    background-color:#8e96e9;
    flex: 1 1 100px;
    /* animation */
    animation-name: unhoverNav;
    animation-duration: 0.1s;
}

.nav-item a {
    font-family: "W95FA", arial;
}

.nav-sub .nav-item {
    flex: 1 1 60px;
}

.nav-item:hover {
    animation-name: hoverNav;
    animation-duration: 0.1s;
    flex-grow: 1.2; 
    background-color:#ddc5ff
}

@keyframes hoverNav {
    from {flex-grow: 1.0; background-color:#fff4fe;}
    to {flex-grow: 1.2; background-color:#ddc5ff;}
}

@keyframes unhoverNav {
    from {flex-grow: 1.2; background-color:#ddc5ff;}
    to {flex-grow: 1; background-color:#8e96e9;}
}

@keyframes hoverGrid {
    from {width: 200px; background-color: #d2d2e9; clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);}
    to {width: 300px; background-color: #f6f9ff; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

@keyframes unhoverGrid {
    from {width: 300px; background-color: #f6f9ff; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    to {width: 200px; background-color: #d2d2e9; clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);}
}

thead {
    font-family: "W95FA", arial;
    font-weight: 600;
    border: 1px solid #0b006c;
}

thead tr {
    background-color: rgb(96, 131, 255);
    border: 1px solid #0b006c;
}

tr {
    background-color:rgb(221, 238, 246);
}

td {
    padding: 0px 30px 0px 5px;
    font-family: "Karla", arial;
}

.table {
    font-size: 1.2em;
}

.banner {
    position:fixed;
    width:100%;
    overflow:visible;
    height:75px;
    top:0px;
    background-image: linear-gradient(#1850d3, #473c74);
    align-content: left;
}

.banner-gif {
    height:60px;
    margin-left: 10px;
    margin-top:10px;
}

.title h1 {
    font-weight: 900;
    margin-left: 10px;
    margin-top:10px;
    width: 200px;
}

.banner .title {
    position:fixed;
}

.header {
    position:relative;
    width:auto;
    height:170px;
    background-image: linear-gradient(#1850d3, #473c74);
    margin-bottom:10px;
}

.title {
    color:#d6bbff;
}