:root{
--text:darkslategrey;
--border:lightgrey;
--accent:teal;
--bg:#dce3e1;
--gradientTop:white;
--gradientBottom:rgba(240,248,255,.8);
}

@media (prefers-color-scheme: dark){
:root{
--text:white;
--border:#5a7678;
--accent:#74C365;
--bg:rgba(0,60,60,.8);
--gradientBottom:rgb(0,50,60);
--gradientTop:darkslategrey;
}
}

*{box-sizing:border-box;}

body{
padding:10px;
font-family:'MS PGothic',sans-serif;
color:var(--text);
background-color:var(--gradientTop);
}

/* star background */

body::before{
content:"";
position:fixed;
inset:0;
background:url("tym.jpg");
background-size:400px;
background-repeat:repeat;
opacity:.18;
z-index:-2;
}

/* grain overlay */

body::after{
content:"";
position:fixed;
inset:0;
background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
opacity:.15;
mix-blend-mode:overlay;
pointer-events:none;
z-index:-1;
}

.container{
max-width:55rem;
margin:5vw auto 12px auto;
border:6px ridge var(--border);
outline:3px solid var(--gradientTop);
outline-offset:4px;
border-radius:10px;
display:flex;
flex-wrap:wrap;
padding:5px;
gap:5px;
background:linear-gradient(var(--gradientTop),var(--gradientBottom));
}

.small{flex:1 1 20%;}
.full{flex:1 1 100%;}
.half{flex:1 1 49%;}

header{
background:url("tym.jpg");
background-size:cover;
background-position:center;
width:100%;
height:120px;
border:2px ridge var(--border);
border-radius:5px;
position:relative;
}

header span{
font-size:2.5rem;
position:absolute;
bottom:0;
right:10px;
margin:10px;
font-weight:bold;
color:white;
text-shadow:0 0 8px black;
}

nav{
border:2px ridge var(--border);
border-radius:5px;
padding:5px;
background:linear-gradient(var(--gradientTop),var(--gradientBottom));
}

nav div{
text-align:center;
margin-bottom:10px;
}

nav a{
display:block;
margin:5px;
background:linear-gradient(to right,var(--bg),var(--gradientBottom));
border-radius:5px;
padding:3px 7px;
text-decoration:none;
}

nav a:link,
nav a:visited{
color:var(--text);
}

nav a:hover{
background:linear-gradient(to right,var(--bg),var(--gradientBottom),var(--gradientTop));
}

section{
border:2px ridge var(--border);
border-radius:5px;
background:linear-gradient(var(--gradientTop),var(--gradientBottom));
padding:6px;
}

textarea{
width:100%;
height:100px;
background:var(--bg);
color:var(--text);
border:1px solid var(--border);
padding:6px;
}

button{
margin-top:6px;
background:var(--accent);
border:none;
padding:6px 14px;
color:white;
cursor:pointer;
}

button:hover{
opacity:.8;
}

footer{
text-align:center;
margin-bottom:5vw;
font-size:.8rem;
}

/* popup */

#warningPopup{
position:fixed;
inset:0;
background:rgba(0,0,0,.9);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.popup-inner{
background:var(--gradientBottom);
padding:30px;
border:4px ridge var(--accent);
text-align:center;
}

.hidden-audio{
width:0;
height:0;
visibility:hidden;
}