* {
    /*background: black;*/
    color: #F0AC31;
    font-family: Tahoma, sans-serif;
}

/*body:before {*/
/*    content: "";*/
/*    background-image: url("IMG_1420.webp");*/
/*    position: absolute;*/
/*    background-size: cover;*/
/*    top: 0;*/
/*    left: 0;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    z-index: -1;*/
/*    filter: brightness(25%) grayscale(75%);*/
/*}*/

html {
    background: black;
    overflow: hidden;
    text-align: center;
}

select {
    background-color: black;
}

.selector {
    margin-top: 15px;
}

.wrap {
    /*overflow-x: hidden;*/
    position: relative;
    height: 100vh;
    max-height: 100vh;
}

.bg {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    right: 50%;
    margin: 0 -50vw;
    /*z-index: -1;*/
    filter: brightness(50%) grayscale(50%);
    width: 100vw;
    max-width: 100vw;
    height: auto;
    /*object-fit: cover;*/
}

#mobile-image {
    display: none;
}

@media only screen and (max-width: 1080px) {
    #mobile-image {
        display: block;
    }

    #desktop-image {
        display: none;
    }

    .slideshow {
        max-height: 35vh;
    }
}

h1 {
    text-align: center;
}

.main {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 100%;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    /*justify-content: flex-end;*/
    /*align-items: center;*/
    flex-direction: row;
    width: 100%;
    height: 75px;
    background-color: transparent;
    z-index: 10;
}

.logo-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    width: 50%;
}

.logo {
    width: 60px;
    height: 60px;
    padding-left: 15px;
}

.socials {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    width: 50%;
}

.social {
    padding: 5px;
    width: 50px;
    height: 50px;
    /*border: solid darkorange .5px;*/
    /*border-radius: 5px;*/
    background-repeat: no-repeat;
    transition: background-image 0.5s ease;
    cursor: pointer;
}

.facebook {
    background-image: url("FB_Gold_on_Black.png");
}

.facebook:hover {
    background-image: url("FB_Black_on_Gold.png");
}

.instagram {
    background-image: url("Insta_Gold_on_Black.png");
}

.instagram:hover {
    background-image: url("Insta_Black_on_Gold.png");
}

.youtube {
    background-image: url("YT_Gold_on_Black.png");
}

.youtube:hover {
    background-image: url("YT_Black_on_Gold.png");
}

.navbar {
    position: fixed;
    top: 0;
    right: 20px;
    display: flex;
    /*text-align: right;*/
    justify-content: flex-end;
    align-items: center;
    /*border: 1px solid #ff8c00;*/
    flex-direction: row;
    height: 75px;
}

.content {
    display: grid;
    grid-template-areas:
            "heading"
            "temp"
            "main-content";
    justify-items: center;
    animation-name: fade;
    animation-duration: 1s;
}

.heading {
    grid-area: heading;
}

.buffer {
    grid-area: temp;
    /*height: 30px;*/
    margin: 0 0 10px 0;
}

.top-buffer {
    height: 75px;
}

.main-content {
    grid-area: main-content;
}

.navbar-item {
    /*height: 50px;*/
    padding: 15px;
    margin: 0 5px;
    width: 16.25vw;
    max-width: 100px;
    height: 65px;
    text-align: center;
    /*border: white dotted;*/
    /*text-decoration: none;*/
    transition: background-color 0.25s ease,
                color 0.25s ease;
    /*cursor: pointer;*/
    border: none;
    font-weight: bold;
    border-radius: 10px;
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .navbar-item:hover {
        background-color: #F0AC31;
        color: black;
    }

    .navbar-item-test:hover {
        background-color: #F0AC31;
        color: black;
    }
}
.navbar-item-link {
    text-decoration: none;
}

.current-page {
    background-color: #F0AC31;
    color: black;
}

.current-page a {
    color: black;
    background-color: #F0AC31;
}

.slideshow {
    width: 750px;
    max-width: 90vw;
    height: 500px;
    display: none;
    animation-name: fade;
    animation-duration: 1.5s;
}

.bio {
    max-height: 100vw;
}

.content-bio {
    width: 90vw;
    max-width: 750px;
    overflow-y: auto;
    /*position: sticky;*/
    height: 800px;
    max-height: 125vw;
}

.packages {
    /*border: aliceblue solid;*/
    width: 90vw;
    max-width: 750px;
    text-align: center;
    align-content: center;
}

.package {
    /*border: aliceblue solid;*/
    display: none;
    /*grid-template-areas:*/
    /*        "heading details";*/
    height: 150px;
}

.package-heading {
    /*border: #F0AC31 solid;*/
    /*grid-area: heading;*/
    /*width: 375px;*/
    padding-top: 25px;
}

.package-details {
    /*border-top: #F0AC31 solid;*/
    /*border-right: #F0AC31 solid;*/
    /*border-bottom: #F0AC31 solid;*/
    /*grid-area: details;*/
    /*width: 375px;*/
    padding: 25px 5px;
}

.packages-footer {
    padding: 40px 25px;
}

.songlist {
    /*margin-top: 25px;*/
    overflow-y: scroll;
    height: 600px;
    max-height: 100vw;
}

.songlist thead th {
    position: sticky;
    top: 0;
    background-color: black;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #F0AC31;
    border-radius: 5px;
}

#black {
    background: black;
    border: black;
}

@keyframes fade {
    from {
        opacity: .4;
    }
    to {
        opacity: 1;
    }
}

#default {
    display: block;
}

.landscape-cover {
    display: none;
    color: black;
    background-color: rgb(128, 128, 128);
    opacity: 95%;
    text-align: center;
    width: 110vw;
    height: 110vh;
    position: absolute;
    z-index: 100;
    padding: 30vh 0;
    top: -5px;
    left: -5px;
}

@media only screen and (pointer: coarse) and (orientation: landscape) {
    .landscape-cover {
        display: block;
    }
}

.navbar-test {
    text-align: justify;
}

.navbar-item-test {
    background-color: black;
    border: transparent;
    border-bottom: #F0AC31 solid;
    width: 100%;
    height: 30px;
}

.access_aid {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 0;
    padding-top: 40px;
    overflow: hidden;
    background: black 10px 10px / 20px 20px no-repeat;
}

#access_nav {
    /*width: 10px;*/
    /*height: 10px;*/
    background-image: -webkit-repeating-linear-gradient(#F0AC31, #F0AC31 2px, #000 2px, #000 4px);
    background-image: repeating-linear-gradient(#F0AC31, #F0AC31 2px, #000 2px, #000 4px);
}

#main_nav {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    width: 200px;
    height: 90vh;
    /*text-align: left;*/
    font-size: 30px;
}

#main_nav:target {
    display: block;
}

.current-page-test {
    background-color: #F0AC31;
    color: black;
}

.current-page-test a {
    color: black;
    background-color: #F0AC31;
}

/*button {*/
/*    text-align: justify;*/
/*    font-size: 20px;*/
/*    !*padding: 5px 0;*!*/
/*}*/

ul {
    margin: 0;
}

#sampler-video {
    height: 360px;
    max-height: 90vh;
    width: 640px;
    max-width: 90vw;
    border: none;
}

#desktop-buffer {
    height: 75px;
}

@media only screen and (pointer: coarse) {
    #desktop-buffer {
        display: none;
    }
}

.next-gig {
    padding-top: 25px;
    display: grid;
    grid-template-areas:
                "next-gig-heading"
                "next-gig-container";
    justify-content: center;
}

.next-gig-heading {
    font-weight: bold;
    padding-bottom: 10px;
    grid-area: next-gig-heading;
}

.next-gig-container {
    display: flex;
    grid-area: next-gig-container;
}

.next-gig-date {
    padding: 5px;
}

.next-gig-info {
    padding: 5px 5px 5px 20px;
}