@font-face {
        font-family: Wonder;
        font-display: swap;
        src: url("/SF Wonder Comic.woff2")
}

html {
    font-family: Wonder;
    color: rgb(50,0,50);
}

ul {
    list-style-type: none;
    padding: 0;
}
/*SLIDER*/

.slider {
    
    /*max-height: 300px;*/
    overflow: hidden;
    color: white;
    box-sizing: border-box;
    position: relative;
    
}

.slider a {
    color: rgb(255, 200, 255);
    text-decoration: none
}

.slider a:hover {
    color: white
}

.slider .text-box {
    background-color: rgba(50,0,50,0.8);
    margin-top: 10px;
    padding: 10px;
}
.slider h3, .slider p {
    margin: 10px;
}
.slider img {
    max-width:100%;
    max-height: 200px;
    margin-inline: auto;
    display: block;
    /*filter:brightness(100%)sepia(100%)hue-rotate(230deg)saturate(300%);*/
}

.slider img:hover {
    filter: brightness(120%)
}

.slider-post {
    display: none;
}

.next, .prev {
    position: absolute;
    font-size: 20px;
    top: 20%;
    width: auto;
    padding: 10px;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    color: rgb(50,0,50)
}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
        
}

.slide {
    animation-name: slide;
    animation-duration: 1s;
}

@keyframes slide {
    from {filter:brightness(30%)sepia(100%)hue-rotate(-100deg)saturate(200%)contrast(200%)}
    to {filter:brightness(100%)}
}
/*SIDE MENU*/

.side_menu {
    font-family: Impact, Haettenschweiler;
}




.menu {
    background-color: rgba(50,0,50,0.8);
    padding: 10px;
}

.side_menu ul {
    padding-inline:15px;
    display: flexbox;
    
}

.side_menu li {
    /*border: 5px solid rgb(255,200,240);*/
    padding: 5px;
}

.side_menu a {
    color: white;
    text-decoration: none;
    font-size: 24px;
    width: 100%;
    display: block;
    margin: 10px 0 10px 0;
    font-style: italic;
    transition: 0.3s;
}

.side_menu .current {
    font-size: 24px;
    cursor: pointer;
    margin: 10px 0 10px 0;
    font-style: italic;
}

.side_menu .current,.side_menu a:hover {
    color: rgb(255, 200, 255);
    text-shadow: 0 0 7px rgba(255,200,240,0.8);
    
}

.side_menu .big-tiddy-button {
    width: 100%;
}

.big-tiddy-button:hover {
    filter: brightness(120%)
}

.side_menu .bta-button-box {
    margin-top: 25px;
}

.friends-link {
    margin-top: 15px;
}

.friends-link img {
    width: 60%;
}

@media only screen and (max-width:1250px) {
    .side_menu .big-tiddy-button {
        width: 75%;
        display: block;
        margin: auto;
        margin-bottom: 25px;
        
    }
    
    .menu {
        background-color: rgb(50,0,50);
        margin: 0;
    }
    
    .menu-button {
        display: block;
    }
    
    
    .page {
        width: 100%;
    }
    
    .showing {
        max-height: 100em;
    }
    
    .friends-link a {
        display: block;
        text-align: center;
    }
}