/* Open Sans */

@font-face {
    font-family: "Open Sans";
    src: url("../Fonts/OpenSans/OpenSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans Semibold";
    src: url("../Fonts/OpenSans/OpenSans-SemiBold.ttf") format("truetype");
    font-weight: semibold;
    font-style: normal;
}

/* Roboto */

@font-face {
    font-family: "Roboto";
    src: url("../Fonts/Roboto/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto Bold";
    src: url("../Fonts/Roboto/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

:root {
    --black: #000;
    --white: #FFF;
    --text-color: #333333;
    --soft-grey: #F5F5F5;
    --light-grey: #E7E7E7;
    --mid-grey: #a8a8a8;
    --dark-grey: #626262;
    --grey: #DDDDDD;
    --cloud-grey: #f5f5f5;
    --deep-blue: #0B384D;
    --dark-blue: #072431;
    --turquoise: #34A1A6;
    --turquoise-light: #B6DCDD;
    --red: #d32f2f;
    --blue: #0b3a4e;
    --light-blue: #17A2B8;
    --light-green: #80dfe4;
    --color-my-books: #155e80;
    --color-my-school-books: #bb1719;
    --color-help: #bac019;
    --color-news: #695ba4;
    --mint: #81C784;
}

html {
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    min-height: 100%;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: normal;
}

a{
    color: var(--red);
}
a:hover,
a:focus{
    color: var(--red);
    text-decoration: underline;
}

 img{
    max-width: 100%;
    height: auto;
  }

nav.navbar {
    padding-top: 0;
    padding-bottom: 0;
}

/* Navigation */
.mainnav {
    background-color: #0B3A4E;
    padding: 0;
}

/* Keyboard Navigation Focus States */
.mainnav li.focus > a,
.mainnav a:focus-visible {
    outline: 2px solid #ffbf47;
    outline-offset: -2px;
    text-decoration: underline;
    position: relative;
    z-index: 2;
}

/* ARIA states for keyboard navigation */
/* .mainnav [aria-expanded="true"] > a {
    background-color: rgba(255, 255, 255, 0.1);
} */