* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
@font-face {
    font-family: "Boule Reg";
    src: url("Compagnon-Roman.woff") format('woff');
}
@font-face {
    font-family: "Boule Bold";
    src: url("Compagnon-Medium.woff") format('woff');
}
@font-face {
    font-family: "BouleVF";
    src: url("BouledVF.ttf")
}

body {
    line-height: 1.4;
    padding: 3rem;
    background-color: rgb(243, 235, 226);
}
.web{
    display: grid;
    grid-template-columns: 1fr 60%;
    
}
.nav{
    position: fixed;
    bottom: 3rem;
    
}
.nav a {
    font-family:"BouleVF";
    font-size: 1rem;
    padding: 8px;
    border-bottom: solid 1.5px ;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
:hover a{
    color:rgb(255, 100, 152);
    border-color: black;
}
.title{
    font-family:"BouleVF";
    font-size: 4.5rem;
    line-height: 1.1;
    -webkit-text-stroke:.1rem rgb(255, 100, 152);
    -webkit-text-fill-color: transparent;
    writing-mode: vertical-rl;
    position: sticky;
    animation: title 5s ease-in-out infinite alternate;
    animation-delay: 2s;
}

.essay {
 font-family:"BouleVF";
    font-size: 1rem;
    padding-left: 3rem;
.overview{
    display: grid;
    grid-template-columns:.8fr 2fr ;
    font-size: 1rem;
    row-gap: 3rem;
    column-gap: 2rem;
}
}
.credit{
     font-family:"Boule Bold";
     color: rgb(255, 100, 152);
     border: 1.5px solid black;
     border-radius: 2rem;
     padding: 1.8rem;
     font-size:1.4rem;
}

.reasons{
     border: 1.5px solid black;
     border-radius: 2rem;
     padding: 1.8rem;
     display: flex;
     flex-direction: row;
     gap:3rem;
     align-items: center;
     animation-name: number;
     animation-timing-function: ease-in-out;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     
}

.resb{
    color: rgb(255, 100, 152);
     font-family:"Boule Bold";
     font-size:1.4rem;
     
}
.resn{
    color: rgb(255, 100, 152);
    font-size: 6.5rem;
}
.body{
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.credit a {
    color: inherit;
}
:visited a {
    color: rgb(255, 100, 152);
    animation: link 3 ease 3s alternate forwards;
}

@keyframes link {
    0% {
        font-variation-settings: "BOUL" 0;
    }
    100% {font-variation-settings: "BOUL" 200;}
}
@keyframes number {
    0% {
        font-variation-settings: "BOUL" 50;
    }
    100% {font-variation-settings: "BOUL" 300;}
}
@keyframes title {
    0% {
        font-variation-settings: "BOUL" 0;;
        font-size: 5.5rem;
        letter-spacing: normal;
        -webkit-text-fill-color: transparent;
    }
    50%{
-webkit-text-fill-color: rgb(255, 100, 152);
    }
    100% {font-variation-settings: "BOUL" 300; font-size: 8rem;letter-spacing: 10%;}
    
}
.h2{
    font-family: "BouleVF";
    font-variation-settings: "BOUL" 110;
    font-size: 1.2rem;
    
}
.link a{
    color:rgb(255, 100, 152); ;
}