body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}

body, html {
    height: 100%;
    line-height: 1.8;
}
html {
    background-image: url("../images/p6.webp");
    background-position: top;
}



.w3-padding-none {padding:0px 0px!important}

.w3-content {
    background:white;
}
.w3-content{max-width:1600px}

.w3-bar .w3-button {
    padding: 10px;
}

.w3-card p a {
    text-decoration: none;
}

.w3-argb-gray{background-color: rgba(0,0,0,0.7)}
.w3-shadow { text-shadow: 2px 2px 8px #000000;}

.film-strip {
    --s: 8px; /* control the size */
    --c: #222;

    width: calc(20*var(--s));

    background:
    conic-gradient(at 50% var(--s),var(--c) 75%,#0000 0)
    0 0/calc(2*var(--s)) calc(100% - var(--s)) padding-box;
    border: var(--s) solid var(--c);
    padding: calc(var(--s)*2.5) calc(var(--s)*1.5);
    box-sizing: border-box;
    /* you can add a filter for an oldish effect
    filter: sepia(1) brightness(0.9) grayscale(.2);
    */
}

.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}

.youtube-video {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.hover-colorize {
    /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
    -webkit-transition: all .8s ease-in-out;
}

.hover-colorize:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.01);
}

.player {
    position: absolute;
    right: 1%;
    bottom: 1%;
    z-index: 10001;
    color: white;
    transform: scale(0.5);
    transform-origin:bottom right;
}

/**********************************************************************************************************************/

#sortable { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; height: auto; position: relative}
#sortable img {font-size: 0; width: 200px; height: 120px;}
#sortable li { margin: 3px 3px 3px 3px; padding: 0; display: inline-block; width: 200px; height: 120px; text-align: center; overflow: hidden; position: relative; background: #eeeeee}
#sortable li span {position: absolute; top: 1px; left: 1px; font-size: 1rem; color: #eeeeee}

.highlight {
    border: 1px solid #f9f9f9;
    font-weight: bold;
    font-size: 45px;
    background-color: #333333;
}
.default {
    background: #cedc98;
    border: 1px solid #DDDDDD;
    color: #333333;
}

#imageurlsave {
    display: block;
    margin: auto;
}

.progress {
    width: 100%;
}

.progress .bar {
    color: black;
    width: 100%;
    height: 1rem;
    background: #DDDDDD;
}

.percent {
    margin: 0.5rem auto;
    text-align: center;
}

.response {
    color: #378000;
    text-align: center;
}