@charset "utf-8";
/* CSS Document */
* { margin:0; padding:0;}
:root {--item-bg: rgba(0,0,0, 0.5); --link-color: #73b0ec;}

body { /*unstyled text and content will use this*/
    background-image: url('hero.svg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: top right; 
    background-size: cover;
    background-color: rgb(10, 58, 107);
    margin-top: 3rem;
    margin-left: clamp(1rem,3%,3rem);
    margin-right: clamp(1rem,3%,3rem);
    margin-bottom: 3rem;
    font-size: 0.8rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    line-height: 1.5;
}

li {list-style: none; padding-bottom: 0.25rem;}

img {
    margin-bottom: 1rem;
    width: 100%;
    max-width: 56rem;
}

p {
    max-width: 46rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    line-height: 1.5;
}

a {text-decoration: none; color: var(--link-color);}
a:hover {color:#ffffff;}
.current-page {color: white; pointer-events: none;}

.sitetitle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
    hyphens: none;
    color: #ffffff;
    font-weight:900;
}
.sitetitle--placeholder {min-height: 10rem; opacity: 0;}

.subtitle{ 
    font-family: Arial, Helvetica, sans-serif;
    font-size:0.8rem;
    color: #ffffff;
    font-weight:900;
}

.navbar, .sub-navbar {
    display: flex;
    gap: clamp(1%, 5%, 5%);
    max-width: 38rem;
    justify-content: left;
    margin-bottom: .5rem;
    list-style: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
}

/* <hr class="separator"> horiz row uses this style */
.separator {
    border: 0px;
    height: 1px;
    background-color: #ffffff;
    width: 100%;
    max-width: 56rem;
    margin: 0 0 0.8rem 0;
}

.caption {
    font-size: 0.8rem;
    margin-top: -.5rem;
}

/*various grid classes, the general class controls the outline of grid, the >li controls items within*/
.grid-4col {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1fr;
    max-width: 56rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    background-color: var(--item-bg);
}

.grid-4col li {
    display: flex;
    align-items: center;
    white-space: normal;
    margin: 0.25rem;
    margin-bottom: 0rem;
}

.grid-loca {
    display: grid;
    grid-template-columns: 1fr 0fr 1.5fr 1fr 1fr;
    max-width: 56rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    background-color: var(--item-bg);
}

.grid-loca li {
    display: flex;
    align-items: center;
    white-space: normal;
    margin: 0.25rem;
    margin-bottom: 0rem;
}

.grid-awards {
    display: grid;
    grid-template-columns:  minmax(3rem,.5fr) 2fr minmax(4.5rem,.5fr) 2fr;
    max-width: 56rem;
    margin-bottom: 1rem;
    background-color: var(--item-bg);
}

.grid-awards li {
    display: flex;
    align-items: center;
    white-space: normal;
    margin: 0.25rem;
    margin-bottom: 0.5rem;
}

.grid-arcontest-testing {
    display: grid;
    grid-template-columns: 7rem 1fr;
    max-width: 56rem;
    margin-bottom: 0.5rem;}
.grid-arcontest-testing li {
    display: flex;
    align-items: center;
    white-space: normal;
    margin: 0.25rem;
    border-bottom: 1px solid grey;}
.grid-arcontest-testing li:empty{border-bottom: none;}
.grid-arcontest-testing li:nth-last-child(-n+2) {border-bottom: none;}

.grid-arcontest-proj {
    display: grid;
    grid-template-columns: 4fr 1.5fr 0.75fr;
    max-width: 56rem;
    margin-bottom: 0.5rem;}
.grid-arcontest-proj li {
    display: flex;
    align-items: center;
    white-space: normal;
    margin: 0.25rem;
    margin-top: 0;}
.grid-arcontest-proj li:empty{border-bottom: none;}

.pop-list {
    display: grid;
    grid-template-columns: 9rem 0;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.pop-list-words li {cursor: pointer; color: var(--link-color); padding: 0.25rem;}
.pop-list-words li:hover {color: white}
.pop-list-words li.is-active {color: white; background-color: var(--item-bg);}
/*these control open pop-list-info column*/
.pop-list.has-pop-list-info {grid-template-columns: 9rem minmax(19rem, 40rem)}
.pop-list-info {overflow: hidden;}
.pop-list.has-pop-list-info .pop-list-info {padding: 0.25rem; padding-left: 0.5rem; padding-right: 1rem; background-color: var(--item-bg);}

.grid-resize { /*resizeable front page grid with hover effects*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    max-width: 56rem;
    gap: 5px;
}

/*items in the resizeable list*/
.grid-resize li {
    position: relative; 
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
    aspect-ratio: 3 / 2;
}

/*text container for styling the tooltip*/
.grid-resize li span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    transition: .3s ease-in-out;
    width: 90%;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}

.grid-resize li img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease-in-out;
    display: block;
}

/* HOVER EFFECTS */
.grid-resize li:hover img {transform: scale(1.2); filter: grayscale(50%) brightness(50%);}
.grid-resize li:hover span {opacity: 1;}


/*THESE ARE REMNANT STYLES THAT MAY HAVE DEPENDENTS I CANT FIND WHERE THEY GET USED ON THE SITE*/
/*
h1 { font-family: Arial, Helvetica, sans-serif; font-size:40px; color: #222; text-decoration:none; font-weight:normal;}
h2 { font-family: Arial, Helvetica, sans-serif; font-size:19px; color: #222; text-decoration:none; font-weight:normal;}
h3 { font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#212121; text-decoration:none; font-weight:normal;}

.f_left { float:left;}
.f_right { float:right;}
.clear {height:0 !important; clear: both !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden; float:none !important;}

.main { width: 974px; height:auto; margin:0 auto;}
.main_bg { width: 974px; height:auto; background:url(images/main_bg_mid.jpg) repeat-y; margin-top:98px;}
.main_top { width:974px; height:30px; background:url(images/main_bg_top.jpg) no-repeat; overflow:hidden;}
.main_bot { width:974px; height:32px; background:url(images/main_bg_bot.jpg) no-repeat; overflow:hidden;}

.content { width:954px; margin-left:20px;}
.header { width:935px; height:288px; background: url(images/header_bg.jpg) no-repeat; position:relative;} 
.header a { display:block; width:74px; height:42px; padding-left:24px; padding-top:8px; font-family: Arial, Helvetica, sans-serif; font-size:48px; color:#1189cc; text-decoration: none; font-weight: normal; }
.header_img { padding-right: 124px; margin-top:9px; width:202px; height:225px;}

.box{ width:935px; background:url(images/box_mid.jpg) repeat-y; margin-top: 19px;}
.box_top { width:935px; height:10px; background:url(images/box_top.jpg) no-repeat;}
.box_bot { width:935px; height:10px; background:url(images/box_bot.jpg) no-repeat;}

.box_cont { width:281px; float:left;}
.box_cont h3{ padding-top:19px;}
.box_cont p{ padding-top:5px;}

.footer { width:974px; height:70px;}
.footer p{ font-family: Arial, Helvetica, sans-serif; font-size:11px; color:#99999d; text-decoration: none; font-weight: normal; padding-top:33px;}
*/