@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@keyframes textfade {
    from {color:black;}
    to {color:white;}
}

* {
    margin:0px;
    padding:0px;
    /* border:1px dashed red; */
    animation: textfade 0.5s;
}
body {
    background-color:black;
    color:white;
}
h1, h2, h3, h4 {
       font-family:'Josefin Sans',Arial;
}
a {
    text-decoration:none;
    color:white;
    font-family:'Roboto',Arial;
    animation: textfade 0s;
}
a#cur {
    color:orange;
}
a:hover {
    color:orange;
}
a:active {
    color:gold;
}
nav {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    justify-content: center;
    font-size:18pt;
    padding:10px 0px;
    background-color:black;
    box-shadow:500px 0px 0px 0px #000
}
nav a{
    padding:0px clamp(1px, calc(5vw - 20pt), 9pt);
    font-weight:350;
    font-variation-settings: 
        "width" 75
        "wdth" 75;
    letter-spacing:0.2pt;
}
.logo{
    position:absolute;
    left:calc(25vw - 58pt - 10pt);
    background-image:url(favicon.gif);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    padding:0px;
    background-color:rgb(19, 19, 29);
    border-radius:100px;
    box-shadow: 0px 0px 0px 3px rgb(19, 19, 29);
}
.logo:hover{
    box-shadow: 0px 0px 0px 3px rgb(39, 39, 49);
}

.logo div {
    height:22pt;
    width:23pt;
}
header{
    text-align:center;
    padding-top:max(48vh, 135pt);
    background-image:url(banner.jpg);
    background-size:cover;
    background-position:center;
}

header h1 {
    margin:0% max(calc(31vw - 150pt), 0px);
    background-color: #111;
    border-radius:5px 5px 0px 0px;
    font-size:26pt;
    padding-top:10px;
    text-indent:-1pt;
}
article:first-child{
    border-radius:0px 0px 5px 5px
}
article{
    margin:0% max(calc(31vw - 150pt), 0px);
    margin-bottom:2.5%;
    background-color:#111;
    padding:min(2.5vw, 20px);
    box-shadow:0px 6px 6px 0px black;
    border-radius:5px;
}
article h2 {
    font-size:22pt;
}
article aside {
    clear:right;
    margin-top:5px;
    margin-right:10pt;
    float:right;
    background-color:#222;
    padding:4pt;
    width:30%;
    height:auto;
    border-radius:5px;
    text-align:center;
}
img {
    width:100%;
}
section{
    margin-top: 19pt;
    border-bottom: 4px solid #222;
    padding-bottom:4pt;
    line-height: 15pt;
    padding-right:10pt;
}
section div {
    clear:both;
    margin-bottom:18pt;
}
section h2, h3, h4 {
    font-weight:600;
    text-decoration:underline 2px #222;
    letter-spacing:0.2pt;
    margin-bottom:8pt;
    font-size:17pt;
    color:#9F6
}
section p {
    margin-bottom:15pt;
    margin-right:0pt;
    text-indent:8pt;
    padding:18pt;
    font-size:14pt;
    letter-spacing:-0.1pt;
    line-height:19pt;
    text-align:left;
}
section a {
    background-color: #222;
    font-size:14pt;
    font-weight:900;
    font-variation-settings: 
        "wdth" 100
        "width" 125;
    letter-spacing:0.5pt;
    padding:5px;
    border-right:4px solid #222;
    border-left:4px solid #222;
    box-shadow:0px 2px 0px 0px #222;
}
section a:hover{
    border-left:4px solid orange;
}

aside + p {
    margin-right:240pt;
}

footer a{
    display:block;
}
footer{
    margin:0% max(calc(31vw - 150pt), 0px);
    background-color:#111;
    padding:min(2.5vw, 20px);
    justify-items:center;
    margin-bottom:28pt;
    border-radius:5px;
}
footer *:first-child{
    float:left;
}
footer *:nth-child(2){
    float:right;
}