/*Global*/
* {
    font-family: Gadugi;
    scroll-behavior: smooth;
    --backgroundColor: rgb(20, 40, 60);
    --textColor: rgb(220, 220, 220);
}

html {
    overflow: overlay;
    height: 100%;
}

body {
    color: var(--textColor);
    background-color: var(--backgroundColor);
    display: flex;
    flex-direction: column;
    margin: 0;
    position: relative;
    min-height: 100vh;
    text-shadow : 0.05em 0.05em 0.05em black;
}

.content {
    padding-bottom: 3.5rem;
}

hr#navigation {
    width: 80%;
    box-shadow : 0.5em 0.5em 2em 0.01em black;
}

.selected {
    color: rgb(240, 240, 240);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-decoration-style: double;
}

footer {
    background-color: rgb(0, 0, 0, 0.4);
    width: 100%;
    margin-top: 3.5em;
    text-align: center;
    color: rgb(160, 160, 160);
    animation: fadeIn 3s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    position: absolute;
    bottom: 0;
}

footer p {
    font-size: 1em;
}

nav {
    text-align: center;
    font-weight: bold;
    font-size: 2.4em;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

hr {
    border-width: 0.15em;
    border-radius: 0.1em 0.1em 0.1em 0.1em;
}

a {
    text-decoration: none;
    text-shadow : 0.05em 0.05em 0.1em black;
}

a:hover {
    text-decoration: underline;
    color: rgb(240, 240, 240);
}

/*Links in nav bar*/
nav a {
    color: rgb(200, 200, 200);
    margin: 1em 1em 0;
}

/*Footer image*/
#cgl {
    cursor: pointer;
    height: 2.5em;
    padding-right: 0.25em;
    float: left;
    margin-top: -0.25em;
}

/*Section with image and link in footer*/
footer div {
    position: absolute;
    text-align: left;
    padding-left: 1.2em;
    line-height: 80%;
    vertical-align: top;
    margin-top: 0.65em;
}

/*Link next to image in footer*/
footer div a {
    color: rgb(160, 160, 160);
    font-size: 0.75em;
    white-space: nowrap;
    position: relative;
}

/*Text selection color*/
::selection {
  background: rgba(128, 87, 148, 0.6);
}

/*Custom scroll bar*/
::-webkit-scrollbar {
    width: 0.8em;
}

::-webkit-scrollbar-thumb {
    background: rgb(128, 87, 148);
    border-radius: 0.5em;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(114, 82, 130);
}