:root {
    --gunmetal: #272d2dff;
    --rose-quartz: #a39ba8ff;
    --powder-blue: #b8c5d6ff;
    --alice-blue: #edf5fcff;
    --emerald: #23ce6bff;
    --prismarine: #309990;
}

@font-face {
    font-family: 'Charcoal';
    src: url('style/Charcoal.ttf');
}

body {
    background-color: var(--gunmetal);
    color: var(--alice-blue);
    font-family: monospace;
    padding: 0;
    max-width: 800px;
}

h1,
h2,
h3,
#title,
a.ablack {
    color: var(--emerald);
    font-family: Charcoal;
}

h2 {
    margin: 0;
}

/* Header settings */

.headerBox {
    display: flex;
    align-items: center;
}

#mainHeader {
    order: 1;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    text-align: center;
}

#headerLinks {
    order: 2;
    text-align: center;
    margin: auto;
    font-size: 1.3em;
}

/* End header settings */

#maincontainer, #divbodyholder {
    padding-left: 10px;
    border-top: 1px solid var(--rose-quartz);
    border-left: 1px solid var(--rose-quartz);
    overflow: hidden;
}

.footer {
    text-align: center;
    margin: auto;
    font-style: italic;
    color: var(--rose-quartz);
}

hr {
    border-color: var(--rose-quartz);
    border: none;
    border-bottom: 1px solid;
    margin: 0;
    margin-bottom: 10px;
}

p {
    margin-top: 5px;
font-size: 1.2em;
}

a {
    text-decoration: none;
    color: var(--prismarine);
}

a:hover {
    text-decoration: underline;
}

/* frosted glass effect div */
.glass {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 10px;
    animation: upAndDown 5s ease-in-out infinite;
}

@keyframes upAndDown {
    0% {
        transform: translateY(0);
    }
    33% {
        transform: translateY(50ch);
    }
    66% {
        transform: translateX(50ch);
    }
    100% {
        transform: translateX(0);
    }
}

li {
	font-size: 1.2em;
}