/*
#q = ID, theme switcher
.q = CLASS, dark mode colours...
#qq = ID, menu opener for mobile
.w = CLASS, button for closing the mobile menu
.e = CLASS, ""home link"" in nav
.r = CLASS, active page in nav
--q = CSS VAR, background color
--w = CSS VAR, alternate background color, for mainly sections
--e = CSS VAR, secondary background color for mini stuff
--r = CSS VAR, text color
--t = CSS VAR, if feeling lucky and u want secondary text color
--y = CSS VAR, hover color 
--u = CSS VAR, day light and dark night
.t = CLASS, for me color
.y = CLASS, for fardan
.u = CLASS, h1 in index
#c = ID, Message shower
#d = ID, the entire box
.i = CLASS, button to not mess up in form
--i = CSS VAR, cards
*/

html {
    background-color: var(--q);
    scroll-behavior: smooth;
}

:root {
    --q: lightblue;
    --w: rgb(124, 203, 230);
    --e: rgba(61, 138, 79, 1);
    --r: #000000; 
    --t: #232738;
    --y: #a59c21;
    --u: rgb(0, 191, 255);
    --i: #1e1e1e;
}

.q {
    --q: #494f54;
    --w: #101425;
    --r: #ffffff;
    --t: aliceblue;
    --e: #3a435d;
    --u: white;
    --y: #0071ff;
    --i: rgba(111, 129, 0, 0.573);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-color: var(--q);
    color: var(--r);
}

header, 
section {
    padding: 70px min(50px, 7%);
}

section {
    background-color: var(--w);
}

p {
    margin: 10px 0 20px 0;
    color: var(--t);
}

button {
    border: none;
    padding: .8em 2em;
    background-color: var(--e);
    color: white;
    border-radius: 4px;
    font: inherit;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
}

#q {
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#q svg {
    fill: var(--u);
}

#q svg:last-child {
    display: none;
}

.q #q svg:first-child {
    display: none;
}

.q #q svg:last-child {
    display: block;
}

main {
    padding: min(5em, 7%);
}

main p {
    margin-top: .35em;
}

nav {
    background-color: var(--e);
    border-bottom: 1px solid var(--y);
}

nav ul {
    list-style: none;
    display: flex;
}

nav .e {
    margin-right: auto;
}

nav li {
    display: flex;
}

nav a {
    display: flex;
    text-decoration: none;
    color: var(--r);
    padding: 1em 2em;
    transition: background-color 150ms ease;
}

nav a:hover {
    background-color: var(--y);
}

nav a.r {
    border-bottom: 2px solid var(--t);
}

#qq {
    display: none;
    background: none;
    border: none;
    padding: 1em;
    margin-left: auto;
    cursor: pointer;
}

.w {
    display: none;
    background: none;
    border: none;
    padding: 1em;
    cursor: pointer;
}

#overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    inset: 0;
    z-index: 9;
    display: none;
}

@media screen and (max-width: 700px) {
    #qq, 
    .w {
        display: block;
    }

    nav { 
      position: fixed;
      top: 0;
      right: -100%;
      height: 100vh;
      width: min(15em, 100%);
      z-index: 10;
      border-left: 1px solid var(--y);
      transition: right 300ms ease-in-out;
    }

    nav.show {
      right: 0;
    }

    nav.show ~ #overlay {
      display: block;
    }

    nav ul {
      width: 100%;
      flex-direction: column;
    }

    nav a {
      width: 100%;
      padding-left: 2.5em;
    }

    nav a.r {
      border-bottom: none;
    }

    nav .e {
      margin-right: unset;
    }

}

h1, 
h2, 
h3, 
h4, 
h5, 
h6,
p,
section {
    font-family: poppins, sans-serif;
}

h1,
p {
    align-content: center;
}

h1,
p,
h2,
h4 {
    text-align: center;
    align-content: center;
    justify-content: center;
    margin: 20px;
    align-items: center;
}

.t {
    background-color: rgb(151, 143, 133);
    display: flex; 
    align-items: center; 
    gap: 20px;
}

.y {
    background-color: #1d3462;
}

.t img,
.y img {
    border-radius: 100%;
}

.t img {
    max-width: 200px; 
    height: auto;
}

.t h2,
.t img,
.t p {
    color: black;
}

.y h2,
.y img,
.y p {
    color: white;
}

.u {
    color: black;
}

#d {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    background: #f1f1f1;
    border-radius: 10px;
    text-align: center;
    font-family: Arial;
}

input, 
.i {
    padding: 10px;
    width: 90%;
    margin-top: 10px;
}

#c {
    margin-top: 15px;
    font-weight: bold;
}

.i:hover {
    color: var(--t);
}

.loadero {
    display: block;
    position: relative;
    height: 20px;
    width: 140px;
    background-image: 
    linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0);
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-position: 0 0, 40px 0, 80px 0, 120px 0;
    animation: loader 1s linear infinite;
}
  
@keyframes loader {
    0% {   
        background-image: linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); 
    }

    25% {   
        background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); 
    }

    50% {   
        background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); 
    }

    75% {   
        background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FFF 20px, transparent 0); 
    }

    100% {   
        background-image: linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0), linear-gradient(#FF3D00 20px, transparent 0); 
    }

}

.loaders {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Covers full viewport width */
    height: 100vh; /* Covers full viewport height */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222b32;    
}

.game-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}

.game-card {
    background: var(--i);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}

.game-card:hover {
    transform: scale(1.03);
}

.card-content {
    padding: 1rem;
    color: #fff;
}

.card-content h2 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
}

.card-content p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.card-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.card-button:hover {
    background: #2980b9;
}

.project-intro {
    font-size: 1.1rem;
    color: #ddd;
    padding: 1rem;
    background-color: #2a2a2a;
    border-radius: 8px;
}

.project-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0 1rem;
}

.project-link {
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
    background-color: #333;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: background-color 0.2s;
}

.project-link:hover {
    background-color: #444;
}

.classdojo {
    min-height: 100%;
}