/* * {outline: 1px solid #ccc;} */
:root {
    --link-gen: #00619d;
    --link-gen-hover: #008acc;
    --radius: 3px;
  }  
html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    background: #242424;
    text-align: center;
    font-family: 'Lato', sans-serif;
    /* font-family: 'Rubik', sans-serif; */
}
ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
p {
	padding: 0;
	margin: 0;
}
img {
    max-width: 100%;
    height: auto;
}
.wrap {
    margin-inline: auto;
    max-width: 1200px;
    background-color: #fff;
    padding-left: .5rem;
    padding-right: .5rem;
}
header {
    /* margin: 0 ; */
}
.title {
    padding: .8rem 0 .8rem 1.4rem;
    text-align: left;
    font: normal clamp(2.375rem, 2.0054rem + 1.8478vw, 3.4375rem) 'Lato', sans-serif;
    color: #008acc;
}
    .title a, #title a:hover, a:visited {
        color: #008acc;
        text-decoration: none;
    }
    .title span {
        color: #000;
        font-weight: bold;
    }
    .title h1 {
        font-size: 1rem;
        color: #242424;
        text-align: left;
        font-weight: normal;
        padding: 0;
        margin: 0;
    }
            @media screen and (max-width: 450px) {
                .title {
                    padding-left: 0;
                    text-align: center;
                }
                .title h1 {
                    text-align: center;
                }
            }    
main {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: .5rem;     
    /* margin-inline: auto;    */
}        
        @media screen and (max-width: 800px) {
            main {
                grid-template-columns: 1fr;
            }
        }    
.thumbs {
    clear: both;
    display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: .5rem;
	font-size: 0;
    align-content: start; 
}	
    .thumbs a, .thumbtop a {
        text-decoration: none;
    }
	.thumbs a img, .thumbtop a img {
		border-radius: .2rem;
        outline: .25rem solid transparent;
	}   
    .thumbs a:hover img, .thumbtop a:hover img {
        border-radius: .2rem;
        outline-color: var(--link-gen);
    }
.thumbtop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: .5rem;
	font-size: 0;
    align-content: start;
    padding-bottom: 1.0rem;
}
            @media screen and (max-width: 500px) {
                .thumbtop {
                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                }
            }
.videodata {
    font-size: .9rem;   
    color: #000;
    /* padding-top: .2rem; */
}
    .videodata em::before {
        content: 'source: ';
        color: var(--link-gen);
        font-weight: normal;
    }
    .videodata em {
        font-weight: bold;
        font-style: normal;
        float: left;
    }
    /* .videodata span::before {
        content: 'pornstar: ';
        font-weight: normal;
    } */
    .videodata span {
        float: right;   
        font-weight: bold;
    }
.sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-content: start; 
}    
.categories {
    order: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: .2rem;
    text-align: left;
}
    .categories a {
        background-color: var(--link-gen);
        text-decoration: none;
        color: #fff;
        font-size: 1.4rem;
        padding: .6rem .9rem;
        margin-block: .2rem;
        line-height: 1;
        border-radius: var(--radius);
    }
    .categories a:hover {
        background-color: var(--link-gen-hover);
    }
            @media screen and (max-width: 800px) {
                .categories {
                    order: 2;
                    grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
                }
                .categories a {
                    margin: .4rem;
                    /* color: var(--link-gen);
                    background-color: transparent; */
                }
                .categories a:hover {
                    /* color: var(--link-gen-hover);
                    background-color: transparent; */
                }
            }    
.video-container {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;    
    font-size: 0;
    /* margin-bottom: .5rem; */
}
    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: var(--radius);
    }  
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    gap: .6rem;
    margin-block: .5rem;
}
    .breadcrumbs a {       
        font-size: 0.9rem;
        color: #fff;
        background-color: #000;
        padding: .3rem 1rem;
        border-radius: var(--radius);         
        text-decoration: none;  
    }
    .breadcrumbs a:hover {
        color: #000;
        background-color: #fff; 
        text-decoration: none;  
    }    
.galleries {
    clear: both;
    padding-block: .5rem;
    text-align: left;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .2rem;
    /* padding-top: 1rem; */
}
    .galleries a {
        display: block;
        /* border-radius: .4rem; */
        vertical-align: top;
        background-color: #fff;
        font: normal 1.3rem Tahoma, sans-serif;
        background-color: var(--link-gen-hover);
        color: #fff;
        padding: .7rem;
        text-decoration: none;

    }
    .galleries a:hover {
        color: #fff;
        background-color: var(--link-gen);
    }                   
.list {
    order: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: .2rem;	
    text-align: left;
    padding-top: 1rem;
}
    .list a {
        background-color: var(--link-gen);
        text-decoration: none;
        color: #fff;
        font-size: 1.4rem;
        padding: .6rem .9rem;
        margin-block: .2rem;
        line-height: 1;
        border-radius: var(--radius);
    }
    .list a:hover {
        background-color: var(--link-gen-hover);
    }      
            @media screen and (max-width: 800px) {
                .list {
                    order: 1;
                    grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
                }
                .list a {
                    margin: .4rem;
                }
            }    
.footer {
	clear: both;
	padding-top: 3rem;
	margin-inline: auto;
	font-size: 16px;
	color: #aaa;
}
    .footer a {
        text-decoration: none;
        color: #666;
    }
    .footer a:hover {
        text-decoration: none;
        color: #222;
    }



            /* color: #f5f5f5; */