* {
    image-rendering: pixelated;
    font-family: CafeSweet;
}

body {
    font-family: "Helvetica", sans-serif;
    margin: 0 auto;
    padding:20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width:720px;
    overflow-wrap: break-word;
    background-color: #f7f5f2;
}

main {
    max-width: 800px;
    line-height: 1.6;
    margin: 0 auto;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}


nav a{
    margin-right: 8px;
}

p {
    font-family: 'CafeSweet';
    font-size: 15px;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'CafeSweet';
    margin: 0;
}

  a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

hr {
    border: 1.5px dashed #ffc3bf;
}

::selection {
    background: #ffe8e6; 
    color: var(--offwhite);
}

a {
    text-shadow: 0 1px white, 1px 0px white, 0 -1px white, -1px 0px white, 1px -1px white, -1px 1px white, 1px 1px white, -1px -1px white;
    font-weight: bold;
    text-decoration: none;
}

img {
    user-select: none;
}

::-webkit-scrollbar {
  width: 5px;
  color: #fff7f7;
  border-radius: 0px;
  display: none;
}

::-webkit-scrollbar-track {
  border-radius: 0px;
}

::-webkit-scrollbar-thumb {
  background: #ffb8b0; 
  border-radius: 0px;
}

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


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

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