@keyframes background {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 256px 256px;
    }
}
@font-face {
  font-family: 'Rubik';
  src: url('Rubik-Regular.ttf') format('ttf');
}

body {
    font-family: 'Rubik', sans-serif;
    background:#e3e3e3;
    margin:0;
    margin-bottom:-100;
}

#logo a img {
    max-width:800px;
    font-family:sans-serif;
    text-decoration:none;
    color:orange;
    font-weight:bold;
    background:#ffffff;
    padding: 10px 5px;
    user-select: none;
    rotate: 0.001deg;
    transition: padding 0.4s;
    border:2px solid black;
    border-radius:5px;
}

#logo a img:hover {
    padding: 14px 40px;
}

#buttonRow {
    user-select: none;
}

.greenButton a, .pinkButton a, .blueButton a {
    font-family: sans-serif;
    padding:7px 20px;
    display:inline-block;
    text-decoration:none;
    color:black;
    font-size:16pt;
    border:2px solid black;
    margin: 0px 2px;
    transition: padding .2s, font-size 0.2s, background 0.2s;
    border-radius:5px;
}

.greenButton a:hover, .pinkButton a:hover, .blueButton a:hover {
    padding: 14px 40px;
}

.greenButton a {
    background:#3ed93e;
}

.greenButton a:hover {
    background:#7fe67f;
}

.blueButton a {
    background:#5cbff7;
}

.blueButton a:hover {
    background:#99d6fa;
}

.pinkButton a {
    background:#f072b6;
}

.pinkButton a:hover {
    background:hsl(328 81% 84% / 1);
}

#latestComic img {
    width:500px;
    user-select: none;
}

#latestComic a {
    position:relative;
    z-index: 2;
}

#latestComic a:hover {
    filter:brightness(1.25);
}

#content {
    background:white;
    max-width:650px;
    z-index: 1;
    font-family: sans-serif;
    display: block;
    padding:15px;
}

#container {
    position:relative;
    width:100%;
    background: url(pixil-frame-0.png) #3ca8a3;
    background-attachment:fixed;
    background-size: 48px;
    image-rendering:pixelated;
    animation: 6s linear infinite background;
    min-height: 100vH;
}

.blogTitle, .blogDate {
    border: 1px solid black;
    padding:2px 8px;
    display: block;
}

.blogTitle {
    float:left;
    width:75%
}

.blogpost {
    width:70%;
    display:table;
    border:1px solid black
}

.blogContent {
    display: block;
    border: 1px solid black
}

    .arc {
      display: flex;
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .arc img {
      width: 200px;
      height: 127px;
      flex-shrink: 0;
    }

.sbut {
  background: #ffbffd;      
  border: 2px solid #000;
  padding: 10px 18px;
  margin: 5px;
  font-family: 'Comic Sans MS';
  font-size: 18px;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 3px 3px 0px #000;
  transition: all 0.15s ease;
}

.sbut:hover {
  transform: translateY(-2px);
}

.sbut:active {
  box-shadow: 0 0 8px 3px rgba(255, 220, 0, 0.7);
  transform: translateY(1px);
}

p.cu {
  font-size: 30px;
}
p.cl {
  font-size: 15px;
}