/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v24-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/lato-v24-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v24-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/lato-v24-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v24-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/lato-v24-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/lato-v24-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/lato-v24-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

body {
        color: #fff;
        height: 100vh;
        background-image: url("/img/umk-background.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1rem;
        letter-spacing: 0.1px;
        text-rendering: optimizeLegibility;
        line-height: 150%;
        margin: 0;
    }
    h1 {
        font-weight: 900;
        letter-spacing: 0.5px;
        text-rendering: optimizeLegibility;
        line-height: 120%;


    }
    h2 { 
        color: rgb(0, 167, 92, 1.0);
        font-weight: 700;
        font-size: 1.2em;
        text-rendering: optimizeLegibility; 
        line-height: 150%;
    }

    #brand {
        width: 311px;
        height: 100px;
        background-image: url("/img/umk-logo.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        right: 5rem;
        z-index: -100;
    }

    #page{
        
        width: 60%;
        margin: 0 auto;
        padding: 0;
    }
    
    #header{
        padding: 4rem 0 0 0;
        text-align: left;
        width: calc(50% + 6rem);
        min-width: calc(450px + 6rem);
        max-width: 700px;
        margin: 0 auto;
        margin-bottom: 3rem;
    }

    #header h1 {
        width: 80%;
    }
    
    .header{ 
        background-color: transparent; color: #FFFFFF; 
    }
    
    #content, #footer {
        width: 50%;
        max-width: 600px;
        min-width: 450px;
        margin: 0 auto;
        margin-bottom: 3rem;
        padding: 1.5rem 3rem;
        color: #000;
        background-color: rgba(255, 255, 255, 1.0);
        z-index: 100;
    }
    
    #footer {
        text-align: left;
    }
    #footer a, a {
        color: rgb(0, 167, 92, 1.0);
        text-decoration: none;
    }

@media only screen and (max-width: 900px) {
    #page, #content, #footer  { 
        width: 80%;
        min-width: 320px;
        margin: 0 auto;
    }
    #header {
        width: calc(80% + 6rem);
        min-width: calc(320px + 6rem);
        margin: 0 auto;
        margin-bottom: 3rem; 
    }
    #brand {
        margin: 0 auto;
    }
}