@font-face {
    font-family: Barbie;
    src: Arial, url("./fonts/Bartex.ttf");
    font-display: swap;
}

@font-face {
    font-family: Mario;
    src: Arial, url("./fonts/MARIOMAKER.otf");
    font-display: swap;
}

#navHeader {
    font-family: Barbie;
    letter-spacing: 3px;
    text-wrap: nowrap;
}

#navHeader, #topNav > a, .menu > a {
    color: #FEFEFE;
    text-shadow:
        0.05em 0.05em 0 var(--pink),
        0.065em 0.06em 0 var(--pink),
        0.08em 0.07em 0 var(--pink),
        0.095em 0.08em 0 var(--pink),
        0.11em 0.09em 0 var(--pink),
        0.125em 0.10em 0 var(--pink),
        0.14em 0.11em 0 var(--pink),
        0.155em 0.12em 0 var(--pink),
        0.17em 0.13em 0 var(--pink),
        0.185em 0.14em 0 var(--pink),
        0.20em 0.15em 0 var(--pink);
}

#hamburgerPath {
    filter: drop-shadow(0.2em 0.2em 0px var(--pink));
}

.menu>a {
    font-family: Mario;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    background-color: #51698567 !important;
    font-weight: bold;
    font-size: 0.875rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    
    width: 100%;
    height: 10vh;
    color: var(--light);
    margin-top: 1vh;

    clip-path: polygon(0% 20%, 2.5% 0%, 5% 20%,
            7.5% 0%, 10% 20%, 12.5% 0%,
            15% 20%, 17.5% 0%, 20% 20%,
            22.5% 0%, 25% 20%, 27.5% 0%,
            30% 20%, 32.5% 0%, 35% 20%,
            37.5% 0%, 40% 20%, 42.5% 0%,
            45% 20%, 47.5% 0%, 50% 20%,
            52.5% 0%, 55% 20%, 57.5% 0%,
            60% 20%, 62.5% 0%, 65% 20%,
            67.5% 0%, 70% 20%, 72.5% 0%,
            75% 20%, 77.5% 0%, 80% 20%,
            82.5% 0%, 85% 20%, 87.5% 0%,
            90% 20%, 92.5% 0%, 95% 20%,
            97.5% 0%, 100% 20%,
            100% 100%, 0% 100%);
}

footer p {
    text-shadow: 0px 0px 0.4em rgba(0, 0, 0, 1);
}

.navLinks {
    font-weight: bold;
}

header .drawer-side {
    z-index: 3;
}

table {
    border-collapse: collapse;
}

th, td {
    padding: 1%;
}

/* Other */

@keyframes move-background-vertical {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 0% 100%;
    }
}

@keyframes move-background-horizontal {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 0%;
    }
}

main::before {
    content: '';
    background-image:
        radial-gradient(
            circle,
            transparent 70%,
            var(--background)
        ),
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 100%,
            var(--background)
        ),
        url("./images/Favicon.ico")
    ;
    background-size: 5%;
    opacity: 0.09;
    position: absolute;
    left: 50%;
    top: 0px;
    translate: -50% 0%;
    z-index: -1;
    height: 100%;
    width: 100%;
    animation: move-background-vertical 180s linear infinite;
    will-change: background-position;
}

main {
    z-index: 2;
    min-height: 81vh;
    width: 100%;
    padding: 0.5%;
    position: relative;
    flex: 1;
}


.iframe-container {
    width: 100%;
    height: 90vh;
}

iframe {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0.5%;
    /* Remove default iframe border */
}

.toastParent {
    z-index: 10000;
}

.alert {
  display: grid;
  width: 100%;
  grid-auto-flow: row;
  align-content: flex-start;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  border-radius: var(--rounded-box, 1rem);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
  padding: 1rem;
  --tw-text-opacity: 1;
  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
  --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
  background-color: var(--alert-bg);
}

.alert-success {
    background-color: var(--success);
}

.alert-error {
    background-color: var(--error);
}

.alert-warning {
    background-color: var(--warning);
}

.alert-outline {
    border: 2px solid black;
    box-shadow: -0.2em 0.2em 0.1em rgba(0, 0, 0, 0.5);
}

main .btn:hover {
    box-shadow: -0.0 0.0 0.2em rgba(0, 0, 0, 1);
    scale: 103%;
}

#globalToastContainer>* {
    z-index: inherit;
}

#globalToastContainer>div {
    opacity: 1;
    transform: translateY(100px);
    animation: slide-up 1s ease-out forwards;
    margin-bottom: 1vh;
}

@keyframes slide-up {
    to {
        transform: translateY(0);
    }
}

/* For Blocked off Areas */
#loggedInArea {
    position: relative;
    min-width: 25vw;
    min-height: 25vh;
}

#loggedInArea:not(.blockedArea)>#loggedInContainer {
    display: none;
}

#loggedInContainer {
    display: flex;
    align-items: start;
    justify-content: center;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    color: black;
    background-color: var(--success);
    z-index: 100;
}

#loggedInArea.blockedArea>#loggedInContainer>#notLoggedInText {
    font-weight: bold;
}

#loggedInArea.blockedArea {
    display: block;
}

#sideMenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 25vw;
  min-width: 300px;
  max-width: 90vw;
  height: 100vh;
  background-color: var(--background);
  color: #fff;
  z-index: 1000;
  display: none;
  border: 1px solid var(--primary);
}

#sideMenu.open {
  display: flex;
  flex-direction: column;
}

#sideMenuBG {
    z-index: 999;
    background-color: #222222aa;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

#sideMenuBG.open {
    display: block;
}