html {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body {
    cursor: auto;
    background-color: #353696;
}





    /*
    --- FONTS ---
    pirata one
    special elite
    pixelify sans
    space grotesk
    --- FONTS ---
    */


p {
    font-size: 0.9rem;
    font-family: "Space Grotesk", Helvetica, Arial;
    line-height: 1.2rem;
    text-align: justify;
    color: #353696;
    overflow-wrap: break-word;
    margin: 1rem 0;
}

h2 {
    font-size: 1.5rem;
    font-family: 'Special Elite', "Times New Roman";
    font-weight: bolder;
    line-height: 2rem;
    letter-spacing: 0.3ch;
    text-align: center;
    color: #353696;
}
        

h3 {
    font-size: 1rem;
    font-family: 'Special Elite', "Times New Roman";
    font-weight: bold;
    line-height: 1rem;
    letter-spacing: 0.3ch;
    text-align: center;
    color: #eaefdc;
    background: linear-gradient(0deg,#86bc47 0%, #2b573c 10%, #4b8a48 45%, #86bc47 90%, #2b573c 100%);
    margin: 0 0 1rem;
    padding: 0.3rem;
}

ul {
    font-size: 0.9rem;
    font-family: "Special Elite", "Times New Roman";
    text-align: left;
    color: #353696;
    list-style-type: square;
    list-style-position: outside;
    margin: 0 0 1rem -1.5rem;
}

a {
    text-decoration: underline;
    letter-spacing: 0.1ch;
    text-align: center;
    color: #f63b79;
    transition: 0.5s;
}
    a:hover {
        filter: blur(0.5rem);
    }

::selection {
    background: #f63b79;
    color: #eaefdc;           /* text color */
}





.rainbow-text {
    background: repeating-linear-gradient(45deg, red 0%, yellow 15%, lime 22%, cyan 25%, blue 35%, magenta 47%, red 50%);
    -webkit-animation: 'slide' 50s infinite linear forwards;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
    @keyframes slide {
        0% {
        background-position-x: 0%;
        }
        100% {
        background-position-x: 300vw;
        }
    }
.jerky-animation {
    animation: jerky 0.5s infinite;
}
    @keyframes jerky {
        0% {
            transform: rotate(1.5deg);
        }
        50% {
            transform: rotate(1deg);
        }
        51% {
            transform: rotate(-1.5deg);
        }
        100% {
            transform: rotate(-1deg);
        }
    }
.blinking-text {
    animation: blinking 0.75s infinite;
}
    @keyframes blinking {
        0% {
            opacity: 100;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 100;
        }
    }
.updown-animation {
    animation: updown 1s infinite;
}
    @keyframes updown {
        0% {
            bottom: 1rem;
        }
        50% {
            bottom: 1.5rem;
            filter: brightness(1.2);
        }
        100% {
            bottom: 1rem;
        }
    }




header {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
    header img {
    transition: 1s ease-out;
}
    header img:hover {
        transform: rotate(-360deg) scale(1.5);
        transition: 0.75s ease;
    }
    header a:hover {
        filter: none;
    }





.primary-container {
    display: grid;
    grid-template-columns: 19% 60% 19%;
    gap: 1%;
    padding: 0;
    margin: 2rem auto;
    width: 75rem;
    filter: drop-shadow(3px 3px 1px #0b0d4bae);
}
main {
    padding: 1rem;
    background-color: #eaefdc;
    background-image: url(https://sadhost.neocities.org/images/tiles/wp24.gif);
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: 2rem;
    border: #eaefdc ridge 0.15rem;
    box-sizing: border-box;
    height: fit-content;
}

.sidebar-container {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: fit-content;
}
    .inside-container {
        padding: 0.5rem;
        background-color: #eaefdc;
        background-image: url(https://sadhost.neocities.org/images/tiles/tumblr_inline_mlkxr4nUiK1r53miq.png);
        background-repeat: repeat;
        background-attachment:scroll;
        background-size: 5rem;
        border: #eaefdc ridge 0.15rem;
        box-sizing: border-box;
    }
    .transparent-container {
        padding: 0.5rem;
        background: linear-gradient(0deg,#fefdee 0%, #eaefdc 5%, #ffffff00 20%, #ffffff00 80%, #eaefdc 95%, #fefdee 100%);
        border: #eaefdc ridge 0.15rem;
        box-sizing: border-box;
    }

.gifypet-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}





.general-buttons-container {                  /*CONTAINER FOR BUTTONS*/
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    margin: 0.5rem 0;
}
    .general-buttons {
        font-size: 0.8rem;
        font-family: 'special elite';
        font-weight: lighter;
        text-decoration: none;
        color: #eaefdc;
        background: linear-gradient(0deg,#379fc4 0%, #3d2963 10%, #353696 45%, #379fc4 90%, #3d2963 100%);
        border-radius: 5rem;
        padding: 0.3rem 1rem;
        transition: 1s ease;
    }
        .general-buttons:hover {
            transform: translateX(1rem) skew(22deg) rotate(-2deg);
            background: linear-gradient(0deg,#f63b79 0%, #3d2963 10%, #353696 45%, #f63b79 90%, #3d2963 100%);
            filter: drop-shadow(0px 0px 0.3rem #f63b79)
                    drop-shadow(0px 0px 0.6rem #f63b79);
            transition: 0.25s ease;
        }
        .general-buttons:nth-child(even):hover {
            transform: translateX(-1rem) skew(-22deg) rotate(2deg);
            transition: 0.25s ease;
        }

.left-right-divider {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}




.inline-social-media-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    margin: 1rem 0 2rem;
}
    .social-media-button {
        font-size: 0.8rem;
        font-family: 'special elite';
        font-weight: lighter;
        text-decoration: none;
        color: #eaefdc;
        background: linear-gradient(0deg,#379fc4 0%, #3d2963 10%, #353696 45%, #379fc4 90%, #3d2963 100%);
        padding: 0.3rem 1rem;
        width: 100%;
        height: fit-content;
        transition: 1s ease;
    }
        .social-media-button:hover {
            transform: skew(22deg);
            background: linear-gradient(0deg,#f63b79 0%, #3d2963 10%, #353696 45%, #f63b79 90%, #3d2963 100%);
            filter: drop-shadow(0px 0px 0.3rem #f63b79)
                    drop-shadow(0px 0px 0.6rem #f63b79);
            transition: 0.25s ease;
        }





.wall-of-honor-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    width: 90%;
    margin: 1rem auto;
}
    .wall-of-honor-container img {
        width: 100%;
        border: #eaefdc ridge 0.15rem;
        box-sizing: border-box;
        margin: 0;
        transition: 1s ease;
    }
        .wall-of-honor-container img:hover{
            transform: rotate(-4deg) scale(1.25);
            transition: 0.25s ease;
        }
    .wall-of-honor-container p {
        font-size: 0.8rem;
        font-family: 'Pixelify Sans';
        font-style: oblique;
        text-align: center;
        color: #eaefdc;
        background: linear-gradient(0deg,#f0d375 0%, #cc6618 10%, #eda24c 45%, #f0d375 90%, #cc6618 100%);
        padding: 0.25rem;
        margin: 0;
    }

.wall-of-honor-container article {
    width: 100%;
}
    .wall-of-honor-container article:nth-child(2n) {
        transform: rotate(1deg);
    }
    .wall-of-honor-container article:nth-child(2n+1) {
        transform: rotate(-1deg);
    }




.video-crop-container {                 /* Wrapper defines the crop area */
    width: 100%;           /* visible width */
    height: 7.75rem;          /* visible height */
    overflow:hidden;       /* hides the rest */
    border-radius: 5rem;
    border: #fefdee ridge 0.15rem;
    box-sizing: border-box;
    position: relative;
    align-items: center;
    margin: 1rem 0 0;
}
    .video-crop-container iframe {          /* Move the iframe inside the crop window */
        position: absolute;
        top: 0;            /* shift iframe up or down */
        left: 0;           /* shift iframe left or right */
        width: 100%;           /* make sure iframe is larger */
        height: 7.75rem;
        filter: saturate(140%);
        image-rendering: crisp-edges; 
    }

.collapsable-music-button {
    margin: 0;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(0deg,#f63b79 0%, #961763 10%, #bf246f 45%, #f63b79 90%, #961763 100%);
    color: #eaefdc;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-family: 'Special Elite';
    transition: 1s ease;
}
    .collapsable-music-button:hover {
        cursor: pointer;
        transform: scale(1.025);
        background: linear-gradient(0deg,#f63b79 0%, #3d2963 10%, #353696 45%, #f63b79 90%, #3d2963 100%);
        filter: drop-shadow(0px 0px 0.3rem #f63b79)
                drop-shadow(0px 0px 0.6rem #f63b79);
        transition: 0.25s ease;
    }
    .active > .collapsable-music-button {
        background: linear-gradient(0deg,#f63b79 0%, #3d2963 10%, #353696 45%, #f63b79 90%, #3d2963 100%);
    }





.status-container p {
    font-family: 'pixelify sans';
    font-size: 0.6rem;
    font-style: oblique;
    font-weight: bold;
    line-height: 0.6rem;
    margin: 0.5rem 1rem;
}
    .status-text {
        font-size: 0.6rem;
        font-family: 'Special Elite', "Times New Roman";
        font-weight: bold;
        letter-spacing: 0.3ch;
        color: #eaefdc;
        border-radius: 0.25rem;
        background: linear-gradient(0deg,#f63b79 0%, #961763 10%, #bf246f 45%, #f63b79 90%, #961763 100%);
        padding: 0.25rem 0.5rem;
    }





.collapsible {
    cursor: pointer;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: 0;
    }
        .content {
            display: none;
            margin: 1rem 0;
        }

    



.blog-entry-container {
    background: #fefdee;
    border-radius: 0 0 0.5rem 0.5rem;
    border: #379fc4 dashed 0.1rem;
    border-top: none;
    box-sizing: border-box;
    padding: 0.1rem 1rem 0;
    margin: 0 0 1rem;
}
    .blog-entry-container p {
        font-size: 0.8rem;
        font-family: 'special elite';
        letter-spacing: 0.1ch;
        text-align: justify;
    }
    .blog-entry-button {
        font-size: 0.8rem;
        font-family: 'special elite';
        text-decoration: none;
        letter-spacing: 0.1ch;
        text-align: center;
        color: #eaefdc;
        background: linear-gradient(0deg,#379fc4 0%, #3d2963 10%, #353696 45%, #379fc4 90%, #3d2963 100%);
        border-radius: 0.25rem;
        padding: 0.3rem 0.75rem;
        margin: 0.25rem 0 0;
        transition: 0.5s ease;
    }
        .blog-entry-button:hover {
            transform: scale(1.005);
            background: linear-gradient(0deg,#f63b79 0%, #3d2963 10%, #353696 45%, #f63b79 90%, #3d2963 100%);
            filter: drop-shadow(0px 0px 0.3rem #f63b79)
                    drop-shadow(0px 0px 0.6rem #f63b79);
        }

        .active > .blog-entry-button {
            background: linear-gradient(0deg,#f63b79 0%, #3d2963 10%, #353696 45%, #f63b79 90%, #3d2963 100%);
        }





.feed {
    border-radius: 0.5rem;
    border: #379fc4 dashed 0.1rem;
    box-sizing: border-box;
    background-color: #eaefdc;
    margin: 0.5rem 0 0;
    padding: 0 1rem;
}

    .feed-post-title {
        font-size: 1.25rem;
        margin: 1rem 0 0;
    }

    .feed-post-detail {
        font-size: 0.75em;
        font-style: oblique;
        margin: 0.25rem 0;
    }

    .feed-post-content {
        margin: 0.5rem 0.75rem;
    }
        .feed-post-content img {
            width: 100%;
            border: #fefdee ridge 0.15rem;
            box-sizing: border-box;
        }
        .feed-post-content img:hover {
            transform: none;
        }





table {
    width: 100%;
    table-layout: fixed;
    margin: 0 0 3rem;
}
    th {
        font-size: 1rem;
        font-family: 'Special Elite', "Times New Roman";
        font-weight: bold;
        line-height: 1rem;
        letter-spacing: 0.3ch;
        text-align: center;
        color: #eaefdc;
        background: linear-gradient(0deg,#86bc47 0%, #2b573c 10%, #4b8a48 45%, #86bc47 90%, #2b573c 100%);
        padding: 0.5rem 0;
    }

    td {
        font-size: 0.9rem;
        font-family: "Space Grotesk", Helvetica, Arial;
        line-height: 1.2rem;
        text-align: justify;
        color: #353696;
        border: 0.05rem solid #86bc47;
        overflow-wrap: break-word;
        margin: 1rem 0;
        vertical-align: top;
        padding: 0.5rem;
    }
        table td:nth-child(1) { 
            text-align: left; 
        }

        td img {
            width: 100%;
            border: #fefdee ridge 0.15rem;
            box-sizing: border-box;
            z-index: 100;
            transition: 1s ease;
        }
            td img:hover {
                transform: scale(2);
                transition: 0.25s ease;
            }
            
.library-read-more-container {
    margin: 1rem 0 0 1.5rem;
}
    .library-read-more-button {
        transition: 1s ease;
        font-weight: bolder;
        margin: 1rem 0 0;
    }
    .library-read-more-button:hover {
        transform: translateX(0.5rem);
        color: #f63b79;
        transition: 0.25s ease;
    }
    .active > .library-read-more-button {
        transform: translateX(0.5rem);
        color: #f63b79;
    }






.blinkie-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
}
    .blinkie-container img {
        width: 100%;
        transition: 1s ease;
    }
        .blinkie-container img:hover {
            transform: scale(1.25) rotate(2.5deg);
            transition: 0.1s ease;
        }





.credits-buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
}
    .credits-buttons-container a {
        transition: 1s ease;
    }
        .credits-buttons-container a:hover {
            transform: scale(1.05) rotate(9deg);
            transition: 0.1s ease;
        }
        .credits-buttons-container a:nth-child(2n-1):hover {
            transform: scale(1.05) rotate(-9deg);
            transition: 0.1s ease;
        }
    .credits-buttons-container img {
        width: 100%;
    }
        .credits-buttons-container img:hover {
            transform: none;
        }





.stamps-container {
    display:flex;
    justify-content: space-between; 
    flex-wrap: wrap;
    gap: 0.25rem 0;
    width: 100%; 
    margin: 1rem 0;
}
    .stamps-container img {
        height: 2.7rem;
        transition: 1s ease;
        margin: 0;
    }
        .stamps-container img:hover {
            transform: scale(2);
            transition: 0.5s ease;
            z-index: 100;
        }





img {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    transition: 1s ease;
}
    img:hover {
        transform: rotate(-0.25deg) scale(1.025);
        transition: 0.25s;
    }








/*POSSIBLY UPDATE THIS IN FUTURE SO THEY'RE MORE MAINTAINABLE. MAYBE PUT THEM IN THEIR OWN SPEARATE CLASSES RATHER THAN PARENTING THEM*/

#of-note iframe {
    width: 100%;
    border: #fefdee ridge 0.15rem;
    border-radius: 3rem;
    box-sizing: border-box;
    filter: saturate(150%) brightness(1.1) contrast(115%);
}

.animationless img {              /*fanarts*/
    width: 100%;
    margin: 0;
    border: #fefdee ridge 0.15rem;
    box-sizing: border-box;
}
    .animationless img:hover {
        transform: none;
    }

/*POSSIBLY UPDATE THIS IN FUTURE SO THEY'RE MORE MAINTAINABLE. MAYBE PUT THEM IN THEIR OWN SPEARATE CLASSES RATHER THAN PARENTING THEM*/









.design-gallery-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0;
    padding: 0;
}
    .design-gallery-container img {
        width: 100%;
        border: #fefdee ridge 0.15rem;
        box-sizing: border-box;
        transition: 1s ease;
    }
        .design-gallery-container img:hover {
            transform: scale(1.5);
            transition: 0.5s ease;
        }





::-webkit-scrollbar {
    width: 1rem;
}
    ::-webkit-scrollbar-track {         /*Track*/
        opacity: 0;
    }
    ::-webkit-scrollbar-thumb {         /*Handle*/
        background: linear-gradient(-90deg, #3d2963 0%, #353696 45%, #379fc4 90%, #3d2963 100%);
        border-radius: 0.5rem;
    }
    ::-webkit-scrollbar-thumb:hover {   /*Handle on hover*/
    background: linear-gradient(-90deg, #2b573c 0%, #4b8a48 45%, #86bc47 90%, #2b573c 100%);
    }





.infinite-marquee-screenesque {
    overflow: hidden;
    white-space: nowrap;
    border: #eaefdc ridge 0.15rem;
    border-radius: 5rem;
    box-sizing: border-box;
    background: linear-gradient(0deg,#21182e 0%, #2c2e4d 10%, #21182e 20%, #2c2e4d 30%, #21182e 40%, #2c2e4d 50%, #21182e 60%, #2c2e4d 70%, #21182e 80%, #2c2e4d 90%, #21182e 100%);
    margin: 0 0 0.5rem;
}
    .infinite-marquee-screenesque p {
        font-family: 'pixelify sans';
        filter: drop-shadow(0px 0px 1.5px #fefdee);
    }
    .scrolling {
        animation: marquee 5s linear infinite;
        display: inline-block;
        margin: 0;
    }
        @keyframes marquee {
            from {
                transform: translateX(0);
            }
            to { 
                transform: translateX(-100%);
            }
        }



[id] {
	display: none;
}
    [id]:target {
        display: block;
    }



.page-top-button {
    font-size: 3rem;
    text-decoration: none;
    position: fixed;
    right: 3rem;
    z-index: 100;
    border-radius: 50rem;
    animation: updown 0.75s ease infinite;
}
    .page-top-button:hover {
        filter: none; 
        scale: 1.25;
        background-color: #f63b79;
    }
    











@-webkit-keyframes snowflakes-fall {
    0% {
        top: -10%
    }
    100% {
        top: 100%
    }
}
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}

	.snowflake {
        position: fixed;
        top: -10%;
        z-index: 9999;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-animation-name: snowflakes-fall, snowflakes-shake;
        -webkit-animation-duration: 10s, 3s;
        -webkit-animation-timing-function: linear, ease-in-out;
        -webkit-animation-iteration-count: infinite, infinite;
        -webkit-animation-play-state: running, running;
        animation-name: snowflakes-fall, snowflakes-shake;
        animation-duration: 10s, 3s;
        animation-timing-function: linear, ease-in-out;
        animation-iteration-count: infinite, infinite;
        animation-play-state: running, running
	}

	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}

	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}

	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}

	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}

	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}

	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}

	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}

	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}

	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}

	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}

	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}

	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}