@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* Setting up */
* {
    box-sizing: border-box;
}


body {
    --bg: #f3f3f3;
    --text: #212529;
    --primary: #7ec7e4;
    --text-muted: #545959;
}

@media (prefers-color-scheme: dark) {
    body {
        --text: #f3f3f3;
        --bg: #212529;
        --primary: #7ec7e4;
        --text-muted: #cadfe3;
    }
}


body.light {
    --bg: #f3f3f3;
    --text: #212529;
    --primary: #7ec7e4;
    --text-muted: #545959;
}

body.dark {
    --text: #f3f3f3;
    --bg: #212529;
    --primary: #7ec7e4;
    --text-muted: #cadfe3;
}

body {
    font-family: "Space Grotesk", "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;

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

.h3 {
    font-size: 1.2rem;
    font-weight: 500;
}

.headingBgPrimary {
    background-color: var(--primary);
    color: var(--text);
}

.headingBgBg {
    background-color: var(--bg);
    color: var(--text);
}

.headingBgText {
    background-color: var(--text);
    color: var(--bg);
}


/* Main App CSS */
.navbar {
    margin: 0;
    padding: 1rem 10vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar h1 {
    margin: 0;
    text-shadow: 5px 2px 2px var(--primary);
}


/* Theme Toggle Navigator */
.themeToggleDiv {
    position: relative;
}

.sunIcon,
.moonIcon {
    top: -1rem;

    width: 2rem;
    height: 2rem;

    fill: var(--text);
    stroke: var(--text);
    stroke-width: 0.25;

    cursor: pointer;

    &:hover {
        scale: 1.1;
        fill: var(--text-muted);
        stroke: var(--text-muted);
    }
}


.sunIcon {
    position: absolute;

    z-index: 0;
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .sunIcon {
        z-index: 0;
        opacity: 1;
    }
}

body.light .sunIcon {
    z-index: -1;
    opacity: 0;
}

body.dark .sunIcon {
    z-index: 0;
    opacity: 1;
}

.sunIcon:hover {
    animation: sunRotationAnimation 0.2s ease-in-out forwards;
}

.moonIcon {
    position: absolute;

    z-index: 0;
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .moonIcon {
        z-index: -1;
        opacity: 0;
    }
}

body.light .moonIcon {
    z-index: 0;
    opacity: 1;
}

body.dark .moonIcon {
    z-index: -1;
    opacity: 0;
}

.moonIcon:hover {
    animation: moonRotationAnimation 0.2s ease-in-out forwards;
}

@keyframes sunRotationAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(60deg);
    }
}

@keyframes moonRotationAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

.bigArea {
    grid-area: bigArea;
}

.cardholder {
    padding: 1rem 20vw;
}

.card {
    padding: 1rem;
    margin: 1.5rem;

    border: 1px solid var(--text);
    border-radius: 1.5rem;

    box-shadow: 0px 5px var(--text), 2px 2px 10px gray, -2px -2px 10px gray;
    transition: box-shadow 0.2s ease-in-out;
}

.card:hover {
    box-shadow: 0px 5px var(--text), 5px 5px 10px gray, -5px -5px 10px gray;
}

.primaryCard {
    background-color: var(--primary);
    color: var(--text);
}

.bgCard {
    background-color: var(--bg);
    color: var(--text);
}

.textCard {
    background-color: var(--text);
    color: var(--bg);
}

.alphaList {
    list-style: lower-greek;
}

ul {
    list-style: square;
}

li {
    padding: 0.5rem;
}

li>div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

li a {
    display: inline-block;
    width: fit-content;
    height: fit-content;

    margin: 0.5rem;
    padding: 0.2rem;
    /* background-color: transparent; */
    border-radius: 0.5rem;

    position: relative;

    overflow: hidden;
    /* z-index: 1; */
}

li a::after {
    content: "";
    width: 200%;
    height: 200%;

    position: absolute;
    top: -50%;
    left: -50%;

    /* background: conic-gradient(from 0deg,
            var(--primary) 0%,
            var(--text-muted) 50%, 
            var(--text) 70%,
            var(--primary)); */

    background: transparent;
}

li a:hover::after {
    background: conic-gradient(from 0deg,
            red, violet, indigo, blue, green, yellow, red);
    animation: rotatingAnimation 2s linear infinite;
}

@keyframes rotatingAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

button {
    padding: 0.5rem 1rem;

    border-radius: 0.5rem;
    border: none;

    font-family: "Space Grotesk", "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;

    cursor: pointer;

    position: relative;
    z-index: 10;
}


.buttonBgPrimary {
    background-color: var(--primary);
    color: var(--text);
}

.buttonBgText {
    background-color: var(--text);
    color: var(--bg);
}

.buttonBgText:hover {
    background-color: var(--text-muted);
}

.buttonBgBg {
    background-color: var(--bg);
    color: var(--text);
}



@media screen and (max-width: 650px) {
    li>div {
        flex-direction: column;
        gap: 0;
    }
}

@media screen and (max-width: 320px) {
    .cardholder {
        padding: 1rem 0rem;
    }
}

@media screen and (min-width: 320px) and (max-width: 425px) {
    .cardholder {
        padding: 1rem 5vw;
    }
}

@media screen and (min-width: 425px) and (max-width: 768px) {
    .cardholder {
        padding: 1rem 10vw;
    }
}

@media screen and (min-width: 768px) {
    .cardholder {
        display: grid;
        grid-template-areas:
            ". bigArea"
            ". bigArea";
        gap: 1.5rem;
    }

    .card {
        margin: 0;
    }
}