@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

body{
    margin-top: 0;
    margin-left: max(1rem, 50% - 300px);
    margin-right: max(1rem, 50% - 300px);
    
    font-family: 'Comic Relief', sans-serif;
    background-color: rgb(197, 166, 219);
    color: rgb(68, 40, 91);

    zoom: 150%;
}

::selection{
    color: white;
    background-color: rgb(140, 93, 217);
}

h1{
    font-size: 3.8rem;
    color: rgb(95, 60, 136);
    text-shadow: 3px 3px rgb(53, 23, 87);
}

h2{
    margin: 0.5rem 0;
    
    font-size: 2rem;
    color: rgb(95, 60, 136);
    text-shadow: 2px 2px rgb(53, 23, 87);
}

h3{
    margin-top: 0;
    margin-bottom: .5rem;

    font-size: 1.25rem;
}

p{
    margin-top: 0;
    margin-bottom: 0;
}

a{
    color: rgb(34, 88, 206);
    text-shadow: 1px 1px rgb(18, 47, 110);
    text-decoration: none;
}

section{
    padding: .3rem;
}

section, nav{
    margin-bottom: .7rem;

    background-color: rgb(181, 145, 206);
    border: 3px solid rgb(130, 101, 163);
    border-radius: 10px;
}

nav{
    text-align: left;
    padding: 0;
}

nav a, nav span{
    margin-left: .3rem;
    margin-right: .5rem;

    font-weight: bold;
}

nav span{
    color: rgba(0, 0, 0, 0);
    text-shadow: 1px 1px rgb(68, 40, 91);
}

ul{
    margin: 0.3rem;
}

hr{
    border: none;
    height: 1px;
    color: rgb(130, 101, 163);
    background-color: rgb(130, 101, 163);
}

code{
    padding: 0 3px;

    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 300;
    color: rgb(181, 145, 206);
    background-color: rgb(68, 40, 91);
    border-radius: 5px;
}

img{
    max-width: 100%;
    border-radius: 5px;
}

.title-header{
    display: inline;
    position: relative;
    top: 1rem;
}

.center{
    text-align: center;
}

.fine-print{
    font-size: 0.65rem;
}

.fine-link{
    font-size: 0.85rem;
    text-shadow: 0.75px 0.75px rgb(18, 47, 110);
}

.project-date{
    margin-bottom: 0.5rem;

    font-size: 0.65rem;
}

.margin-bottom-0{
    margin-bottom: 0;
}

.small-margin{
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}

.horizontal-list li{
    float: left;
    margin-right: 2rem;
}

.horizontal-list{
    padding-left: 1.333rem;
    margin: 0;
    overflow: hidden;
}

.button{
    image-rendering: crisp-edges;
    height: 66px;
    margin-top: 0.5rem;
}

#title{
    text-align: left;
    height: 5.8rem;
}

#color-slider{
    float: right;
    width: 6.5rem;
    height: 1rem;
}

#rainbow-toggle{
    float: right;

    font-size: 1em;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
}

#rainbow-toggle:hover{
    cursor: pointer;
}

#changelog li{
    margin-bottom: 0.5rem;
}

#blog{
    white-space: pre-wrap;
}

#blog h2, #blog h3, #blog h4, #blog li{
    margin-bottom: -1rem;
}

#blog ul{
    margin-top: -2.5rem;
    margin-bottom: -0.5rem;
}