:root {
    --bg-blue: rgb(52, 152, 219);
    --light-yellow: rgb(252, 208, 5);
    --dark-yellow: rgb(255, 141, 4);
}
@font-face {
    font-family: Montserrat;
    src: url('../fonts/montserrat.ttf');
}
.font-24 {
    font-size: 24px;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
}
html, body {
    height: 100%;
}
body {
    position: relative;
    background: var(--bg-blue);
    padding: 90px;
}
.background-image-wrapper {
    position: absolute;
    display: flex;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 65%;
    z-index: 2;
}
.background-image-wrapper img {
    display: block;
    margin-left: auto;
    margin-top: auto;
    max-height: 100%;
    max-width: 100%;
}

.logo-wrapper {
    display: flex;
    align-items: center;
}
.logo {
    max-width: 95px;
    max-height: 95px;
}
.logo svg {
    width: 100%;
    height: 100%;
}
.logo-text {
    position: relative;
    cursor: default;
    margin-left: 20px;
    font-size: 36px;
    font-variant: all-petite-caps;
    font-weight: bold;
    letter-spacing: 5px;
    /*color fallback*/
    color: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(-46deg, white 45%, var(--light-yellow), white 50% );
    background-size: 400% 400%;
    animation: gradient 10s ease-in-out 2.3s infinite;
}
@keyframes gradient {
    0% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 0 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

.email-wrapper {
    position: absolute;
    left: 90px;
    bottom: 90px;
}
.address {
    font-size: 20px;
}
.address a {
    transition: all linear .2s;
    cursor: pointer;
    text-decoration: none;
    color: white;
}
.address a:hover {
    color: var(--dark-yellow);
}
.copyright {
    cursor: default;
    font-size: 12px;
    font-weight: bold;
    color: white;
}