body {background-image: radial-gradient(rgb(85, 85, 167), rgb(193, 193, 222));}






@font-face {
    font-family: 'Almendra Display';
    src: url('typo/AlmendraDisplay-Regular.woff2') format('woff2'),
        url('typo/AlmendraDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'Coconat';
src: url('typo/Coconat-Bold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}


@font-face {
 font-family: 'kaerukaeru';
src: url('typo/kaerukaeru-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}






blockquote {
font-weight: bold;    
position: fixed;
    top: 50px;
    left: 20px;
text-align:left;
font-family: 'Coconat';
font-size: 30px;
color: rgb(255, 255, 255);
}






.citation{
max-width: 60ch;

font-weight: bolder;
font-family: 'kaerukaeru';
font-size: 300px;
text-align: right;
color: rgb(141, 193, 141);
margin-right: 100;
margin-top: 40;

line-height: 0.7;


opacity: 1;
    animation: shake linear .2s infinite;


transition: color 500ms linear 0ms;
color: rgb(141, 193, 141);
²
}





@keyframes shake {
    0%    { transform:  translateX(0px) }
    33%   { transform:  translateX(2px) }
    66%   { transform:  translateX(-2px) }
}



.citation:hover{
    color: rgb(147, 147, 253);
}







.nom {    
font-family: 'Coconat';    
font-style: italic;
font-size: 15px;
color: rgb(255, 255, 255);
text-align: left;

position: fixed;
    bottom: 0px;
    left: 55px;

}






img{
position: sticky;
top: 355px;
left: 60px;
width: 16%;
position: fixed;


}