:root{
    --text-main: #333;
    --text-main-dark: #ccc;
    --text-hover: #1111a5;
    --background-color: #eee;
    --background-main-dark: #111;
    --error-flash-bg-color: #f5c6cb;
    --error-flash-color: #721c24;
    --info-flash-bg-color: #cce5ff;
    --info-flash-color: #004085;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-main);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.hidden {
    display: none;
}

h3 {
    text-align: left;
}

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

p {
    margin: 0;
}

a:hover {
    text-decoration: underline;
    color: var(--text-hover);
}

nav, nav .buttons, nav .resources-status, nav .resources-status .resource-status-element, .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

nav {
    flex-direction: column;
}

nav .buttons .nav-main-btn {
    text-decoration: none;
    color: var(--text-main);
    margin: 10px;
}

nav .buttons .nav-main-btn h2 {
    font-size: 18px;
}

nav .buttons .nav-main-btn .main-btn-border {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav .buttons .nav-main-btn .main-btn-border::before {
    content: "";
    position: absolute;
    background: url("./img/circle_frame.png") center no-repeat;
    height: 100px;
    width: 100px;
    background-size: 100px;
    transition: transform .5s ease-in-out;
}

nav .buttons .nav-main-btn .main-btn-border img {
    height: 90px;
    width: 90px;
}

nav .buttons .nav-main-btn:hover .main-btn-border::before {
    transform: rotate(30deg);
}

nav .buttons .nav-main-btn:hover h2 {
    color: var(--text-hover);
    text-decoration: underline;
}

nav .resources-status {
    margin: 0 0 20px 0;
}

nav .resources-status .resource-status-element p{
    margin: 10px 10px 10px 2px;
    padding: 0;
}

.wrapper {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.flash-messages {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    margin: 5px;
}

.flash-messages div {
    position: relative;
    right: -320px;
    border-radius: 3px;
    margin: 3px;
    padding: 5px 10px;
    width: 300px;
    animation: flash-exit linear 3s;
}

.flash-messages .flash-error {
    color: var(--error-flash-color);
    background-color: var(--error-flash-bg-color);
}

.flash-messages .flash-info {
    color: var(--info-flash-color);
    background-color: var(--info-flash-bg-color);
}

@keyframes flash-exit {
    0% {
        right: 0px;
    }

    80% {
        right: 0px;
    }

    100% {
        right: -320px;
    }
}