@import "fonts.css";
@import "effects.css";

:root {
    --bs-body-color: #b9b3aa;
}

html {
    height: 100vh;
    background-color: black;
    height: 100%;
}

html body {
    font-size: 18px;
    height: 100%;
    /*font-family: "Source Sans Pro", Sans-serif;*/
    font-family: "Belleza", Sans-serif;
    opacity: 0;
    overflow: hidden;
    color: b9b3aa;
}

html.loaded body {
    opacity: 1 !important;
    overflow: unset;
}

#header-background-image {
    background-image: url(../images/page-bg-03.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -25vw;
    width: 100%;
    height: 17vw;
    position: absolute;
    z-index: 1;
    display: inline-block;
    filter: grayscale(0.6);
    top: 0px;
}

#header-background {
    background-image: url(../images/header_fade.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

#banner-uo {
    background-image: url(../images/banner-uo.png);
    width: 6.8vw;
    height: 10vw;
    background-repeat: no-repeat;
    background-size: cover;
    filter: drop-shadow(2px 4px 12px black);
    display: inline-block;
    margin-left: -0.7vw;
}

#page-title {
    font-size: 2.3rem;
    font-family: 'Uncial Antiqua', cursive;
}

#page-background,
#page-background-overlay {
    height: 100%;
    width: 100%;
    z-index: 0;
    position: fixed;
    top: 0px;
    left: 0px;
}

#page-background {
    z-index: 0;
    background-image: url(../images/page-background.jpg);
    background-attachment: fixed;
}

#page-background-overlay {
    z-index: 1;
    background-color: transparent;
    background-image: linear-gradient(360deg, #201413b8 95%, #000000 100%);
    top: 0px;
}

#page-content-container {
    position: relative;
    width: 100%;
    padding-top: max(20vw, 6rem);
    padding-bottom: 2rem;
    z-index: 3;
}

#main-navbar {
    background-image: url(../images/navbar-background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: transparent;
    padding-top: 0.9rem;
    padding-right: 1.9rem;
    padding-left: 1.9rem;
    font-family: "Noto Sans Georgian", Sans-serif;
    font-weight: bold;    
    text-transform: uppercase;
    height: 3.3rem;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

@media (min-width: 400px){
    #main-navbar {
        font-size: 1rem;
        letter-spacing: 2.4px;
    }
}

#main-navbar ul li.nav-item {
    margin-left: 1rem;
    margin-right: 2rem;
}

#main-navbar ul li.nav-item,
#main-navbar ul li.nav-item .nav-link:not(.disabled) {
    color: #DABC83;
}

#main-navbar ul li.nav-item .nav-link:hover,
#main-navbar ul li.nav-item .nav-link.active {
    color: #E9E2BE;
}

html body .separator {
    background-image: url(../images/border.png);
    background-repeat: repeat-x;
    height: 1rem;
    margin-bottom: 2rem;
    opacity: 1 !important;
    width: 100% !important;
    border: none;
}

#page-footer-end {
    background-image: url(../images/footer.png);
    bottom: 0px;
    height: 3rem;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    filter: drop-shadow(2px -2px 10px black);
    text-align: center;
    padding-top: 1.4rem;
    color: #f0f8ff6b;
    position: fixed;
    width: 100%;
    left: 0;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
}

#page-footer-end.visible {
    opacity: 1;
}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity ease-in-out 600ms;
    background-image: url(../images/crossbow.png);
    background-repeat: no-repeat;
    background-position: 60% -93%;
    color: transparent;
    background-size: 150%;
    transform: rotate(-45deg);
    width: 3rem;
    height: 3rem;
    z-index: 4;
}

#btn-back-to-top.visible {
    opacity: 1;
    pointer-events: unset;
}

h1, h2, h3, h4 {
    font-family: 'Macondo Swash Caps', cursive;
    color: #d86161;
}

h1, h2 {
    text-transform: uppercase;
}