@font-face {
    font-family: SFProDisplay;
    src: url('./fonts/SF-Pro-Display-Regular.woff');
}

@font-face {
    font-family: SFProDisplay;
    src: url('./fonts/SF-Pro-Display-Bold.woff');
    font-weight: bold;
}

/*for mobile, tablet and desktop we are mainly changing the margins and padding*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 728px) {

    .header{
        padding: 24px 16px;
    }
    img.usf-logo{
        width: 41px;
        height: 40px;
    }
    .topnavcontainer{
        padding-left: 16px;
    }
    h3 {
        margin: 24px 0px 0px 16px;
    }
    h6.first{
        margin: 24px 0px 0px 16px;
    }
    h6{
        margin: 24px 0px 0px 16px;
    }
    p{
        margin: 8px 16px 0px 16px;
    }
    p.last{
        padding-bottom: 40px;
    }
    ul{
        margin: 8px 16px 0px 16px;
    }
    ol{
        margin: 8px 16px 0px 16px; 
    }
    table {
        margin: 8px 16px 0px 16px;
    }
    footer{
        display: none;
    }
    #TopButton{
        width: 50px;
        height: 50px;
        position: fixed; /* Fixed/sticky position */
        bottom: 20px; /* Place the button at the bottom of the page */
        right: 30px; /* Place the button 30px from the right */
        z-index: 99; /* Make sure it does not overlap */
        cursor: pointer; /* Add a mouse pointer on hover */
    }
}

@media only screen
and (min-device-width : 728px)
and (max-device-width : 1200px) {
    .header{
        padding: 24px 20px;
    }
    img.usf-logo{
        width: 41px;
        height: 40px;
    }

    .topnavcontainer{ 
        padding-left: 20px;
    }
    h3 {
        margin: 24px 0px 0px 20px;
    }
    h6.first{
        margin: 24px 0px 0px 20px;
    }
    h6{
        margin: 24px 0px 0px 20px;
    }
    p{
        margin: 8px 20px 0px 20px;
    }
    table {
        margin: 8px 20px 0px 20px;
    }
    p.last{
        padding-bottom: 40px;
    }
    ul{
        margin: 8px 20px 0px 20px;
    }
    ol{
        margin: 8px 20px 0px 20px; 
    }
    footer{
        display: none;
    }
    #TopButton{
        width: 50px;
        height: 50px;
        position: fixed; /* Fixed/sticky position */
        bottom: 20px; /* Place the button at the bottom of the page */
        right: 30px; /* Place the button 30px from the right */
        z-index: 99; /* Make sure it does not overlap */
        cursor: pointer; /* Add a mouse pointer on hover */
    }
}

@media only screen 
and (min-device-width : 1200px){
    .header{
        padding: 40px 120px;
    }

    img.usf-logo{
        width: 6.5rem;
        height: 6.25rem;
    }

    .topnavcontainer{
        padding-left: 120px;
    }

    h3{
        margin: 40px 0px 0px 120px;
    }

    h6.first{
        margin: 40px 0px 0px 120px;
    }

    h6{
        margin: 32px 0px 0px 120px;
    }

    p{
        margin: 8px 120px 0px 120px;
    }
    table {
        margin: 8px 120px 0px 120px;
    }

    ul{
        margin: 8px 120px 0px 120px;
    }

    ol{
        margin: 8px 120px 0px 120px; 
    }

    #TopButton{
        display: none; /* Hidden by default */
    }
}

/*top header container*/
.header{
    height: auto;
    box-shadow: 0 5px 2.5px -2.5px rgba(47, 47, 47, 0.15);
    background-color: #fff;
}

/*logo inside of header*/
img.usf-logo{
    flex-grow: 0;
    object-fit: contain;
}

/*turns off nav scrollbar for safari and chrome*/
.topnavbar::-webkit-scrollbar{ 
    display: none;  /* Safari and Chrome */
}

/*top navigation bar!*/
.topnavbar{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: auto;
    margin-top: 2px;
    padding-top: 1rem;
    height: 2.25rem;
    background-color: #ffffff;
    box-shadow: 0 5px 2.5px -2.5px rgba(47, 47, 47, 0.15); 
}

/*container within the nav bar. padding-left changed above for mobile, tablet and desktop*/
.topnavcontainer{
    background-color: #ffffff;
}

/*styles for the links inside the nav bar*/
.topnavbar a {
    font-family: SFProDisplay;
    font-weight: bold;
    font-size: 1rem;
    margin-right: 1.75rem;
    color: #2f2f2f;
    text-decoration: none;
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 6px solid transparent;
}

/*puts a solid green line below the active link in the nav bar*/
.topnavbar a.active {
    border-bottom: 6px solid #56821f;
}

body{
    background-color: #f6f6f6;
}

h3{
    height: auto;
    font-family: Oswald;
    font-size: 3rem;
    font-weight: bold;
    text-align: left;
    line-height: 1.2;
    color: #000;
}

sup{
    font-size: 50%;
    line-height: -50px;
}

/*this was a "return to site" button. keeping this here in case we need to re-enable*/
/*button {
    float: right;
    flex: 1;
    border: none;
    width: 8.75rem;
    height: 2rem;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 32px;
    background-color: #56821f;
    font-family: SFProDisplay;
    font-size: 0.875rem;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    text-align: center;
    color: #fff;
    margin: 53px 120px 40px 0px;
}
*/

/*second part of the "return to site button"*/
/*img.Icon-Arrow-Left {
  width: 1.25rem;
  height: 1.25rem;
  flex-grow: 0;
  object-fit: contain;
}
*/

/*if h6 is the first element on the page (after h3) we need to clear the padding*/
h6.first{
    clear: both;
}

/*same with the first paragraph*/
p.first{
    clear: both;
}

h6{
    clear: both;
    font-family: SFProDisplay;
    font-size: 1.5rem;
    font-weight: bold;
}

p{
    font-family: SFProDisplay;
    font-size: 1rem;
}

ul{
    font-family: SFProDisplay;
    font-size: 1rem;
}

ol{
    font-family: SFProDisplay;
    font-size: 1rem;   
}


footer{
    box-shadow: 0 -1px 0 0 #dadada;
    background-color: #ffffff;
}

footer h6{
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 12px;
    align: left;
}

footer ul{
    list-style-type: none;
    padding-left: 0px;
    paddig-right: 0px;
    padding-top: 0px;
    padding-bottom: 12px;
    margin: 0px;
}

footer li{
    font-family: SFProDisplay;
    font-size: 16px;
    line-height: 1.6rem;
}

.footer_container{
    margin-top: 100px;
    display: flex;
    flex-direction: row;
}

/*the first horizontal section inside the footer, aligned vertically*/
.footer_logocontainer1{
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
    background-color: white;
    margin-top: 72px;
}

.footer_logocontainer2{
    flex-grow: 3;
    padding-left: 120px;
}

.footer_listcontainer2{
    display: flex;
    flex-direction: row;
    color: #2f2f2f;
}

.footer_listcontainer3{
    flex-grow: 1;
}

.footer_listcontainer3 a{
    text-decoration: none;
    color: #2f2f2f;
}

.social_links{
    flex-grow: 1;
}

/*defines the style of the social image links*/
.social_links img{
    height: 22px;
    width: 22px;
    padding-right: 29px;
    padding-bottom: 12px;
}

/*the first horizontal section inside the footer, aligned vertically*/
.footer_listcontainer{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    flex-grow: 2;
    background-color: white;
    font-family: SFProDisplay;
    font-size: 14px;
    margin-top: 72px;
}

.footer_legallinks a{
    color: #56821f;
    text-decoration: none;
}

/*the first horizontal section inside the footer, aligned vertically*/
.footer_copyright{
    background-color: white;
    font-size: 12px;
    font-family: SFProDisplay;
    color: #767676;
    padding-top: 4px;
    padding-bottom: 72px;
}