@font-face {
    font-family: "Inter";
    src:
        url(/../fonts/Inter-subset.woff2) format("woff2"), 
        url(/../fonts/Inter-subset.woff) format("woff"), 
        url(/../fonts/Inter-subset.ttf) format("truetype");
        unicode-range: U+20,U+21,U+28,U+29,U+2B,U+2C,U+2E,U+31,U+32,U+39,U+3F-41,U+43,U+44,U+48,U+49,U+4C-4E,U+53,U+57,U+61-70,U+72-77,U+79,U+7A;
        font-weight: 100 800;
}

* {
   font-family: Inter, sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
}

/* TYPE SCALE*/

/* 1rem/16.00px  */
/* 1.25rem/20.00px  */
/* 1.563rem/25.00px */
/* 1.953rem/31.25px */
/* 2.441rem/39.06px */
/* 3.052rem/48.83px*/


/* COLORS */

/* black #001219 */
/* dark blue #005F73 */
/* turquoise #0A9396 */
/* light turquoise #94D2BD */
/* light yellow #E9D8A6 */
/* dark yellow #E9D8A6 */
/* orange #E9D8A6 */
/* dark orange #BB3E03 */
/* red #AE2012 */
/* dark red #9B2226 */

body,
.main,
h1,
h2,
h3 {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 3.052rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

h2 {
    font-size: 1.953rem;
    font-weight: 500;
}

h2 span {
    font-size: inherit;
}

h2 span:not(.underline) {
    font-weight: 200;
}

.underline {
    position: relative;
}

.underline::after {
    content: "";
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    height: 6px;
    background-color: #AE2012;
}

h3 {
    font-size: 1.563rem;
    font-weight: 450;
    position: relative;
    display: inline-block;
}

h3.underline::after {
    content: "";
    position: absolute;
    width: 100% ;
    height: 3px;
    left: 0;
    top: 100%;
    background-color: #94D2BD;
}

h3 span {
    font-size: inherit;
    font-weight: 300;
}

.emp {
    font-weight: 500;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    line-height: 2;
}

a,
a:visited {
    text-decoration: none;
    color: currentColor;
    transition: color 150ms ease-in;
    position: relative;
}

/* a.icon-link,
a.icon-link:visited {
    color: #001219;
} */

a:not(.icon-link)::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: currentColor;
}

a:hover,
a:focus,
a.icon-link:hover,
a.icon-link:focus {
    color: #005F73;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

.main {
    margin: 3rem 0 5rem;
    display: grid;
    grid-template-columns: 200px minmax(200px, 400px) 350px;
    grid-template-rows: auto;
    column-gap: 3rem;
    row-gap: 5rem;
    grid-template-areas:
    " logo header header"
    " . intro intro"
    " coding coding canvas"
    " . backgroundInfo backgroundInfo"
    " . contact contact";
    position: relative;
}

.main::before {
    content: "";
    position: absolute;
    top: -8rem;
    left: -7rem;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 871 1585'%3E%3Cpath fill='%230A9396' d='M101 271 203 70l569 213V76L682 0 0 879l871 550L500.833 1584.5 311 879z' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

.logo {
    grid-area: logo;
    position: relative;
}

.header {
    grid-area: header;
}

.intro {
    grid-area: intro;
}

.coding {
    grid-area: coding;
    position: relative;
}

.coding::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 350px;
    height: 350px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 514 485'%3E%3Cpath fill='%23E9D8A6' d='M70 50 327 0l124 50 63 292-142 143-302-65L0 194z' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.3;
}

.p5Canvas {
    grid-area: canvas;
}

.background {
    margin: -3rem 0 2rem 0;
    grid-area: backgroundInfo;
}

.contact {
    grid-area: contact;
    position: relative;
    color: #ffffff;
}

.contact::after {
    content: "";
    position: absolute;
    top: -5rem;
    bottom: -5rem;
    left: calc(-1 * (200px + 3rem));
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 311'%3E%3Cpath d='M13 122 116.398.17 1034 104l246-66v178l-536 95-547-55H0' fill='%23BB3E03' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.socials {
    display: flex;
    align-items: center;
    margin-top: 2rem;
}

.socials li {
    padding: 0 1rem;
}
.socials li:first-child {
    padding-left: 0;
}

.fab {
    font-size: 1.563rem;
}

.logo svg {
    width: 100%;
    max-width: 250px;
    height: auto;
}

@media only screen and (max-width: 1150px) {
    .main {
        margin: 2rem;
    }
}

@media only screen and (max-width: 900px) {
    .main {
        grid-template-columns: 100%;
        column-gap: 0;
        row-gap: 3rem;
        grid-template-areas:
            " logo "
            " header"
            " intro "
            " coding "
            " canvas "
            " backgroundInfo"
            " contact ";
    }

    .main::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 686 422'%3E%3Cpath fill='%230A9396' d='M84.111 29.81 232.042.696 494.99 148.558l142.266 79.14 48.238 193.869L534.891 309.76 487.395 71.203 26.404 207.416.81 118.514z' fill-rule='evenodd'/%3E%3C/svg%3E");
        width: 155%;
        top: -2rem;
        left: -8rem;
    }

    .header {
        position: relative;
    }

    .header::after {
        content: "";
        position: absolute;
        top: 60%;
        bottom: 0;
        left: -1rem;
        right: -1rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 334 113'%3E%3Cpath fill='%23E9D8A6' d='M0 26 318 0l16 106-293 7z' fill-rule='evenodd'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }

    span.underline:after {
        display: none;
    }

    h3.underline::after {
        height: 10px;
        top:  60%;
        z-index: -1;
    }

    .coding::after {
        top: calc(100% + 3rem);
        left: 50%;
        transform: translate(-50%);
    }

    .p5Canvas {
        justify-self: center;
    }

    .contact::after {
        left: -5rem;
        right: -5rem;
        top: -3rem;
    }

    svg {
        max-width: 175px;
    }
}

@media only screen and (max-width: 600px) {
    * {
        font-size: 12px;
    }

    svg {
        max-width: 125px;
    }
}