/* -------------------------------------- BASICS */
:root {
    --black: #8b6f60;
    --white: #fdfbf9;
}

* {
    font-family: ms ui gothic;
    box-sizing: border-box;
    image-rendering: pixelated;
    word-break: break-all;
    color: var(--black);
}

body {
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

::selection {
    color: #fcc2d1;
}

::-webkit-scrollbar {
    background: none;
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: url(/graphics/backgrounds/FL-bg1.gif);
    border-radius: 15px;
    box-shadow: 1px 1px 1px inset white, -1px -1px 1px inset #96a5748a;
}

/* -------------------------------------- TEXT */
h1 {
    color: white;
    margin: 0;
    font-size: 18.5px;
    text-shadow: 0 1px var(--black), 1px 0px var(--black), 0 -1px var(--black), -1px 0px var(--black), 1px -1px var(--black), -1px 1px var(--black), 1px 1px var(--black), -1px -1px var(--black);
    letter-spacing: 2.4px;
}

h2 {
    color: white;
    margin: 0;
    font-size: 17px;
    text-shadow: 0 1px var(--black), 1px 0px var(--black), 0 -1px var(--black), -1px 0px var(--black), 1px -1px var(--black), -1px 1px var(--black), 1px 1px var(--black), -1px -1px var(--black);
    letter-spacing: 2.4px;
}

h3 {
    margin: 0;
    font-size: 17px;
    color: var(--black);
}

p {
    margin: 0;
    letter-spacing: 1.5px;
    font-size: 15px;
}

/*::selection {
    background: blue;
    color: white;
}*/

/* -------------------------------------- IMAGES */
img {
    user-select: none;
}

/* -------------------------------------- LINKS */
a {
    color: var(--black);
    letter-spacing: normal;
    font-size: 15px;
    text-shadow: 0 1px white, 1px 0px white, 0 -1px white, -1px 0px white;
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
}

a:hover {
    text-decoration-style: dashed;
    text-decoration-thickness: 0.5px;
}

/* -------------------------------------- ANIMATONS */
 @keyframes tilt1 {
0% {
transform: rotate(0.5deg);
}
50% {
transform: rotate(0.5deg);
}
51% {
transform: rotate(-0.5deg);
}
100% {
transform: rotate(-0.5deg);
}
}

 @keyframes tilt2 {
0% {
transform: rotate(1deg);
}
50% {
transform: rotate(1deg);
}
51% {
transform: rotate(-1deg);
}
100% {
transform: rotate(-1deg);
}
}

 @keyframes tilt3 {
0% {
transform: rotate(2deg);
}
50% {
transform: rotate(2deg);
}
51% {
transform: rotate(-2deg);
}
100% {
transform: rotate(-2deg);
}
}

@keyframes tilt4 {
0% {
transform: rotate(5deg);
}
50% {
transform: rotate(5deg);
}
51% {
transform: rotate(-5deg);
}
100% {
transform: rotate(-5deg);
}
}

 @keyframes tilt5 {
0% {
transform: rotate(7deg);
}
50% {
transform: rotate(7deg);
}
51% {
transform: rotate(-7deg);
}
100% {
transform: rotate(-7deg);
}
}