/* * {outline: 1px solid #f00;} */
:root {
    --main-bg-color: #181818;
    --main-radius: .3rem;
    --button: #026496;
    --button-hover: #0284c5;
  }
html {
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--main-bg-color);
    color: #ddd;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    text-align: center;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
p {
    padding: 0;
    margin: 0;
}
img {
    max-width: 100%;
    height: auto;
}
h1, h2, h3, h4, h5 {
    font-size: 1rem;
    color: #ddd;
    font-weight: normal;
    padding: 0;
    margin: 0;
    text-align: left;
}
.wrap {
    margin-inline: auto;
    padding: 0 min(.5rem, 1.25rem);
    max-width: 1400px;
}
.header {
    /* background-image: url("images/logo.png");
    background-size: 100%;
    background-repeat: no-repeat; */
    max-width: 390px;
    height: 40px;
    margin: 1rem 0;
}
main.index {
    display: grid;
    grid-template-columns: 1fr;
}          
main.gallery {
    padding-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1rem;
}
        @media screen and (max-width: 900px) { 
            main.gallery {
                grid-template-columns: 1fr;
            }
            .sidebar {
                display: none;
            }
        }   
.thumbs { 
    font-size: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: .4rem;
}         
    .thumbs img {
        border-radius: var(--main-radius);
        width: calc(100% - .3rem);
        border: .15rem solid var(--main-bg-color);
    }
    .thumbs img:hover {
        border: .15rem solid #d43584;
    }
    .thumbs span {
        display: table;
        background-color: #333;
        padding: .5vh max(1vw, .5rem);
        color: #f5f5f5;
        border-radius: var(--main-radius);
        margin-block: .5rem;  
        text-decoration: none;
        
    } 
    .thumbs h3 {
        display: table;
        background-color: #333;
        padding: .5vh max(1vw, .5rem);
        color: #f5f5f5;
        border-radius: var(--main-radius);
        margin-block: .4rem;  
        text-decoration: none;
        /* font-size: calc(1rem + .3vh); */
        font-size: 1rem;
    }   
    /* .thumbs h3 a:hover {
        background-color: #d43584;
    }      */
    .thumbs h4 {
        margin-inline: auto;
        width: 98%;
        padding: .25rem 0;
        font-size: 1.2rem;
        color: #6bcbe3;
    }
    .thumbs.index h4 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .thumbs p {
        font-size: 1rem;
        margin-inline: auto;
        width: 98%;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .thumbs a {
        color: #fff;
    }
.viewer {

}   
.player {
    position: relative;
    max-width: 100%;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
    .player iframe,
    .player object, 
    .player video, 
    .player embed {
            /* position: absolute; */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;    
            border-radius: var(--main-radius);  
        }   
.videodescription {
    font-size: 1rem;
    margin-block: .5rem;
    padding: 0;
    text-align: left;
}
    .videodescription h1 {
        font-size: 1.5rem;
    }
    /* .videodescription h2:before {
        content: "Her name is ";
        
    } */
    .videodescription h2 {
        display: table;
        background-color: #333;
        font-size: 1.3rem;
        font-weight: normal;
        padding: .9vh max(1vw, .9rem);
        color: #f5f5f5;
        border-radius: var(--main-radius);
        margin-block: .5rem;  
        text-decoration: none;
    }   
    /* .videodescription h2 a:hover {
        background-color: #d43584;
    }  */
    .videodescription p {
        padding: .2rem 0;
    }
    .videodescription a, .videodescription a:hover {
        color: #fff;
    }
.download {
    margin: 1.2rem 0;
    padding: 20px 0;
    background-color: var(--button);
    font-size: 1.5rem;
    color: #f5f5f5;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: var(--main-radius);
}
    .download:hover {
        /* background-color: #f5f5f5; */
        background-color: var(--button-hover);
    }
.addon {
    /* clear: both; */
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .5rem;
    margin: 0 auto;
    /* justify-content: center; */
}
.pagination {
    clear: both;
    margin-inline: auto;
    }
    .pagination ul {
        margin-top: 2rem;
    }
    .pagination li {
        list-style: none;
        display: inline;
        font: 22px Helvetica;
        color: #f5f5f5;
        text-decoration: none;
        font-weight: bold;
    }
    .pagination li a {
        padding: 6px 16px;
        margin: 5px 4px;
        background-color: var(--button);
        font: 22px Helvetica;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        border-radius: var(--main-radius);
    }
    .pagination li a:hover {
        text-decoration: none;
        background-color: var(--button-hover);
        /* box-shadow: 1px 1px 1px #aaa; */
    }          
.sitedescription {
    clear: both;
    /* margin: 0; */
    font-size: .9rem;
    padding-top: 3rem;
}
footer {
    margin-inline: auto;
    padding-top: 3rem;
    font-size: .8rem;
    color: #bbb;
    font-size: .9rem;
}
    footer a {
        color: #fff;
        text-decoration: none;
    }
    footer a:hover {
        text-decoration: underline;
    }
.galleries {
    clear: both;
    padding-block: .5rem;
    text-align: left;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .8rem;
    padding-top: 1rem;
}
    .galleries a {
        display: block;
        border-radius: .2rem;
        vertical-align: top;
        background-color: #fff;
        font: normal 1.3rem Tahoma, sans-serif;
        color: #326f9e;
        font-weight: bold;
        padding: .7rem;
        text-decoration: none;
        /* text-transform: uppercase; */
    }
    .galleries a:hover {
        color: #ce3f7f;
        /* background-color: #fae8d1; */
    } 

/* .tops {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: .5rem;
        padding-top: 2rem;
        font-size: clamp(1.5625rem, 1.519rem + 0.2174vw, 1.6875rem);
    }
    .tops a {
        white-space: normal;
        color: #d43584;
        line-height: 1.2;
        vertical-align: top;
        margin: .8rem;
        text-decoration: none;
    }
    .tops a:hover {
        text-decoration: none;
        color: #f844a2;
    }
    .tops a::before {
        content: "\21aa\00a0";
        font-style: normal;
        color: #fff;
    }     */