:root{
    --black: #333333;
    --white: #F7F7F7;
    --blue: #003C69;
    --red: #EA463A;
    --header-font: "Noto Serif", sans-serif;
    --main-font: "Montserrat", sans-serif;
}

.holder{
    height:100vh;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    padding:25px;
    align-items: center;
    background-size:cover;
    background-position: center;
    position:relative;
}



.holder::after{
    content:"";
    background:rgba(255,255,255, 0.9);
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:0;
    border: 10px solid var(--blue);
}

@media(max-width:420px) {
    .holder::after{
        border: 5px solid var(--blue);
    }
}


body{
    font-family:var(--main-font);
    background:var(--white);
    color:var(--black);
}

header,main,footer{
    position:relative;
    z-index:10;
}

header img{
    max-width:80%;
    height:auto;
    margin:0 auto;
    display:block;
}

main .content-holder{
    text-align:center;
    position:relative;
    padding:25px 0;
}

main .content-holder h1{
    text-transform:uppercase;
    font-weight:700;
    color:var(--blue);
    font-family:var(--header-font);
}

@media(max-width:420px) {
    main .content-holder h1{
        font-size:32px;
    }
}

main .content-holder h2{
    text-transform:uppercase;
}

@media(max-width:420px) {
    main .content-holder h2{
        font-size:24px;
    }
}


main .content-holder .cta a{
    margin-top:1rem;
    background:var(--red);
    color:var(--white);
    display:inline-block;
    border-radius:27px;
    padding:10px 30px;
    text-transform:uppercase;
    font-weight:700;
    font-size:1.5rem;
    text-align:center;
    max-width:100%;
    transition:0.3s;
}

main .content-holder .cta a:hover{
    text-decoration:none;
    opacity:0.8;
}