/*

#222323
#444546
#666869
#898B8D
#ABAEB0
#CDD0D3
#EFF3F6
#F1F5F7
#F4F6F9
#F6F8FA
#F8FAFB
#FAFCFC
#FDFDFE

*/

:root {
    --gray1: #222323;
    --gray2: #444546;
    --gray3: #666869;
    --gray4: #898B8D;
    --gray5: #ABAEB0;
    --gray6: #CDD0D3;
    --gray7: #CDD0D3;
    --gray8: #D4D7D9;
    --gray11: #DBDDE0;
    --gray12: #E2E4E6;
    --gray13: #EAEBEC;
    --gray14: #F1F2F2;
    --gray15: #F8F8F9;
    --gray16: #EFF3F6;
    --gray17: #F1F5F7;
    --gray18: #F4F6F9;
    --gray19: #F6F8FA;
    --gray20: #F8FAFB;
    --gray21: #FAFCFC;
    --gray22: #FDFDFE;

    --blue1: #07081D;
    --blue2: #0D113A;
    --blue3: #141957;
    --blue4: #1A2174;
    --blue5: #212991;
    --blue6: #2732AE;
    --blue7: #2E3ACB;
    --blue8: #4C56D2;
    --blue9: #6A72DA;
    --blue10: #888EE1;
    --blue11: #A5ABE9;
    --blue12: #C3C7F0;
    --blue13: #E1E3F8;
}


@font-face {
    font-family: 'Sudo-Medium';
    src: url('Sudo-Medium.ttf');
}

html {
    font-family: 'Sudo-Medium', Consolas, monospace;
}

body {
    font-family: 'Manrope', monospace;
    background: var(--gray14);
    color: #1d2123;
    font-size: 20px;
}

.logorow {
    font-weight: 300;
    border-bottom: solid 1px var(--gray8);
    color: var(--blue11);
    font-size: 1.4em;
    padding-top: 30px;
    padding-bottom: 15px;
    display: block;
    align-content: center;
    text-align: center;
}

nav {
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 700;
}

nav > a {
    text-decoration: none;
    text-underline: none;
    color: var(--blue7);
    margin-right: 20px;
    padding: 10px;
    font-size: 0.9em;
    border-radius: 8px;
}

nav > a:hover {
    background-color: var(--blue8);
    color: var(--gray14);
}

.pagecontainer {
    margin: 0 auto;
    width: 1000px;
}

main {
    border-radius: 12px;
    padding: 20px;
}

.code {
    font-family: 'Sudo-Medium', Consolas, monospace;
}

header {

}

main {
    background: var(--gray18);
}

footer {
    font-size: 0.8em;
    padding-top: 15px;
    margin-top: 35px;
}

.herodescription {
    font-size: 2em;
}

.button1 {
    text-underline: none;
    padding: 13px;
    font-size: 1.3em;
    border: none;
    background-color: var(--blue9);
    color: var(--gray14);
    border-radius: 8px;
    margin-right: 15px;
    text-decoration: none;
}

.button1:hover {
    background-color: var(--blue6);
}