@import url('https://fonts.googleapis.com/css2?family=Anonymous&family=Teko&family=Agdasima+Pro&family=Rubik+Distressed&display=swap');
:root{
    --big-text:1.5rem;
    --header-text:1.2rem;
    --medium-text:1rem;
    --normal-text:0.9rem;
    --small-text:0.6rem;
}
body{
    box-sizing:border-box;
    display:grid;
    grid-template-rows:auto 1fr;
    gap:0.5rem;
    place-items:center;
    height:99vh;
    height:99svh;
    background-color:black;
    background-image:url('../images/backgrounds/default.jpg');
    background-size: cover;
    background-attachment:fixed;
    background-position:center;
    margin:0;
    font-family: 'Agdasima Pro', sans-serif;
}
a{
    text-decoration:none;
    cursor:url('curser.cur'), pointer;
}
#mainsection{
    padding: 0.5rem 0.5rem 5rem;
    text-align:center;
}
#darkenator{
    position:fixed;
    inset:0;
    background:rgba(50,0,0,0.5);
    z-index:-10;
}
header{
    display:grid;
    place-items:center;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.9);
    padding:0.5rem 0;
}
footer{
    display:flex;
    z-index:10;
    position:fixed;
    width:100%;
    justify-content:space-around;
    align-items:center;
    padding:0.2rem;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,1);
    color:yellow;
    font-size:var(--small-text);
}
footer p{
    margin:0;
}
footer a{
    font-family: 'Rubik Distressed', cursive;
    font-size:var(--medium-text);
    color:yellow;
    transition:0.4s ease-in-out;
}
footer a > img{
    height:50px;
}
footer a:hover, footer a:focus{
    scale:1.1;
    text-shadow:4px 4px 0 red, 0 0 2rem yellow;
}
#mainmenu{
    font-family: 'Rubik Distressed', cursive;
    font-size:var(--big-text);
    width:min(95vw, 1600px);
}
#mainmenu{
    display: flex;
    justify-content:space-around;
    align-items:center;
    flex-flow: row wrap;
    gap:0.8rem;
    margin: 0;
    padding: 0;
}
#mainmenu p{
    text-align:center;
    padding:0.1rem 0.6rem;
    transition: 0.4s ease-in-out;
    border-radius:2px;
}
#mainmenu img{
    height:100px;
}
#mainmenu a{
    color: yellow;
    font-variant:small-caps;
}
#mainmenu p:hover > a, #mainmenu p > a:focus{
    color: black;
    scale:1.1;
    outline:none;
}
#mainmenu p:hover, #mainmenu p:focus-within {
    background:yellow;
    box-shadow: 2px 2px 4px black;
}
#mainmenu p:hover{
    scale:1.1;
}
#mainmenu p:focus-within{
    outline:2px solid white;
    border:2px solid darkblue;
}

section{
    display:block;
    position:relative;
    background:rgba(255,255,255,0.8);
    padding:1.5em min(2em,3vw);
    border-radius:1em;
    font-size:var(--normal-text);
}
.code{
    font-family: 'Anonymous Pro', monospace;
    font-size:var(--small-text);
    white-space: pre-wrap;
}
.codepen{
    width:min(80vw, 1200px);
    height:fit-content;
    font-family: 'Anonymous Pro', monospace;
    white-space: pre-wrap;
    font-size:var(--small-text);
    background:white;
    padding:1rem;
    border-radius:0.5rem;
    color:darkgreen;
    border:3px solid black;
}
.warn, .errors{
    text-transform:uppercase;
    color:red;
    background:yellow;
    font-weight:600;
}

h2{
    font-size:var(--big-text);
    text-align:center;
    font-family:'Rubik Distressed', cursive;
    color:yellow;
    font-weight:400;
    font-variant:small-caps;
    background:rgba(0,0,0,0.5);
    padding:0.6em 2em;
    border-radius:3px;
    text-shadow:2px 2px 2px black;
    border-bottom: 2px solid black;
}
.closebutton{
   position:absolute;
    top: 3px;
    right: 5px;
}
.closebutton button{
    background:none;
    color:darkred;
    font-weight:600;
    font-size:2rem;
    border:none;
}
.paramater{
    font-family: Teko, sans-serif;
    text-transform:uppercase;
    text-align:right;
}
.hiddenbutton{
    background:none;
    color:yellow;
    border:none;
    font-size:var(--small-text);
}
.confirm{
    color:yellow;
    background:darkred;
    border-radius:0.2rem;
    margin:0.5rem;
    display:block;
    padding:1rem;
    border:3px solid black;
    
}
.confirm button{
    margin:0.5rem;
    padding:0.5rem;
    min-width:20rem;
    font-weight:400;
    font-family:'Rubik Distressed', cursive;
    background:yellow;
    border-radius:0.2rem;
    color:red;
    text-shadow:0 0 2px black;
    border:3px solid black;
    transition:0.5s ease-in-out;
}
.confirm button:hover, .confirm button:focus{
    scale:1.1;
    box-shadow:4px 4px 4px black;
}