@font-face {
    font-family: lexend;
    src: url('../styles/fonts/Lexend-VariableFont_wght.ttf');
}

body{
    font-family: lexend;
}

.img-logo-hsu{
    width: 5em;
}

h3{
    text-wrap: nowrap;
}

.access-link{
    text-decoration: none;
    border-bottom: 4px solid transparent;
    color: black;
}

.access-link:hover{
    color: #0069b4;
}

.access-link:hover h3{
    border-bottom: none;
}

.access-link h3{
    border-bottom: 4px solid transparent;
}

.access-link:hover h3::after{
    display: block;
    content: "";
    border-bottom: 4px solid #0069b4;
    border-radius: 5px;
}

i{
    font-size: 1.5em;
}

.i-list{
    font-size: 2.8em !important;
}

.bg-blue, .bg-primary{
    background-color: #0069b4 !important;
}

.gpa-decorator-line {
    display: block;
    height: 0.5rem;
    border-style: none;
    background-color: #0069b4;
    box-shadow: inset 32px 0px 0 #ffe55d;
}

hr{
    opacity: 100% !important;
}

.bg-grey{
    background-color: #f3f7f9;
}

.bg-logo-mdsca{
    background-color: #ffdb00;
}

.color-black{
    color: #5C7073;
}

.color-blue{
    color: #0069b4;
}

.color-yellow{
    color: #FBE767;
}

.logo{
    min-height: 32px;
    max-height: 80px;
}

.logo-footer-1{
    width: 26%;
}

.logo-footer-2{
    width: 25%;
    padding: 1%;
}

.logo-footer-3{
    width: 26%;
}

.logo-footer-4{
    width: 18%;
}

@media (max-width: 768px){
    .logo-footer-1{
        width: 52%;
    }
    
    .logo-footer-2{
        width: 50%;
        padding: 2%;
    }
    
    .logo-footer-3{
        width: 50%;
    }
    
    .logo-footer-4{
        width: 35%;
    }
}

@media (max-width: 1200px){
    .logo-footer{
        max-height: 50px;
    }
}

@media (max-width: 767px){
    .logo-footer{
        max-height: 50px;
    }
}

ul{
    list-style: none;
}

@media (min-width: 767px) and (max-width: 834px){
    h3{
        text-wrap: wrap;
    }
}

@media (max-width: 490px){

    .logo{
        min-height: 32px;
    }

    h3{
        font-size: larger;
    }
    
    h5{
        font-size: medium;
    }

    i, .access-link i{
        font-size: 2.1em !important;
    }

    footer p, footer a{
        font-size: smaller;
    }
}