@font-face {
    font-family: heimat;
    src: url('../fonts/Heimat\ Display\ 18\ Extra\ Light.otf');
}

@font-face {
    font-family: modern-sans;
    src: url('../fonts/ModernSans-Light.otf');
}

html {
    font-family: modern-sans;

    height: 100%;
    background-color: #002855;
}

body:not(.loaded) i {
    display: none !important;
}

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

.page-footer {
    background-color: #142946;
}
.page-footer a,
.page-footer p {
    color: #d8d8d8;
}

.bg-wrapper {
    position: fixed;
    opacity: .5;

    width: 100vw;
    height: 100vh;

    background-image: url("../images/fundo.jpg");
    background-size: cover;
    background-position: top right;

    z-index: 0;
}

.bg-content {
    position: absolute;
    
    width: 100%;
    height: 100%;

    z-index: 999;
}

.banner {
    min-height: 100vh;
}
.banner img {
    width: 100%;
    max-width: 380px;

    animation: banner-fade 1s forwards;
    filter: drop-shadow(8px 8px 8px black);
}

.wrapper-list {
    position: relative;
}

.collection {
    border: 0;
}
.collection .collection-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border: 0;
}
.collection .collection-item span:not(.secondary-content) {
    transition: .4s;
    color: #142946 !important;
}
.collection .collection-item:hover span:not(.secondary-content) {
    padding-left: 4px;
    color: #af733e !important;
}

i.bi {
    margin-top: .1rem;
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes banner-fade {
    0% {
        opacity: .2;
        margin-top: 0;
    }
    100% {
        opacity: 1;
        margin-top: -60px;
    }
}

@keyframes float {
	0%, 100% {
		box-shadow: 0 5px 15px 0 rgba(0,0,0,.6);
		transform: translatey(0)
	}
	50% {
		box-shadow: 0 25px 15px 0 rgba(0,0,0,.2);
		transform: translatey(-20px)
	}
}

@media only screen and (max-width: 600px) {
    .presentation {
        flex-direction: column;
    }

    .banner img {
        max-width: 320px;
    }
}