@import url("https://fonts.googleapis.com/css2?family=Avenir+Next:wght@400;500;600;700&family=Fira+Code:wght@400;700&family=Fira+Mono:wght@400;700&family=Manrope:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap");

:root{
    --font-base:"Mochiy Pop One","Avenir Next","Manrope",sans-serif;
    --font-mono:"Fira Code","Fira Mono","Roboto Mono",monospace;
    --h:180;
    --s:2%;
    --l:20%;
    --color-bg:#ffffff;
    --color-pepe:#b3bbbb;
    --color-pepe-hover:#c9cfcf;
    --color-pepe-dark:#e4e7e7;
    --color-grey-100:#fff;
    --color-grey-300:#e4e7e7;
    --color-grey-400:#c9cfcf;
    --color-grey-500:#9ea9a9;
    --color-grey-700:#7a8484;
    --color-grey-900:#3b4040;
    --color-grey-950:#272a2a;
    --color-primary:hsl(var(--h),var(--s),var(--l));
    --shadow-md:rgba(0,0,0,.1) 0px 20px 25px -5px,rgba(0,0,0,.04) 0px 10px 10px -5px;
    --shadow-lg:rgba(0,0,0,.25) 0px 25px 50px -12px;
    --rounded-sm:0.5rem;
    --rounded-md:1.5rem
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box
}

html{
    height:100%
}

#__next,body,html{
    min-height:100%!important;
    height:100%
}

body{
    min-height:100%;
    font-family:var(--font-base);
    background-color:var(--color-bg);
    color:var(--color-grey-100)
}

code,pre{
    font-family:var(--font-mono)
}

code{
    background-color:var(--color-grey-950);
    padding:.25rem .5rem;
    margin:0 .25rem;
    border-radius:.4rem;
    font-size:.875rem
}

code:after,code:before{
    content:"`"
}

li,ul{
    list-style-position:inside
}

header{
    position:fixed;
    width:100%
}