@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');


* {
    box-sizing: border-box;

    font-family: sans-serif;
}

*::selection {
    background-color: #501a91;
    color: #f9f4f5;

}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}


body {
    background-color: #0e1012;
}



#bgimg {
    width: 100%;

    margin-bottom: 10px;
}

nav {
    position: relative;
}

.sociallinks {
    position: absolute;
    right: 0px;
    top: 150px;
    z-index: 10;
}


.sociallinks ul li a:hover,
.sociallinks ul li a:focus {
    transform: scale(1.1);
}

.sociallinks ul {
    background-color: #f9f4f5;
    border-radius: 5px;

}

.about span {
    font-weight: bold;
}

article a,
article a:visited,
footer a,
footer a:visited {
    color: #501A91;
    font-weight: bold;
    text-decoration: none;
}

article a:hover,
footer a:hover {
    color: #351061;
}

article a:focus,
footer a:fovus {
    color: #351061;
}

.darkbg {
    color: #F9F4F5;
}

.lightbg {
    background-color: #F9F4F5;
}

h2,
h3 {
    font-family: 'Orbitron', sans-serif;
    margin-top: 10px;
}

.about h2 {
    border-left: solid 3px #501A91;
    border-bottom: solid 3px #501A91;
    border-radius: 0 0 0 5px;
    padding: 5px;
    display: inline-block;
}

.review section {
    border: solid 3px #f9f4f5;
    ;
    border-radius: 5px;
    margin-top: 20px;
    padding: 10px;
}

.review section h3 {
    margin-top: 5px;
}

.date {
    font-size: 0.7em;
    margin: 0;
    font-style: italic;
}

.center {
    text-align: center;
}

.review h2 {
    border-bottom: solid 3px #501A91;
    display: inline-block;
    padding-bottom: 6px;
}

.troeven h3 {
    color: #501A91;
}

.troeven h2 {
    padding-top: 10px;
    padding-bottom: 6px;
    display: inline-block;
    border-bottom: solid 3px #501A91;
}

footer {
    color: #F9F4F5;
    text-align: center;
    padding-top: 20px;
    margin-top: 20px;
}

footer img {
    margin-bottom: 5px;
}

nav a {
    font-family: 'Russo One', sans-serif;
    padding-bottom: 5 !important;

}

.homescreen {
    position: relative;
}

.onvideo {
    position: absolute;
    top: 50%;
    width: 100%;
    color: #F9F4F5;
    text-align: center;
}

.onvideo p {
    font-size: 3em;
    font-family: 'Russo One', sans-serif;
}

.onvideo a {
    border: solid 2px #501a91;
    padding: 10px;
    border-radius: 100000px;
    font-weight: bold;
    font-family: 'Russo One', sans-serif;
    background-color: #F9F4F5;
    color: #090302 !important;
    text-decoration: none;
}

.onvideo a:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
}


/*Highlights:*/

.gallery {
    margin-top: 150px;
    color: white;
}


.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    justify-content: center;
    margin-top: 50px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover {
    transform: scale(1.05);
}



/*Contact:*/
/*
.form-control:focus {
    border: solid 3px #501A91;


}

*/

form label {
    color: #f9f4f5;
}

form input {
    background-color: #f9f4f5;
}

.footerlinks {
    width: 100%;
}

#contactme {
    margin-top: 150px;
    color: #f9f4f5;
}

form button {
    background-color: #501A91 !important;
    border: 3px #351061 !important;

}

.btn {
    transition: .2s ease-in-out 0s;
}

.btn:hover {
    transform: scale(1.05);
}


.form-control:focus {
    border: solid 3px #501a91;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 8px rgba(0, 0, 0, 0.6);
}



/*Music*/
.musicplaceholder {
    min-height: 80vh;
}

.placeholdercard {
    background-color: rgba(255, 255, 255, .5);
    width: 50%;
    padding: 50px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 6px 8px 0 rgba(255, 255, 255, 0.24), 0 8px 25px 0 rgba(255, 255, 255, 0.19);
    transition: transform 0.3s;
    margin-top: 50px;

}


.placeholdercard:hover {
    transform: scale(1.03);
}


/*Sets:*/
.videoPrev {
    width: 25%;
}

.videoPrev img {
    width: 100%;
}


.wistia-container {
    width: 100%;
    height: 250px;
}


.videoPrev {
    position: relative;
}

.videoPrev img {
    display: block;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    opacity: 0;

}

.videoPrev:hover .overlay {
    opacity: 1;
}

.overlay-content {
    z-index: 10;

}


.videoPrev::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Adjust the opacity and color as per your preference */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.videoPrev:hover::after {
    opacity: 1;
}



.placeholder {
    min-height: 150px;
}

.active {
    color: #501A91 !important;
    font-weight: bold;
}



@media screen and (min-width:768px) {
    .active {
        border-bottom: solid 3px #501A91;
    }

    nav a:hover {
        color: #501A91 !important;
    }

    nav {
        position: static;
    }

    .sociallinks {
        position: static;
    }

    .sociallinks ul {
        background-color: transparent;

    }

    #navbalk {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }

    .troeven h2 {
        margin-bottom: 20px;
    }

    nav img {
        width: 150px;
    }



}

@media screen and (min-width:992px) {
    .troeven h3 {
        text-align: center;
    }

    .troeven p {
        text-align: center;
    }

    nav img {
        width: 250px;
    }

    .footerlinks {
        width: 50%;
    }

    .placeholdercard {

        margin-top: 200px;

    }
}


@media screen and (min-width:1500px) {
    .footerlinks {
        width: 30%;
    }
}