@font-face {
    font-family: 'Good Sans';
    src: url('GoodSans-Medium.woff2') format('woff2'),
        url('GoodSans-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* @link https://utopia.fyi/type/calculator?c=320,24,1.2,2560,78,1.25,0,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    /* Step 0: 24px → 78px */
    --step-0: clamp(1.5rem, -0.0905rem + 3.1034vi, 4.875rem);
}

body {
    background-color: #79A9BE;
    color: black;
    font-family: 'Good Sans', sans-serif;
    font-size: var(--step-0);
    line-height: 1.33;
    margin: 0;
    padding: 20px;

    @media screen and (min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(15, 1fr);
        gap: 14px;
        padding: 36px;
        line-height: 1.25;
    }

    @media screen and (min-width: 1280px) {
        gap: 20px;
        padding: 40px;
    }
}

/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

a {
    color: currentColor;
    text-decoration: none;
    white-space: pre;
}

a:visited {
    color: currentColor;
}

p {
    margin: 0;
    margin-bottom: 1em;
}

.header {
    @media screen and (min-width: 768px) {
        display: grid;
        grid-column: 1/-1;
        grid-template-columns: subgrid;
        gap: 14px;
        margin-bottom: 7.25em;
    }

    @media screen and (min-width: 1280px) {
        gap: 20px;
    }
}

.details {
    @media screen and (min-width: 768px) {
        grid-column: 1/-1;
        grid-column: 10/16;
    }

    a {
        display: block;
    }
}


.logo {
    @media screen and (max-width: 768px) {
        margin-bottom: 7.25em;
    }

    @media screen and (min-width: 768px) {
        grid-column: 1/7;
    }
}

.tagline {
    @media screen and (max-width: 768px) {
        margin-bottom: 3.33em;
    }

    @media screen and (min-width: 768px) {
        grid-column: 10/16;
        margin-top: auto;
    }

}

.about {
    @media screen and (max-width: 768px) {
        margin-bottom: 3.33em;
    }

    @media screen and (min-width: 768px) {
        grid-column: 1/8;
    }
}

.contact {
    margin-bottom: 1em;
}

img {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    padding-right: 74px;

    @media screen and (min-width: 768px) {
        padding-right: 27px;
    }

    @media screen and (min-width: 1920px) {
        padding-right: 91px;
    }

    @media screen and (min-width: 2560px) {
        padding-right: 22px;
    }
}