:root {
    --main-1: #11151C;
    --main-2: #212D40;
    --main-3: #364156;
    --main-4: #7D4E57;
    --main-5: #D66853;

    --blue-1: #224;
    --blue-2: #336;
    --blue-3: #449;
    --blue-4: #55b;
    --blue-5: #66d;

    --cyan-1: #244;
    --cyan-2: #366;
    --cyan-3: #499;
    --cyan-4: #5bb;

    --accent-1: #b33;
    --accent-2: #33b;

    --gray-1: #222;
    --gray-2: #333;
    --gray-3: #444;
    --gray-5: #555;

    --bg-color:            var(--main-1);
    --navbar-color:        var(--main-2);
    --navbar-button-color: var(--main-3);
}
body {
    background-color: var(--bg-color);
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}
a {
    color: white;
}

.navbar {
    background-color: var(--navbar-color);
    display: flex;
    gap: 3px;
}
.navbar a, .dropdown-button {
    color: white;
    display: inline-block;
    padding: 16px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.navbar .hoverable:hover {
    border-radius: 8px;
    background-color: var(--navbar-button-color);
}

.page-title {
    font-size: 30px;
    font-weight:bold;
    margin-bottom: 20px
}

.page-content {
    margin: 10px;
    height: 100%;
}

.section-title {
    font-size: 30px;
}
.section {
    display: flex;
    flex-direction: row;
    gap: 30px;
    background-color: var(--main-3);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.dropdown {
    width: fit-content;
}
.dropdown:hover .dropdown-button {
    background-color: var(--main-4);
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--main-2);
    opacity: 0.0;
}
.dropdown:hover .dropdown-content {
    display: flex;
    flex-direction: column;
    opacity: 1.0;
}
.dropdown-content a {
    padding: 16px;
}
.dropdown-content a:hover {
    background-color: var(--main-3);
    cursor: pointer;
}

.cool-button {
    padding: 16px;
    color: white;
    font-size: 20px;
    background: linear-gradient(var(--accent-1),var(--accent-2));
    border: none;
    border-radius: 10px;
    transition: font-weight 100ms;
    min-width: 150px;
}
.cool-button:hover {
    font-weight: 900;
    cursor: pointer;
}

footer {
    background-color: var(--main-2);
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

footer .column {
    display: flex;
    flex-direction: column;
    align-items:center;
}

.contacts {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}
.contact {
    border: 1px solid;
    border-radius: 15px;
    height: fit-content;
    padding: 16px;
    display: flex;
    align-items:center;
    gap: 10px;
    width: fit-content;
}
.contact a {
    color: white;
}
.monospace {
    font-family: 'Courier New', Courier, monospace;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0 }
}

.blinking {
    animation: blink 2s steps(1) infinite;
}
.center-text {
    text-align: center;
}