@font-face {
    font-display: swap;
    font-family: 'CartoGothicStd-Book';
    src:url('/fonts/CartoGothicStd-Book.ttf.woff') format('woff'),
        url('/fonts/CartoGothicStd-Book.ttf.svg#CartoGothicStd-Book') format('svg'),
        url('/fonts/CartoGothicStd-Book.ttf.eot'),
        url('/fonts/CartoGothicStd-Book.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #383838;
    color: #dddddd;
    padding: 1rem;
}


h1, h2, h3, h4, h5, h6 {
    font-family: Calibri, sans-serif;
    text-align: center;
}

nav.primary {
    padding: 0 1rem;
}

nav .nav-item {
    color: #63F2F2;
    display: block;
    font-family: "CartoGothicStd-Book";
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 3px;
    padding: 0.7rem 1rem;
    text-transform: uppercase;
    text-decoration: none;
}

nav .active .nav-item {
    color: #dddddd;
}

.callout {
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

.callout.alert {
    background-color: #dE2b2b;
    color: #fff;
}

.callout.success {
    background-color: #77dd77;
    color: #383838;
}

.callout.warning {
    background-color: #FDFD96;
    color: #383838;
}

a, a:visited {
    color: #63F2F2;
    transition-property: color;
    transition-duration: 0.2s;
}

a:hover, a:active {
    color: #fff;
}

.button {
    background-color: #23eceb;
    border-radius: 4px;
    color: #000;
    font-family: "CartoGothicStd-Book";
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.button:hover, .button:active {
    color: #383838;
    background-color: #fff;
}



#page-home #hero {
    display: block;
    margin: 3rem auto 0;
}

#page-home h1 {
    font-size: 6rem;
    margin-bottom: 1rem;
    margin-top: 0;
    text-align: center;
}

#page-home h2 {
    font-size: 2rem;
    margin-top: 0;
}

main {
    font-family: Manrope, sans-serif;
}

main form label {
    color: #dddddd;
}

[type=color],
[type=date],
[type=datetime-local],
[type=datetime],
[type=email], [type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
textarea {
    background-color: #dddddd;
    border-radius: 4px;
    color: #383838;
    font-weight: bold;
}

main form button[type=submit] {
    display: block;
    margin: 1rem auto;
}

.required:after {
    content:" *";
    color: #f00;
}

.affirmation-container #affirmation {
    margin-bottom: 0.5rem;
}

.affirmation-container label {
    display: inline;
}

@media (max-width: 720px) {
    
    #page-home h1 {
        font-size: 4rem;
    }
    
    #page-home h2 {
        font-size: 1rem;
    }

    #page-home #hero {
        width: 72%;
    }
  }