/*CSS RESET FROM https://github.com/Lazzzer00/Best-CSS-Reset-2024 */
*, *::before, *::after{box-sizing: border-box;}
*{margin: 0; padding: 0;}
ul[role='list'], ol[role='list']{list-style: none;}
html:focus-within{scroll-behavior: smooth; }
a:not([class]){text-decoration-skip-ink: auto;}
img, picture, svg, video, canvas{max-width: 100%;height: auto; vertical-align: middle; font-style: italic; background-repeat: no-repeat; background-size: cover;}
input, button, textarea, select{font: inherit;}
@media (prefers-reduced-motion: reduce){
    html:focus-within {scroll-behavior: auto;}
    *, *::before, *::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none;}
}
body, html{ height: 100%; width: 100%; top: 0; max-height: 100svh; }



:root {
    --BackColor1: #1e2340;
    --BackColor1op7: #1e2340B2;
    --BackColor2: #5e5ba6;
    --BackColor2op7: #5e5ba6B2;
    --TextColor1: #FFFFFF;
    --TextColor1op7: #FFFFFFB2;
    --TextColor2: #b4baff;
    --TextColor2op7: #b4baffB2;
    --spoilerGradient: #5e5ba6 #727199;
    --spoilerGradientop7: #5e5ba6B2 #727199B2;
    --GayGradient: linear-gradient(135deg, 
        hsl(0, 100%, 55%)0%,
        hsl(36, 100%,55%)26%,
        hsl(60, 100%, 55%)42%,
        hsl(120, 70%, 55%)58%,
        hsl(204, 100%, 55%)74%,
        hsl(270, 100%, 60%) 100%
    );
}


h1 {font-size: 2.3em;padding-bottom: .2em;}
p{font-size: 1.2em;}
a{color: var(--TextColor2);font-style: none;text-decoration: none;}
a:hover {text-decoration: underline;}
button{background: transparent; border: none; color: var(--TextColor2);}
select{background-color: transparent;padding: .1em ;border-radius: .2em;color: var(--TextColor2);}
option{background-color: var(--BackColor2);color: var(--TextColor1);}
li {list-style: none;}
.wideOnly{display: none;}
.spoiler{
    padding: 0 .1em;
    border-radius: .2em;
    color: #FFFFFF00;
    cursor: pointer;
    animation: spoilGradient 4s linear infinite;
    -webkit-animation: spoilGradient 4s linear infinite;
    background-repeat: repeat;}
.spoiler:hover{background: var(--BackColor2); color: var(--TextColor1);}
@keyframes spoilGradient {
    0% {background: #C291F2; }
    25% {background-color:#898EF9 ;}
    50% {background-color: #8F79DB;}
    75% {background:#898EF9;}
    100% {background-color: #C291F2;}
}

body {
    background-color: var(--BackColor1);
    color: var(--TextColor1);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
}


#content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

#ct1 {
    display: flex;
    flex-direction: column;
    padding: 3em 2em;
    gap: 3em;
    align-items: center;
    justify-content: center;
}

#ct1 img {
    width: 80%;
    border-radius: .25em;
    transform: rotate(7deg) scale(1);

    -webkit-transition: .2s;
    transition: transform .2s;
}
#ct1 img:hover{
    transform: rotate(0deg) scale(1.1);
}



#ct2{
    display: flex;
    flex-direction: column;
    padding: 3em 2em;
    /*align-items: center;*/
    justify-content: center;
}

#ct2 ul {
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.linkli {
    background-color: var(--BackColor2op7);
    border-radius: .25em;

    -webkit-transition: .2s;
    transition: background-color .2s;
}
.linkli:hover {
    background-color: var(--BackColor2);
}

.linkli #discordl,
.linkli a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    color: var(--TextColor1);
    padding: .5em;
    gap: .5;
}
.linkli a:hover {text-decoration: none;}
.linkli img {
    height: 4em;
}


#ct3, #ct4 {
    display: flex;
    flex-direction: column;
    padding: 3em 2em;
    /*align-items: center;*/
    justify-content: center;
}
#ct3 div, #ct4 div {
    margin-top: 1em;
    display: grid;
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: repeat(3, 1fr);
	gap: .5em;
	width: 100%;
	height: 100%;
}
#ct3 div a,
#ct4 div a {
    transform: scale(1);
    opacity: .9;

    -webkit-transition: .2s;
    transition: transform .2s;
    transition: opacity .2s;
}
#ct3 div a:hover,
#ct4 div a:hover{
    transform: scale(1.025);
    opacity: 1;
}
#ct3 p, #ct4 p {
    font-size: .85em;
}

#ct3 img, #ct4 img {
    width: 100%;
    height: 100%;
}




@media screen and (min-width: 100vmax) {
    #ct1 {
        flex-direction: row-reverse;
        padding: 10em 10em;
    }
    #ct1 img {
        width: 40%;
        max-width: 25em;
    }

    #ct2, #ct3, #ct4{
        padding: 5em 10em;
    }
    #ct2 ul {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .linkli {
        width: 20em;
    }
    #ct3 p, #ct4 p {
        font-size: 1em;
    }
}
@media screen and (min-width: 130vmin) {
    #ct1, #ct2, #ct3, #ct4 {
        max-width: 160svh;
    }
}