@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap');
        body {

                color: #fff;
                margin: 0;
                font-size: 0.8rem;
		font-family: 'Rajdhani', sans-serif;
                line-height: 1.43;
            #    letter-spacing: 0.01071em;
                background-color: #000;

        }
	.default-font-color {
		color: #e1e1e1;
	}

	.logo {
		font-family: 'Caveat', cursive;
		font-size: 4.4rem;
		padding: 2rem;
		display: inline-flex;
	}
	.logo img {

		height: 110px;
		border-radius: 25%;
	}

	.main {
		text-align: center;
	}

        .box {
                  margin: .4em;
                  padding: 1em;
                  display: inline-block;
                  min-height: 240px;
                  min-width: 426px;
                  background: #22192d;
                  background-size: cover;
                  background-position: center;
                  text-decoration: none;
                  color: #fff;
                  border-radius: 10px;

                  /* Prevent highlight colour when element is tapped */
                  -webkit-tap-highlight-color: rgba(0,0,0,0);

                  /* Smooth fonts */
                  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
                }


	.title {
		text-align: left;
		font-size: 1.2rem;
	}

	.title .right{
		float: right;
	}

	.title .right img{
		width: 1em;
		height: 1em;
		-webkit-filter: invert(1);
		filter: invert(1);
	}

        video, img.thumb {
                  max-height: 260px;
                  width: 426px;
		  margin: auto;
                  display: block;
		  allowfullscreen: true;
		  border: 0;
                  cursor: pointer;
        }

/* Responsive adjustments for mobile devices */
	@media only screen and (max-width: 980px) {
	    .box {
    		    display: block; /* Change to block to stack elements */
    		    margin: 2.1em auto; /* Center the boxes */
    		    min-width: unset; /* Remove minimum width */
    		    width: 88%; /* Adjust width to fit screen */
	    }

	    video, img.thumb {
		    width: 95%;
		    max-height: 460px;
	    }

	    .title {
		    font-size: 2.1rem;
	    }

	}

/*        img.logo {
                max-width: 40em;
                margin: auto;
                margin-bottom: 1em;
        #      padding: 1.5em;
                background-color: #424242;
                display: block;
        }
*/
	img.servicelogo {
		width: 1.8rem;
		height: 1.8rem;
		vertical-align: middle;

	}
	.thumb-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6); /* Kolor tła z 50% przezroczystością (wartość alfa 0.5) */
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 2rem;
		color: darkred;
	}

        .player_container {

                color: #B8860B;
                margin: 0;
                font-size: 1.5rem;
                font-weight: 300;
        }

	.download_container {
		color: #B8860B;
	}

	a:link, a:visited {
                color: #8B0000;
	#	text-decoration: overline underline;
		margin: .6rem;

	}

        .bg {
                background-color: #22192d;
                padding: .2em;
        }

	.hidden {
		display: none;
	}

	.swal2-title {
		font-size: 2.5rem;
	}

	.loading-spinner {
		max-width: 110px;
		border-radius: 25%;
	}
/*
	Search bar and quick links
*/
	#searchbar {
	    border-radius: 1em;
	  }

	input[type=text] {
	    font-size: 1rem;
    	    padding: 0.5em;
	    opacity: 0.6;
    	    -webkit-transition: padding 0.15s ease-in-out;
    	    transition: padding 0.15s ease-in-out;
	}

      /* When the input field gets focus,
    	change its width to 100% */
	input[type=text]:focus {
	    padding: 1em;
	    opacity: 1;
	}

	#quicklinks {
	    font-size: 1.4rem;
	}

	#clear-btn {
	    font-size: 1.2em;
	    text-decoration: none;
	    margin-left: -2em;
	    position: sticky;
	}

    @media only screen and (max-width: 980px) {

	#quicklinks {
	    font-size: 2rem;
	    display: grid;
	}

	input[type=text] {
	    font-size: 1.5rem;
	}
	#clear-btn {
	    font-size: 1.8em;
	}
    }