*,::after,::before{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin-block-end:0}ol[role=list],ul[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}button,h1,h2,h3,h4,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}button,input,select,textarea{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

@font-face {
    font-family: 'Circular Std Book';
    src: url('fonts/subset-CircularStd-Book.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('fonts/subset-CircularStd-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root{
    
    --fz:max(16px,1.1vw);
    --lh:1.25;
    

    --gap:1.5rem;
    
    /* uncomment your fav ease :)
    // --easeocub:cubic-bezier(.215, .61, .355, 1);
    // --easeoutback:cubic-bezier(0.34, 1.56, 0.64, 1);
    // --easeoutquint:cubic-bezier(0.22, 1, 0.36, 1);
    --easeoutquart:cubic-bezier(0.25, 1, 0.5, 1);
    --easeoutcirc:cubic-bezier(0, 0.55, 0.45, 1);
    // --easeiocub:cubic-bezier(.645, .045, .355, 1);*/
    --ease:cubic-bezier(0, 0.55, 0.45, 1);

    --margin: 2.8rem;
}

html {
    font-size: var(--fz);
    line-height: var(--lh);
    scroll-behavior: smooth;
    height: 100vh;
}
body{
    font-family: 'Circular Std Book', sans-serif;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin: 0;
    padding: var(--margin);
}

body:before{
    content: "Site en cours de réalisation";
    position: fixed;
    top: var(--margin);
    right: var(--margin);
}

#logo{
    position: fixed;
    bottom: var(--margin);
    right: var(--margin);
    width: 28vw;
}
#content{
    max-width: 35rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap:1rem;

}
#content h1{
    margin-bottom: 1rem;
    text-transform: uppercase;
}
#content p{
    font-weight: bold;
}
#content a{
    font-weight: normal;
    text-decoration: none;
    transition: all .3s var(--ease);

}
@media (hover: hover) {
    #content a:hover {
        color: #00f000;
    }
}

@media screen and (max-width: 600px) {
   :root{
        --margin: 1.4rem;
   }
   body{
    justify-content: start;
   }
   body:before{
    right: auto;
    left: var(--margin);
   }
   #content h1{
    margin-top: 6rem;
    font-size: 1.22rem;
   }

   #logo{
    width: 38vw;
   }
    
}