@font-face {
    font-family: ancient;
    src: url("/fonts/jancient.ttf") format("truetype");
}

#success-message, #error-message {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.loading {
    background-color: #000;
    background-image: url('/images/wallpapers/loading.gif');
    display: flex;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background-repeat: no-repeat;
    background-position: center;
    position: fixed;
    z-index: 9999;
}

.fade-out {
    opacity: 1;
    transition: opacity 1s ease-out;
}
.fade-out.hide {
    opacity: 0;
}

body {
    font-family: 'ancient', sans-serif;
    font-size: 1rem;
    background-image: url('/images/wallpapers/dnd.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

.climate {
    margin-right: 10px;
}

.climate {
    width: 36px;
    height: 36px;
    background-size: 100%;
}

.climate.clear {
    background-image: url('/images/climates/sun.png');
}

.climate.rain {
    background-image: url('/images/climates/rain.png');
}

.climate.storm {
    background-image: url('/images/climates/storm.png');
}

.climate.snow {
    background-image: url('/images/climates/snow.png');
}

nav.navbar {
    background-color: #647b83!important;
}

h1 {
    color: #FFFFFF;
}

.navbar a {
    margin: 0 5px;
}

body > .container {
    padding: 10px 10px 40px 10px;
}

table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #000;
}

footer {
    background-color: #647b83;
    padding: 10px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 15;
}

footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer ul li {
    display: inline;
    margin-right: 15px;
}

footer ul li a {
    text-decoration: none;
    color: #FFFFFF;
}