/* * {outline: 1px solid pink} */

@font-face {
  font-display: swap; 
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/permanent-marker-v16-latin-regular.woff2') format('woff2');
}
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    padding: 0;
    margin: 0;
    text-align: center;
}
body {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    padding-inline: .5rem;
    background-color: #323031;
}
p {
    padding: 0;
    margin: 0 auto;
}
a, a:link, a:active, a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
img {
    max-width: 100%;
    height: auto;    
    border: none;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
h1, h2, h3, h4, h5 {
    padding: 0;
    margin: 0;
    font-weight: normal;
}
header {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 2rem;
    height: 4rem;
    margin-bottom: .4rem;
    text-align: left;   
    align-items: center;
}
.logo {
    font-size: 3rem;
    line-height: 1;
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
    color: #DB3A34;
    text-shadow: 2px 1px 1px rgba(247, 213, 212, .7);
}
.headerlinks {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}      
    .headerlinks a {
        font-size: 1.2rem;
        text-transform: capitalize;
        color: #333;
        background-color: #fff;
        padding: .2rem 1rem .2rem 1rem;
        border-radius: 1.2rem;
        /* font-weight: bold; */
    }             
    .headerlinks a:hover {
        color: #fff;
        background-color: #323031;
    }
    .male {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5em;
        aspect-ratio: 1;               
        border-radius: 50%;
        background: blue;
        color: #fff;
    }
    .female {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5em;
        aspect-ratio: 1;               
        border-radius: 50%;
        background: red;
        color: #fff;
    }    
    .male::before {
        content: "\2642";
    }
    .female::before {
        content: "\2640";
    }
                @media screen and (max-width: 1400px) {
                    header {
                        grid-template-columns: 1fr;
                        height: auto;
                        gap: .5rem;
                    }
                    .logo {
                        text-align: center;
                    }
                    .headerlinks {
                        justify-content: center;
                    }
                }
                @media screen and (max-width: 600px) {
                    .headerlinks {
                        display: none;
                    }
                }
                @media screen and (max-width: 500px) {
                    .logo {
                        font-size: 2rem;
                    }
                }    
.thumbs {
	clear: both;
	font-size: 0;
    margin-inline: auto;
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
	gap: .8rem;
}	
    .thumbs img {
        box-shadow: 0 4px 12px rgba(10, 8, 9, 0.45), 0 1px 3px rgba(10, 8, 9, 0.6);
        border-radius: .4rem;
    }
	.thumbs img:hover {
        outline: 1px solid rgba(255,255,255,0.3);
	}
    .thumbs.related {
        padding-top: .8rem;
    }
            @media screen and (max-width: 800px) {
                .thumbs {
                    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                }
            } 
.embed {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1000px) 1fr;
    gap: .8rem;
}    
.video-container {
    margin: 0;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(10, 8, 9, 0.45), 0 1px 3px rgba(10, 8, 9, 0.6);
    border-radius: .4rem;
}
    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.sidebar {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    gap: .8rem;
    overflow: hidden;
    line-height: 1.2;
    /* margin-block: .4rem; */
    /* padding-top: 2rem; */   
}     
    .leftside {
        justify-content: right;
    }
    .rightside {
        justify-content: left;
    }  
    .index {
        padding-top: .8rem;
    }
                @media (max-width: calc(340px*2 + .8rem*2 + 1000px )) {
                    .embed {
                        grid-template-columns: 1fr;
                        justify-content: center;
                    }
                    .leftside {
                        order: 2; 
                        justify-content: center;
                    }
                    .frontside {
                        order: 1; 
                    }
                    .rightside {
                        order: 3;
                        justify-content: center;
                    }
                }      
    .sidebar a {               
        color: #084C61;
        background-color: #fff;
        font-size: 1.8rem;
        padding: .4rem 2.4rem;     
        text-decoration: none;  
        letter-spacing: 1px;
        border-radius: .4rem;
        border: 1px solid transparent;
    }
    .sidebar a:hover {
        color: #fff;
        background-color: #177E89; 
        text-decoration: none;  
        /* border: 1px solid white; */
        box-shadow: 0 4px 12px rgba(10, 8, 9, 0.4), 0 1px 3px rgba(10, 8, 9, 0.6);
        border: 1px solid rgba(255,255,255,0.5);
    }
    .sidebar span {
        display: block;
        font-size: 1rem;
        background-color: #FFC857;
        color: #333;
        padding: 0.2rem 2rem;
        margin: .5rem 0 .3rem 0;
        border-radius: .2rem;
        /* letter-spacing: -.5px; */
    }
    .sidebar a:hover span {
        box-shadow: 0 4px 12px rgba(10, 8, 9, 0.2), 0 1px 3px rgba(10, 8, 9, 0.4);
    }
footer {
    padding-top: 2rem;
}
   


/* https://coolors.co/palette/177e89-084c61-db3a34-ffc857-323031 */



/* .toplist {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    gap: .6rem;
    overflow: hidden;
    margin-block: .4rem;
    line-height: 1.2;
    font-size: 1.8rem;
    padding-top: 2rem;
}
    .toplist a {               
        color: #084C61;
        background-color: #fff;
        font-size: 1.8rem;
        padding: .4rem 2.4rem;     
        text-decoration: none;  
        letter-spacing: 1px;
        border-radius: .4rem;
        border: 1px solid transparent;
    }
    .toplist a:hover {
        color: #000;
        background-color: #FFD60A; 
        text-decoration: none;  
    }
                @media screen and (max-width: 500px) {
                    .toplist {
                        font-size: 1.5rem;
                    }
                }   */