/* Style.css File */
@font-face {
font-family: 'Adler';
src: url('/fonts/Adler.ttf') format("truetype");
}
@font-face {
font-family: 'CALIBURN';
src: url('/fonts/CALIBURN13%20abandon.ttf') format("truetype");
}
@font-face {
font-family: 'Fantaisie';
src: url('/fonts/FantaisieArtistique.ttf') format("truetype");
}
@font-face {
font-family: 'OverdriveSunset';
src: url('/fonts/Overdrive Sunset.otf') format("opentype");
}
@font-face {
font-family: 'PoorLittleBaby';
src: url('/fonts/PoorLittleBaby.ttf') format("truetype");
}
@font-face {
font-family: 'punkkid';
src: url('/fonts/punk kid.ttf') format("truetype");
}
@font-face {
font-family: 'Scratchy';
src: url('/fonts/SCRATCHL.ttf') format("truetype");
}
@font-face {
font-family: 'Prozak';
src: url('/fonts/prozak.ttf') format("truetype");
}
@font-face {
font-family: 'SpecialElite';
src: url('/fonts/SpecialElite.ttf') format("truetype");
}
@font-face {
font-family: 'DirtyEnough';
src: url('/fonts/DirtyEnough.ttf') format("truetype");
}
body {
    margin: 0;
    /* Font Colour */
    color:#ffd1d1;
    background-color: #0f0f10;
    text-align:center;
    font-family:"Courier New";
scrollbar-color: #c7ffb0 #090909;
scrollbar-width: thin;
cursor:url('/graphics/Cursor1.png'),auto;}
p {font-family:Adler;}
/* Grid layout */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    padding: 10px;
}

/* Thumbnails */
.thumb {
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
    margin: auto;
    cursor: url('/graphics/Cursor2.png'), auto;
    border-radius: 5px;
    filter: drop-shadow(0 0 10px #000000);
}

.thumb:hover {
    filter: saturate(125%) drop-shadow(0 0 10px #000000);
}

.mix {margin-top: -10px;}

.graphich3 {padding-left:15px;margin-bottom:1px;margin-top: -18px;}

.button {background-image:url('/images/button1.png');background-size:100px;background-color: rgba(41, 0, 19, 0.8);
    font-family:'SpecialElite';
    color: #c7ffb0;
    text-shadow: -1px -1px 0 #001601, 1px -1px 0 #001601, -1px 1px 0 #001601, 1px 1px 0 #001601;
    border:none;
    border-radius:5px;
    padding:10px;padding-bottom: 8px;
    box-shadow: 1px 1px 2px 1px #000;
    margin-bottom: 5px;
}
.button:hover {background-color: rgba(41, 0, 19, 0.97);background-image:url('/images/button2.png');background-size:80px;color: #ecffe4;    cursor: url('/graphics/Cursor2.png'), pointer;
}

ff-container, .ff-responsive, .ff-ready, .ff-inactive {
   height: 300px !important;
    width: auto !important;
}
/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    transition: opacity 0.2s ease;
}

/* Caption */
.lightbox-caption {
    font-family: 'Scratchy';
    margin-top: 12px;
    padding: 8px 14px;
    max-width: 80%;
    color: #ffd1d1;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 6px;
}

             .overlay {  rotate: -20deg;
                height: 120px;width:auto;
                position:absolute;
                margin-top:5vh; 
                margin-left:1em;
                z-index: 2;
            }
               .overlay img {
                height: 120px;width:auto;
            }
             .overlay2 {  rotate: 20deg;
                height: 120px;width:auto;
                position:absolute;
                margin-top: 60vh; 
                margin-left:0;
            }
               .overlay2 img {
                height: 120px;width:auto;
            }
.duoimg1, .duoimg2, .duoimg3 {width:25%;max-height:500px;float:left;}
.duoimg1 {margin-left: 0;}
.duoimg4, .duoimg5 {width:45%;height:auto;float:left;}
.duoimg4 {margin-left: 5%;}
.vertical {max-height:500px !important;}
.horizontal {min-width:600px !important;height: auto !important;}
/* Controls */
.nav,
.close {
    position: absolute;
    color: #c7ffb0;
    cursor: url('/graphics/Cursor2.png'), auto;
    user-select: none;
    z-index: 10000;
}

.nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    padding: 20px;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.close {
    top: 20px;
    right: 30px;
    font-size: 30px;
}

h1{font-family:'Scratchy';color:#833b53;text-shadow: -1px -1px 0 #270011, 1px -1px 0 #270011, -1px 1px 0 #270011, 1px 1px 0 #270011;
}
h2{font-family:'CALIBURN';color:#d77898;text-shadow: -1px -1px 0 #270011, 1px -1px 0 #270011, -1px 1px 0 #270011, 1px 1px 0 #270011;
}
h3,h4,h5,h6{font-family:'Adler';color:#861a3b;text-shadow: -1px -1px 0 #270011, 1px -1px 0 #270011, -1px 1px 0 #270011, 1px 1px 0 #270011;
}
p {font-size:13px;}
a {color:#98d5a8;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
a:hover {color:#dcf1e1;cursor:url('/graphics/Cursor2.png'),auto;}
.container {
    background-color: rgba(28, 0, 6, 0.8);
    background-image: url("/images/backgroundtile.jpg");
    border-radius: 3px;
    overflow-y: auto;
    margin-top: 0;
    width: 30%;
    float: left;
    height: 500px;
    margin-left: 2.5%;
}
.container img {
    max-width: 100%;
}
.largeimg img {
    max-width: 20%;
}

.footer {width:100%;float:left;padding-left: 5px;}
.tiny {max-height:16px;max-width:16px;}
@media only screen and (max-width: 1000px) {
.duoimg1, .duoimg2, .duoimg3 {width:48%;float:left;}.duoimg1 {margin-left: 0;}
.duoimg1, .duoimg2, .duoimg3, .vertical {height: auto !important;}
.horizontal {min-width:500px !important;height: auto !important;}.duoimg4 {margin-left: 0;}}

@media only screen and (max-width: 1400px) {.horizontal {min-width:350px !important;}
@media only screen and (max-width: 700px) {
.graphich3 {padding-left:5px;margin-bottom:1px;margin-top: -18px;}
.container {
    background-color: rgba(28, 0, 6, 0.8);
    background-image: url("/images/backgroundtile.jpg");
    border-radius: 3px;
    overflow-y: auto;
    width: 95%;
    float: left;
    height: 500px;
    margin-left: 2.3%;
    margin-top:15px;}
.mix {margin-top: -10px;}
.overlay {  rotate: -20deg;
                height: 120px;width:auto;
                position:absolute;
                margin-top: 6vh; 
                margin-left:0;
            }
.overlay img {
                height: 120px;width:auto;
            }
.overlay2 {  rotate: 20deg;
                height: 120px;width:auto;
                position:absolute;
                margin-top: 60vh; 
                margin-left:0;
            }
.overlay2 img {
                height: 120px;width:auto;
            }

.duoimg1, .duoimg2, .duoimg3 {width:48%;float:left;}.duoimg1 {margin-left: 0;}
.duoimg1, .duoimg2, .duoimg3, .vertical {max-height:320px!important;}
.duoimg4, .duoimg5 {width:100%;height:auto;float:left;margin:auto;}}

.tooltipster-default {
    border-radius: 5px;
    border: 2px solid #000;
    background: rgba(28, 0, 6, 0.8);
    color: #c7ffb0;}}