:root{
    --text:#fff;
    --heading:#fff;
    --subheading:#ddd;

    --accent:#3b82f6;
    --accent-hover:#2563eb;

    --panel:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.18);

    --terminal:#7ffcff;
}

body{
    font-family:"Orbitron",sans-serif;
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    text-align:center;
    color:var(--text);

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

button{
    padding:16px 26px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    transition:.25s;
    font-size:18px;
}

#result{
    margin-top:50px;
    font-size:35px;
}

.categories button{
    width:220px;
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--border);
}

.categories button:hover,
#spinButton:hover{
    transform:translateY(-3px);
}

.categories button:hover{
    background:var(--accent);
}

.categories button.active{
    background:var(--accent);
}

@keyframes flicker{
    0%,100%{opacity:1;}
    50%{opacity:.92;}
    75%{opacity:.98;}
}

h1{
    color:var(--heading);
    animation:flicker 2s infinite;
}

h2{
    color:var(--subheading);
}

h3,p{
    color:var(--text);
}

#spinButton{
    margin-top:30px;
    padding:18px 50px;
    font-size:24px;

    background:var(--accent);
    color:var(--text);
}

#spinButton:hover{
    background:var(--accent-hover);
}

#terminal{
    width:500px;
    height:180px;
    margin:30px auto;
    padding:20px;

    overflow-y:auto;

    border:2px solid var(--border);
    border-radius:15px;

    background:rgba(0,255,255,.05);

    color:var(--terminal);

    text-align:left;
    font-family:monospace;
}

.topBar{
    width:90%;
    margin:auto;

    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
}

#themeSelect{
    padding:10px;
    border-radius:10px;
    font-size:16px;
    color:blue;
}

.container{
    padding-top:90px;
}

.categories button,
#spinButton,
#terminal{
    transition:
        transform .2s,
        background .25s,
        border-color .25s;
}


body.space{
    background-image:url("Pictures/space2.jpg");

    --text:#dff4ff;
    --heading:#fff;
    --subheading:#9ecfff;

    --accent:#3b82f6;
    --accent-hover:#2563eb;

    --panel:rgba(20,35,60,.45);
    --border:#4aa6ff;

    --terminal:#84d8ff;
}


body.forest{
    background-image:url("Pictures/forest2.jpg");

    --text:#edf8ec;
    --heading:#fff;
    --subheading:#c6e7c4;

    --accent:#39853c;
    --accent-hover:#2e7d32;

    --panel:rgba(20,50,20,.45);
    --border:rgba(90,180,90,.4);

    --terminal:#8be28f;
}



body.glass{
    background-image:url("Pictures/glass2.jpg");

    --text:#fff;
    --heading:#fff;
    --subheading:#f1f1f1;

    --accent:#bdbdbd;
    --accent-hover:#d9d9d9;

    --panel:rgba(255,255,255,.12);
    --border:rgba(255,255,255,.25);

    --terminal:#fff;
}

body.glass .categories button,
body.glass #spinButton,
body.glass #terminal{
    background:rgba(255,255,255,.10);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid var(--border);
}