/* 

BREAKPOINTS

320px for smallest phones
360 px for most common phones
390 px for most common phones
420px for portrait phones
768px for tablets
992px for larger tablets
1024px for weird resolutions
1200px for large devices
1366px for most common laptop monitors
1600px for large laptops
1920px for most common monitors
2560px for iMacs

*/


/* FONTS */

@font-face {
    font-family: "Noto Sans";
    src: url("../assets/NotoSans.woff2") format("woff2"), sans-serif;
    font-display: swap;
    unicode-range: U+20-21, U+24-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+C1, U+C9,
        U+CD, U+D3, U+DA, U+DD, U+E1, U+E9, U+ED, U+F3, U+FA, U+FD, U+10C-10F,
        U+11A-11B, U+147-148, U+158-159, U+160-161, U+164-165, U+16E-16F, U+17D-17E,
        U+2010-2011, U+2013, U+2018, U+201A, U+201C, U+201E, U+2026, U+2030, U+20AC;
}

@font-face {
    font-family: "Roboto Serif";
    src: url("../assets/RobotoSerif.woff2") format("woff2"), serif;
    font-display: swap;
    unicode-range: U+20-21, U+24-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+C1, U+C9,
        U+CD, U+D3, U+DA, U+DD, U+E1, U+E9, U+ED, U+F3, U+FA, U+FD, U+10C-10F,
        U+11A-11B, U+147-148, U+158-159, U+160-161, U+164-165, U+16E-16F, U+17D-17E,
        U+2010-2011, U+2013, U+2018, U+201A, U+201C, U+201E, U+2026, U+2030, U+20AC;
}

/* @link https://utopia.fyi/type/calculator?c=360,17,1.2,1920,22,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--2: clamp(0.7378rem, 0.705rem + 0.1458vw, 0.88rem);
    --step--1: clamp(0.8854rem, 0.8359rem + 0.2201vw, 1.1rem);
    --step-0: clamp(1.0625rem, 0.9904rem + 0.3205vw, 1.375rem);
    --step-1: clamp(1.275rem, 1.1726rem + 0.4551vw, 1.7188rem);
    --step-2: clamp(1.53rem, 1.3873rem + 0.6343vw, 2.1484rem);
    --step-3: clamp(1.836rem, 1.64rem + 0.8713vw, 2.6855rem);
    --step-4: clamp(2.2032rem, 1.937rem + 1.1833vw, 3.3569rem);
    --step-5: clamp(2.6438rem, 2.2856rem + 1.5921vw, 4.1962rem);
    --step-6: clamp(3.1726rem, 2.6943rem + 2.1257vw, 5.2452rem);

    /* COLORS */

    --primary: #F9F9F9;
    --secondary: #231F20;
    --neutral: #A5A3A3;
    --accent: #F15A22;

}


* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

body {
    margin: 0;
    background-color: var(--primary);
    background: url("../assets/grid-bg.jpg");
    background-size: 7rem;
    color: var(--secondary);
    line-height: 1.6;
    font-family: 'Noto Sans', sans-serif;
    font-size: var(--step-0);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}


h2 {
    font-family: 'Roboto Serif', serif;
    font-size: var(--step-3);
    font-weight: 600;
    margin-top: 3rem;
}

h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: var(--step--1);
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.container {
    width: min(1280px, 90%);
}

.section {
    width: 100%;
    padding: 2rem 1rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
}

.fade-in.visible {
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width: 400px) {
    h3 {
        font-size: var(--step-0);
    }
}

@media screen and (min-width: 768px) {
    h3 {
        font-size: var(--step-0);
    }
}

@media screen and (min-width: 1024px) {
    .section {
        padding: 2rem 3rem 2rem 3rem;
    }
}

/* PORTFOLIO ANIMATION */


.portfolio_image,
.portfolio_image>span {
    height: 100%
}

.portfolio_image_1 {
    position: absolute;
    z-index: 1
}

.portfolio_image_2 {
    position: absolute;
    z-index: 2;
    animation-duration: 12s;
    animation-name: fadein2;
    animation-iteration-count: infinite
}

.portfolio_image_3 {
    position: absolute;
    z-index: 3;
    animation-duration: 12s;
    animation-name: fadein3;
    animation-iteration-count: infinite
}

@keyframes fadein2 {

    0%,
    60% {
        opacity: 1
    }

    70%,
    90% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadein3 {

    0%,
    30%,
    100% {
        opacity: 1
    }

    40%,
    90% {
        opacity: 0
    }
}