:root {
    --color-primary: rgb(76, 0, 103);
    --color-secondary: rgb(15, 0, 67);
    --color-tertiary: rgb(38, 0, 190);
    --color-accent: rgb(0, 186, 196);
    --text-color-light: rgb(46, 0, 87);
    --text-color-dark: rgb(46, 0, 87);
    --page-color: white;
    --navbar-text-color: aliceblue;
    --background-image: linear-gradient(
        5deg, var(--color-primary) 0%, var(--color-tertiary) 60%
        );
}


p {
    color: var(--text-color-dark);
    font-family:sans-serif;
}

a:link {
    color:var(--color-accent);
}
a:visited {
    color: lch(from var(--color-accent) l c calc(h - 90))
}
a:hover {
    color: lch(from var(--color-accent) l c calc(h + 90))
}
a {
    color: var(--color-accent);
}


h1 {
    color: lch(from var(--color-accent) calc(l + 10) c h)
}
h2 {
    color: lch(from var(--color-accent) calc(l + 20) c h)
}
h3 {
    color: lch(from var(--color-accent) calc(l + 30) c h)
}

img {
    border-style: solid;
    border-color: lch(from var(--color-accent) calc(l + 10) c h);
    border-radius: 15px;
    border-width: 1px;
    max-width: 100%;
    max-height: 100%;
}

img.borderless {
    border-style: none;
}

#navbar {
    color:white;
    position: fixed;
    z-index: 10000;
    display: flex;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    background-image: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    overflow-x:scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    min-height: 50px;
    height: 8%;
    max-height: 75px;
    justify-content:left;
}

#navbar-logo {
    min-width: max-content;
    align-content: center;
}


.navbar-link {
    padding-left: 2.5%;
    padding-right: 2.5%;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.navbar-link:link {
    color:var(--navbar-text-color);
}
.navbar-link:visited {
    color: var(--navbar-text-color);
}
.navbar-link:hover {
    color: lch(from var(--navbar-text-color) calc(l + 20) c h);
}

.navbar-link:hover, #navbar-logo:hover {
    background-image: linear-gradient(
        0deg,
        var(--color-primary),
        var(--color-secondary)
        );
    border-radius: 5px;
}

html {
    padding-top: 75px;
    background-image: var(--background-image);
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
    background-attachment:fixed;
    background-color:black;
    scrollbar-color: var(--color-primary) #ff000000;
    scrollbar-width: none;
}

/* scrollbar control */
body {
    scrollbar-color: var(--color-primary) #ff000000;
}

.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    position: relative;
    text-align: center;
}

.justify-right {
    text-align: right;
}


main {
    margin: 2.5%;
    padding: 2.5%;
    /*padding-top: 8vw;*/
    background-color: var(--page-color);
    border: none;
    border-radius: 5px;
}

/* Funny shaking text*/
@keyframes shaking {
  0% {top: 0px; left: 0px}
  25% {top: -1px; left: 2px}
  50% {top: 1px; left: 2px}
  75% {top: 2px; left: -1px}
  100% {top: -1px; left: -2px}
  
}
.shake {
    top: 0px;
    left: 0px;
    position: relative;
    animation-name: shaking;
    animation-duration: 0.05s;
    animation-iteration-count: infinite;
    animation-timing-function: step-end;
}

.organization-table {
    margin-left: 0%;
    margin-right: 100%;
    width: 100%;
}

[hidden] {
    display: none !important;
}

#theme-selector {
    color:white;
    position: fixed;
    z-index: 9999;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 95%;
    right: 0;
    width: 100%;
    height: 5%;
    box-sizing:border-box;
    display: flex;
}

#theme-list {
    z-index: inherit;
    width: 100%;
    display: flex;
    background-color: var(--color-accent);
    overflow-x:scroll;
    padding-left: 1%;
    border-top-right-radius: 15px;
    scrollbar-width: none;
}

button.theme-select-button {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
}

img#theme-select-button {
    background-color: var(--color-accent);
    border-radius: 0px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}