@font-face {
    font-family: 'LovelyCoffee', cursive;

    src: url('../assets/fonts/LovelyCoffee-jEVeO.ttf') format("truetype");
}

@font-face {
    font-family: "Dancing Script", cursive;
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
}

html {
    overflow-x: hidden;
    height: calc(var(--vh, 1vh) * 100);
}

.nav-title {
    font-family: 'Dancing Script';
    padding: 2rem;
    font-size: 1em;
}

.nav-item {
    padding-right: 2rem;
}

.media {
    border-radius: 10px;
}

#navbar {
    transition: top 0.3s;
}

#contact {
    padding-top: 10vh;
}

.content {
    min-height: 100px;
}

.bg1 {
    background-attachment: scroll;
    background: url(../assets/img/cordova.jpg) no-repeat bottom right fixed;
    -webkit-background-origin: border-box;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-origin: border-box;
    background-size: cover;
    min-height: 60px;
}

.bg {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.bg2 {
    background: url(../assets/img/desert.jpg) no-repeat bottom right fixed;
    -webkit-background-origin: border-box;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-origin: border-box;
    background-size: cover;
    min-height: 60px;

}

.bg3 {
    background: url("../assets/img/wide-tree.jpg") border-box no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 60px;
}



.icon-bar {
    left: 1rem;
    transition: left 0.3s ease-in;
    float: start;
    position: fixed;
    top: 95%;
    top: calc(var(--vh, 1vh) * 95);
    -webkit-transform: translateY(-80%);
    -ms-transform: translateY(-80%);
    transform: translateY(-50%);
}

.social {

    font-size: xx-large;
    margin-right: 3px;
}

.social:hover {
    -webkit-filter: brightness(80%);
    filter: brightness(80%);
}

.instagram {
    font-weight: bolder;
    background: -webkit-linear-gradient(45deg, #555bd0, #dd2f7f, #f4dfa5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.youtube {
    font-weight: bolder;
    background: #FF0000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spotify {
    font-weight: bolder;
    background: #1DB954;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 800px) {
    .bg {
        background-attachment: scroll;
        background-position-x: right;
        background-position-y: bottom;
    }
    #about {
        padding-left: 0;
    }

    #music {
        padding-left: 0;
    }

    #contact {
        padding-top : 1vh;
    }

    .collapser:not(.show) {
        display: none;
    }
}