/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1920,34,1.25,5,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.6944rem, 0.5613rem + 0.6656vw, 1.36rem);
    --step--1: clamp(0.8333rem, 0.66rem + 0.8667vw, 1.7rem);
    --step-0: clamp(1rem, 0.775rem + 1.125vw, 2.125rem);
    --step-1: clamp(1.2rem, 0.9088rem + 1.4563vw, 2.6563rem);
    --step-2: clamp(1.44rem, 1.0639rem + 1.8803vw, 3.3203rem);
    --step-3: clamp(1.728rem, 1.2435rem + 2.4224vw, 4.1504rem);
    --step-4: clamp(2.0736rem, 1.4507rem + 3.1144vw, 5.188rem);
    --step-5: clamp(2.4883rem, 1.689rem + 3.9967vw, 6.485rem);
  }
html{
    scroll-behavior: smooth;
}
body {
    margin: 0;

    padding: 0;
    
    background-color: #f0f0f0;
    color: #0b0b0b;
    display: flex;
    flex-direction: column;
}

p {
    font-family: "ivypresto-display", serif;
    font-weight: 300;
    font-style: normal;
    font-size: var(--step-0);
    margin-block-start: 0;
    margin-block-end: 0;
    line-height: 150%;
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1.5em;
}
.phrases{
    width: clamp(20.938rem, 10.546rem + 44.337vi, 63.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.phrases div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 1.5em;
    width: 85%;
    border-bottom: 1px dotted black;
}


.phrases div p{
    max-width: 100%;
}
.intro {
    font-size: var(--step--2);
    margin: 32px 0;
    width: 35ch;
    align-self: center;
    border-bottom: 1px dotted black;
    padding-bottom: 32px;
}

.sonnet1, .sonnet2, .sonnet3, .sonnet4{
    width: fit-content;
}

.sonnet1 {
    animation: appear 1.6s ease-in-out;
}

.sonnet2 {
    margin-left: 3em;
    animation: appear2 1.6s ease-in-out;
    font-style: italic;
}
.sonnet3 {
    margin-left: 6em;
    animation: appear3 1.6s ease-in-out;
}
.sonnet4 {
    margin: 0px 0px 64px 9em;
    animation: appear4 1.6s ease-in-out;
    font-style: italic;

}

@keyframes appear{
    0%{
        opacity:0;
    }100%{
        opacity: 1;
    }
}
@keyframes appear2{
    0%{
        opacity:0;
    }10%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes appear3{
    0%{
        opacity:0;
    }25%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
@keyframes appear4{
    0%{
        opacity:0;
    }
    35%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}

.progress-container{
    width: clamp(20.938rem, 10.546rem + 44.337vi, 63.75rem);
    height: 4px;
    top: 10px;
    position: fixed;
    align-self: center;
}
.progress-bar{
    height: 100%;
    width: 0;
    background-color: #2b2b2b;
    transition: width 0.02s linear;
    border-radius: 20px;
}
@media (min-width:768px){
    .intro{
        width: 55ch;
    }
    .phrases div{
        width: fit-content;
    }
    .phrases div:nth-of-type(2n-1){
        align-self: flex-start;
    }
    
    .phrases div:nth-of-type(2n){
        align-self: flex-end;
    }
}