/* @link https://utopia.fyi/clamp/calculator?a=320,1440,12—22|14—22|16—48|30—40|40—60|40—80|50—80|160—240|250—400|320—1440|275—400 */

:root {
  --fluid-12-22: clamp(0.75rem, 0.5714rem + 0.8929vw, 1.375rem);
  --fluid-14-22: clamp(0.875rem, 0.7321rem + 0.7143vw, 1.375rem);
  --fluid-16-48: clamp(1rem, 0.4286rem + 2.8571vw, 3rem);
  --fluid-30-40: clamp(1.875rem, 1.6964rem + 0.8929vw, 2.5rem);
  --fluid-40-60: clamp(2.5rem, 2.1429rem + 1.7857vw, 3.75rem);
  --fluid-40-80: clamp(2.5rem, 1.7857rem + 3.5714vw, 5rem);
  --fluid-50-80: clamp(3.125rem, 2.5893rem + 2.6786vw, 5rem);
  --fluid-160-240: clamp(10rem, 8.5714rem + 7.1429vw, 15rem);
  --fluid-250-400: clamp(15.625rem, 12.9464rem + 13.3929vw, 25rem);
  --fluid-320-1440: clamp(20rem, 0rem + 100vw, 90rem);
  --fluid-275-400: clamp(17.1875rem, 14.9554rem + 11.1607vw, 25rem);
}

:root
{
    --color-1: #F0DCCA;
    --color-1-5: #DFD1B8;
    --color-2: #CDC6A5;
    --color-3: #8D9F87;
    --color-4: #6F9283;
    --color-5: #696D7D;

    --color-highlight: #AAB6DA;
    --color-text: #23252B;
}

*
{
    border: 0;
    padding: 0;
    margin: 0;

    font-family: Inter, 'Times New Roman';
}

@font-face {
    font-family: Inter;
    src: url("Fonts/Inter.ttf");
}

@font-face {
    font-family: OpenRunde;
    src: url("Fonts/OpenRunde-Regular.woff");
}

::selection
{
    background-color: var(--color-highlight);
}

html
{
    /* scroll-snap-type: y proximity; */
}

main
{
    color: var(--color-text);
}

section
{
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* scroll-snap-align: start; */
}

section li
{
    list-style: none;
    background-color: var(--color-1);
    border-radius: var(--fluid-14-22);
    /* margin: var(--fluid-16-48); */
    padding: var(--fluid-14-22);
}

/*
    About Me
*/

section.first
{
    background-color: var(--color-1);
    gap: var(--fluid-16-48);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 5% 0 5%;
    align-content: center;
}

#AboutMeTitle
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--color-2);
    border-radius: 50px;
    padding: 20px;
    flex: 0 0 40%;
    max-width: fit-content;

    width: fit-content;
    height: fit-content;
    gap: var(--fluid-14-22);
}

#AboutMeText
{
    background-color: var(--color-1-5);
    border-radius: 10px;
    padding: 20px;

    line-break: loose;
    text-align: justify;
    line-height: 1.35;

    flex: 1 0 47%;
    font-size: var(--fluid-12-22);
}

#AboutMeTitle h1
{
    font-size: var(--fluid-40-60);
}

#AboutMeTitle img
{
    /* min-width: 200px; */
    max-width: var(--fluid-250-400);
    aspect-ratio: 1;
    object-position: 0 28%;
    object-fit: cover;
    border-radius: var(--fluid-40-60);
}

/*
    Section Stylings
*/

section:not(.first)
{
    flex-direction: column;
    gap: var(--fluid-14-22);
    padding-left: 100px;
    padding-right: 100px;
}

section:not(.first) ul
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--fluid-16-48);
    justify-content: center;
}

section:not(.first) li
{
    /* flex: 0 0 300px; */
    line-height: 1.35;
    max-width: var(--fluid-275-400);
    /* flex: 1 1 30%; */
    /* max-width: 400px; */
    flex: 1 0 30%;
    display: flex;
    flex-direction: column;
}

section:not(.first) h1
{
    font-size: var(--fluid-50-80);
}

section.fifth h1
{
    font-size: var(--fluid-40-80);
}

section:not(.first) h2
{
    font-size: var(--fluid-30-40);
}

section:not(.first) h3
{
    font-weight: 400;
}

section:not(.first) > *
{
    text-align: center;
}

/* TEMPORARY */
video
{
    border-radius: 10px;
}

/* 
    li:hover
    {
        box-shadow: 3px 3px 6px 0px var(--color-5);
        -webkit-box-shadow: 3px 3px 6px 0px var(--color-5);
        -moz-box-shadow: 3px 3px 6px 0px var(--color-5);
    } 
*/

section.second
{
    background-color: var(--color-2);
}

section.third
{
    background-color: var(--color-3);
}

section.fourth
{
    background-color: var(--color-4);
}

section.fifth
{
    background-color: var(--color-5);
}

header
{
    background-color: #f8eee6;
    width: 100%;
    position: fixed;
}

/*
    Footer
*/

footer
{
    background-color: #f8eee6;
    bottom: 0;
    left: 0;
}