.faculty-glyphic-regular {
  font-family: "Faculty Glyphic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

:root {
    /* Root defined variables */
    /* Header styling */
    --icon-fill-color: white;

    /* Body styling */
    --backdrop: url("/website/assets/backdrop.webp");
    
    /* Color palettes */
    --header-background: #1e1e1ea2;
    --header-border: #2b2b2b;
    --background: #171717;
    --surface: #2d2d2d;
    --text: #ffffff;
    --text-muted: #aaaaaa;
    --content-seperator: #5b5b5b;
    --primary: #8533ea;
    --secondary: #51cef4;
    --border: #a2a2a2;
    
    /* Panel styling */
    --panel-blur: 25px;
    --panel-radius: 15px;
    --panel-header: #202020cc;
    --panel-background: #202020cc;
    --panel-unselected-primary: rgb(77, 77, 77);
    --panel-unselected-accent: rgb(101, 101, 101);
    --panel-unselected-secondary: rgb(23, 23, 23);

    /* Root styling */
    background-color: var(--background);
    background-image: var(--backdrop);
    background-attachment: fixed;
}

[data-theme="light"] {
    /* Header styling */
    --icon-fill-color: rgb(38, 38, 38);

    /* Body styling */
    --backdrop: url("/website/assets/backdrop.webp");
    
    /* Color palettes */
    --header-background: #f0f0f0a2;
    --header-border: #656565;
    --background: #d4d4d4;
    --surface: #d4d4d4;
    --text: #2c2c2c;
    --text-muted: #5b5b5b;
    --primary: #e8633b;
    --secondary: #f2c521;
    --border: #a2a2a2;
    
    /* Panel styling */
    --panel-blur: 25px;
    --panel-radius: 15px;
    --panel-header: #b8b8b8cc;
    --panel-background: #ecececcc;
    --panel-unselected-primary: rgb(167, 167, 167);
    --panel-unselected-accent: rgb(241, 241, 241);
    --panel-unselected-secondary: rgb(137, 137, 137);
}

html {
    font-family: "Faculty Glyphic", system-ui, -apple-system, sans-serif;
}

/* Tags */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0px;
    padding: 0px;
    color: var(--text);
    /* background-image: var(--backdrop); */
}

* {
    transition: color 0.25s ease-in-out;
    transition: fill 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
}

header {
    position: sticky;
    top: -5px;
    z-index: 10;

    &.header-stuck .header-content {
        border-radius: 0px 0px 15px 15px;
        border-top: none;
    }
}

.header-content {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 5px;
    margin: 5px;
    border-radius: 15px;
    border: var(--header-border) 1px solid;
    background-color: var(--header-background);
    backdrop-filter: blur(var(--panel-blur));

    transition: border-radius 1s;
}

main {
    flex: 1;
}

footer {
    display: flex;
    flex-grow: 1;
    justify-content: center;    

    padding: 25px;
    border-radius: 25px 25px 0px 0px;
    /* min-height: 25em; */
    margin-top: auto;
    
    background-color: var(--header-background);
    /* 2px offset because that is the padding of the parent. */
    border-radius: 15px 15px 0px 0px;
    border-top: var(--header-border) 1px solid;
    backdrop-filter: blur(var(--panel-blur));

    /* background-color: var(--background); */
}

h2 {
    padding: 0px;
    margin: 2px;
}

/* Checkbox Slider */
.switch {
    align-self: center;
    position: relative;
    display: inline-block;
    width: 60px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--primary);
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 21px;
    width: 21px;
    left: 2px; bottom: 2px;
    background-color: white;
    background-image: url("/website/assets/moon-svgrepo-com.svg");
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.25s;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px var(--secondary));
}

/*
input:checked + .slider {
    background-color: var(--secondary);
}
*/

input:checked + .slider:before {
    transform: translateX(calc(56px - 100%));   
    background-image: url("/website/assets/sun-2-svgrepo-com.svg");
}

/* Generics */
.column-align {
    display: flex;
}

.drop-shadow {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.449));
}

.text-shadow {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.449);
}

/* Header */
.header-image {
    /*
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    width: 25px;
    height: 25px;
    */
    margin: 5px;
    border: none;
    background-color: transparent;
    display: block;
    
    svg {
        vertical-align: middle;
        height: 25px;

        path {
            width: 25px;
            height: 25px;
        }
    }
}

.svg-fill {
    svg {
        fill: var(--icon-fill-color);
    }
}

.header-image:hover {
    cursor: pointer;
}

.header-home {
    background-image: url('/website/assets/home-button.svg');
}

.header-youtube {
    background-image: url('/website/assets/youtube.svg');
}

.header-twitch {
    background-image: url('/website/assets/twitch.svg');
}

.header-github {
    background-image: url('/website/assets/github.svg');
}

.header-discord {
    background-image: url('/website/assets/discord.svg');
}

.header-page {
    margin: 5px;
    color: var(--text);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.header-page-active {
    padding: 2px;
    border-bottom: var(--primary) 2px solid;
    border-radius: 6px;
}


/* Card */
.card-render {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
    display: flex;
    position: relative;

    padding: 2px;
    margin: 25px;
    border-radius: var(--panel-radius);

    /* grayscale border */
    background: linear-gradient(
        160deg,
        var(--panel-unselected-primary),
        var(--panel-unselected-accent),
        var(--panel-unselected-secondary),
        var(--panel-unselected-secondary)
    );

    text-decoration: none;
    color: var(--text);

    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.449));

    transform: scale(1);
    transition: transform 250ms ease;
    isolation: isolate;
}

.card:hover {
    transform: scale(1.01);
}

.card:active {
    transition: transform 50ms ease-out;
    transform: scale(0.99);
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;

    background: linear-gradient(
        -5deg,
        var(--primary),
        var(--secondary)
    );

    filter: drop-shadow(0 0 10px var(--primary));

    opacity: 0;
    transition: opacity 250ms ease;

    z-index: -1;
}

.card:hover::before {
    opacity: 1;
}

.card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    padding: 0px;
    background-color: var(--panel-background);
    /* 2px offset because that is the padding of the parent. */
    border-radius: calc(var(--panel-radius) - 2px);
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    /* backdrop-filter: blur(var(--panel-blur)); */
}

.card-header {
    background-color: var(--panel-header);
    background-position: center;
    background-size: cover;
}

.card-header:hover {
    backdrop-filter: blur(var(--panel-blur));
}

.card-header-content {
    display: flex;
    justify-content: center;
    color: white;

    padding: 25px;
    margin: 0px;
    background-image: linear-gradient(to bottom, #0000002f, #000000de);
}

.card-content {
    padding: 10px;
}

/* Content Panels */
.panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    padding: 15px;
    margin: 25px;
    margin-left: 15%;
    margin-right: 15%;

    @media (max-width: 1200px) {
        margin-left: 15px;
        margin-right: 15px;
    }

    background-color: var(--panel-background);
    /* 2px offset because that is the padding of the parent. */
    border-radius: 15px;
    border: var(--header-border) 1px solid;
    backdrop-filter: blur(var(--panel-blur));
    overflow: hidden;
    z-index: 1;
    /*
    .card-panel {
        pointer-events: none;
    }
    */
    /* backdrop-filter: blur(var(--panel-blur)); */
}

.content-seperator {
    padding-bottom: .75em;
    border-bottom: var(--content-seperator) 2px solid;
}