:root {
    --dark: #2a2433;
    --primary-color: #d46a83;
    --primary-color-dark: #854462;
    --secondary-color: #a295a7;
    --secondary-color-dark: #9e8ba4;
    --light: #f4dfde;
    

    --magenta: #FF218C;
    --magenta2: #ffbdb9;
    --yellow: #FFD800;
    --yellow2: #f5f4c9;
    --cyan: #21B1FF;
    --cyan2: #aed3e1;
}

@font-face {
    font-family: 'dinkie';
    src: url(/assets/zpix.ttf);
}

@keyframes eye-appear {
    from {mask: linear-gradient(#fff,#fff) top / 100% 40% no-repeat, linear-gradient(#fff,#fff) bottom / 100% 40% no-repeat;}
    to {mask: linear-gradient(#fff,#fff) top / 100% 0% no-repeat, linear-gradient(#fff,#fff) bottom / 100% 0% no-repeat;}
}

@keyframes animatedBackground {
    from { background-position: 0 0; } to { background-position: 40px 40px; }
}

@keyframes scrolling1 {
    from { bottom: 0; } to { bottom: var(--scroll-height); }
}

@keyframes scrolling2 {
    0% { bottom: calc(-1 * var(--scroll-height)); } 100% { bottom:0% }
}

@keyframes yapping {
    50% { background-position: 0; } 100% { background-position: 64px; }
}

body {
    background-color: var(--secondary-color-dark);
    margin: 0;
    display: flex;
	align-items: stretch;
    font-family: 'dinkie';
}


/* general header stuff */

header {
    position: sticky;
    box-sizing: border-box;
    writing-mode: sideways-lr;
    display: flex;
	align-items: center;
	flex-direction: row;
    background-color: var(--primary-color);
    color: var(--light);
    height: 100vh;
    margin-left: 25px;
    width: 75px;
    padding: 10px 0;
}

.checkered {
    background: repeating-conic-gradient(var(--light) 0 25%, var(--primary-color) 0 50%) 50% / 20px 20px;
    min-height: 50px;
    width: 100%;
    z-index: 1;

    animation: animatedBackground 2.5s linear infinite;
}

/* title + scrolling text */

#headerText {
    flex-grow: 1;
    display: flex;
    overflow-y: hidden;
    height: 90%;
    position: relative;
    overflow-x: clip;
}

#headerText span {
    text-align: center;
    display: inline;
    margin: 0;
    width: 100%;
}

#headerText > .title {
    font-size: 2.4em;
    vertical-align: center;
    height: 100%;
}

#headerWrap1, #headerWrap2 {
    color: var(--light) \ 1;
    padding-top: calc(1em/2);
    line-height: 1.5em;
    font-size: 1.8em;
    position: absolute;
    white-space: nowrap;
}

#headerWrap1 { animation: scrolling1 5s linear infinite;}

#headerWrap2 { animation: scrolling2 5s linear infinite;}

/* styled button */

.nav-btn {
    display : flex;
    align-items: center;
    padding: 5px;
    border: solid 2px gray;
}

.nav-btn .span-icon {
    display: inline-block;
    background-image: url(/assets/img/cat-thumbs-up.jpeg);
    background-size: cover;
    width: 48px;
    height: 48px;
    margin-right: 8px;
}

.nav-btn .span-icon img {
    background-color: var(--primary-color);
    width: inherit;
    height: inherit;
}

.nav-btn:hover > .span-icon img  {
    animation: eye-appear 0.1s forwards ;
}

/* main event */

main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100vh;
}

#main-box {
    background-color: var(--light);
    border: 7px solid var(--primary-color);
    position: relative;
    height: 100%;
    margin: 50px 100px;
}

h1 {
    text-align: center;
}

main .special {
    text-align: center;
}

/* fun corners */

.corner-box {
    width: 64px;
    height: 64px;
    background-color: var(--light);
    background-image: url(/assets/img/yap.png);
    background-position: 64px;
    border: 7px solid var(--primary-color);
    position: absolute;
    margin: -39px;
    right: 100%;
    bottom: 100%;
}

#box-ur, #box-dr {
    left: 100%;
}

#box-dl, #box-dr {
    top: 100%;
}