/* This stylesheet is for both index.html and index-guest.html */

/* general (index.html & index-guest.html) */

body {
    background-color: #ffffff;
    margin: 0;
}

a {
    text-decoration: none;
}

.text{
    font-family: 'Poppins';
}

/* popup (index.html) */

.popup{
    display: flex;
    justify-content: center;
    width: min-content;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px 40px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    text-align: center;
    color: #004A98;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1000;
}

.popup-title {
    font-size: 3.5vh;
}

.popup-text-container {
    /* padding: 0% 10%; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
}

.popup-title-area {
    display: flex;
    flex-direction: row;
}

.popup a{
    display: block;
    width: 45vh;
    /* height: 30px; */
    line-height: 5vh;
    position: relative;
    margin: 10px auto;
    text-align: center;
    border-radius: 50px;
    border: solid 1px #004A98;
    color: #004A98;
    font-size: 3vh;
    /* font-size: 20px; */
}

.saag:hover {
    color: #fff;
    border-color: #004A98;
    background-color: #004A98;
}

.mascot-image { 
    height: 10vh;
}

/* background (index.html) */

#banner-image {
    height: 100vh;
    width: 100%;
    object-fit: fill;
}

#over-photo-container {
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#title-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#smaller-title-container {
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

#sayre {
    font-size: 13vh;
    margin-bottom: 0%;
}

#resource-hub {
    margin-top: 0%;
    font-size: 6vh;
}

#info {
    height: 50vh;
}



/* header for logo & main page navigation (index-guest.html) */

#top-header-container {
    display: flex;
    height: 6vh;
    background-color: #EFCE33;
}

.top-header-small-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.top-header-small-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.top-header-small-container:hover .home{
    color:#E61E26;
}

.top-header-small-container:hover .mascot{
    border:solid 2px #E61E26;
}

.home {
    margin: 0;
    margin-left: 3vh;
    color: #fff;
    line-height: 6vh;
    font-size: 3vh;
}

.mascot-container{
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.mascot {
    background-color: #fff;
    border-radius: 100%;
    padding: 15%;
    border: solid 2px #EFCE33;
}

.mascot-image-guest {
    height: 6vh;
}


/* Landing page boxes (index-guest.html) */

#general-body-container {
    display: flex;
    justify-content: center;
}

#boxes-container {
    height: 90vh;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.box-text {
    margin: 0%;
}

.box-quarter {
    height: 90vh;
    width: 25%;
    display: flex;
    flex-wrap: wrap;
    margin: 0%;
    flex-direction: column;
    justify-content: flex-end;
}

.box {
    border-radius: 10px;
    margin: 5px
}

.image {
    border-radius: 10px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.box-text {
    font-size: medium;
    padding: 8px;
}

.box-1 {
    height: 90%;
    background-color: #EFCE33;
    color: black;
}

#box-1-text-1 {
    margin-top: 20%;
    text-align: center;
}

#box-1-text-2 {
    font-size: small;
}

#outside-box-text {
    padding-left: 23%;
    position: absolute;
    font-size: medium;
    margin-bottom: 0%;
    margin-top: 5%;    
}

.box-2-7 {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;  
}

.box-2{
    background-color: #FA5300;
    color: #fff;
}

.box-3-4 {
    background-color: #E8E8E1;
    color: black;
}

.box-2-5 {
    height: 40%
}

.box-5 {
    background-color: #3275C4;
    color: #fff;
}

.box-6 {
    height: 20%;
    background-color: #E61E26;
    color: #fff;
}

.box-7 {
    height: 60%;
    background-color: #000;
    color: #fff;
}

.box-2-7:hover {
    background-color: #a7a097;
}