:root {
    --accent-font-family: 'Playfair Display', serif;
    --primary-font-family: 'Inter', sans-serif;
    --brand-color: #0E7182;
    --complementary-color: #EF874D;
    --primary-color: #222222;
    --background-color: #fafcfc;
    --background-color-accent: rgb(14, 113, 130, 0.1);
    --background-complementary-color: rgb(239, 135, 77, 0.1);
    --app-height: 100vh;
    --page-title-heigth: 0;
}

body {
    background-color: var(--background-color);
    color: var(--primary-color);
    font-family: var(--primary-font-family);
    margin: 0;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--brand-color);
}

.content-container {
    position: absolute;
    width: 100vw;
    height: var(--app-height);
} 

.page-title {
    font-family: var(--accent-font-family);
    font-size: 2.5rem;
    font-style: italic;
    width: 100vw;
    text-align: center;
    padding: 8rem 0 3rem;
}

.inner-container {
    position: absolute;
    top: var(--page-title-heigth);
    padding: 0 12rem;
    width: 100vw;
    box-sizing: border-box;
}

#first-image {
    height: 60vh; 
    float: right; 
    margin-top: 3rem;
}

@-webkit-keyframes bubble-anim {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    20% {
        -webkit-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05);
    }

    48% {
        -webkit-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9);
    }

    68% {
        -webkit-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02);
    }

    80% {
        -webkit-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98);
    }

    97%,
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bubble-anim {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    20% {
        -webkit-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05);
    }

    48% {
        -webkit-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9);
    }

    68% {
        -webkit-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02);
    }

    80% {
        -webkit-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98);
    }

    97%,
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */

    menu-component {
        z-index: 2000;
        position: absolute;
    }

    .content-container {
        left: 0;
        width: 100vw;
    }

    .page-title {
        font-size: 1.7rem;
        width: 100%;
        padding: 5rem 0 2.5rem;
        left: 0;
    }

    .inner-container {
        padding: 0 1rem;
    }

    #first-image {
        display: block;
        margin: 4rem auto;
        width: 60%;
        margin-top: 0;
        height: auto;
        float: none;
    }
}

@media only screen and (max-width: 768px) and (orientation:landscape) { 
    .page-title {
        position: absolute;
    }
}