body, html {
    height: 100%;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

#avatar {
    border-radius: 50%;
    background-image: url('/resources/images/BredeFK_2.webp');
    background-position: center;
    background-size: cover;
    height: 200px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

#avatar:hover {
    background-image: url('/resources/images/BredeFK.webp');
}

.parallax {
    /* The image used */
    background-image: url("/resources/images/background-image.webp");

    /* Set a specific height */
    height: 75%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container {
    margin: 0 auto;
    text-align: center;
    color: white;
    padding: 50px;
}

.demo {
    height: 1000px;
    background-color: #535c54;
    padding: 30px;
    color: black;
}

.demo-title {
    font-size: 36px;
}

.a-white {
    color: white;
}

.a-white:hover {
    color: darkgrey;
}

.a-white:active {
    color: black;
}

.nav-bar {
    padding: 20px 0 20px 20px;
    text-align: center;
}

.font-orbitron {
    font-family: 'Orbitron', sans-serif;
}

.hideElement {
    display: none;
}

.bgColor {
    background-color: #cecece;
}

.song {
    color: black;
    font-family: monospace;
    overflow: auto;
    line-height: 1em
}

ul {
    display: table;
    margin: 0 auto;
}

div.card {
    background-color: lightblue;
}

.video {
    height: 304px;
    width: 540px;
}

/* TODO : Merge these four classes in to two classes */
.card button.btn-dark-blue {
    background-color: #547EA8;
    color: black
}

.card a.btn-dark-blue {
    background-color: #547EA8;
    color: black
}

.card button.btn-dark-blue:hover {
    background-color: #436486;
    color: black
}

.card a.btn-dark-blue:hover {
    background-color: #436486;
    color: black
}


@media only screen and (max-width: 800px) {
    .song {
        font-size: 10px;
    }

    div.card-body {
        padding: 0;
    }

    div.card {
        padding-left: 5px;
        padding-top: 10px;
    }

    #file-list {
        padding-right: 5px;
        padding-left: 5px;
    }

    .video {
        height: 169px;
        width: 300px;
    }

    .btn-dark-blue {
        margin-bottom: 15px;
    }

}

#ticking-bomb-game-body {
    background-color: #121212;
    color: white;
}

#bomb-title {
    font-family: 'Orbitron', sans-serif;
}

#timer {
    font-size: 3rem;
    font-weight: bold;
}

#passButton {
    background-color: #007bff;
    border-color: #007bff;
    font-size: 1.2rem;
}

#passButton:disabled {
    background-color: #ff3333;
    border-color: #ff3333;
    cursor: not-allowed;
}

/* Button Fade-Out */
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Button Pulse Effect */
.pulse-animation {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}