.title {
    background-color: #305b74;
    color: white;
    font-family: "MS Gothic", cursive, sans-serif;
    padding: 10px;
    border-radius: 10px 10px 0px 0px;
    text-align:left;
    font-weight:bold;
}

.entry {
    background-color: #fffeef;
        background-image: linear-gradient(to bottom, #ccc 1px, transparent 1px),
                          linear-gradient(to bottom, #eee 1px, transparent 1px);
        background-size: 100% 30px, 100% 30px;
        background-position: 0 0, 0 15px;
    border: 2px solid #305b74;
    border-radius: 0px 0px 10px 10px;
    padding: 15px;
    margin-bottom: 60px;
    padding:30px;
    text-align:left;
    height:auto;
    max-height:400px;
    overflow-y:auto;
}

    .entry > .spiral {
        content: "";
        position: absolute; 
        width: 40px; 
        left:15px;
        height:100%;
        transform: translateY(-20px);
        max-height: 440px;
        background-image: url('https://file.garden/aGVgARL4OBP7L4sn/2025_11_07_0pu_Kleki.png');
        background-size: 30px;
        background-repeat: repeat-y; 
    }

.entry > img {
  margin-inline:20px;
}

 .navigation {
      box-sizing:border-box;
      background-color: #fffeef;
      font-size:20px;
      padding-block:3px;
      margin-block:10px;
      margin-inline: auto;
      border: 2px #305b74 solid;
      border-radius: 10px;
      position:sticky;
      top: 13px;
      bottom:0;
      z-index:99;
      width:80%;
      
    }

    .navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

    .navigation li {
  display: inline-block;
  margin-right: 10px; 
}


.shake {
         padding:4px;
 animation: shake 0.5s infinite;
 }
 
 @keyframes shake {
 0% {
 transform: translate(1px, 1px);
 }
 10% {
 transform: translate(-1px, -1px);
 }
 20% {
 transform: translate(-1px, 0px);
 }
 30% {
 transform: translate(1px, 1px);
 }
 40% {
 transform: translate(1px, -1px);
 }
 50% {
 transform: translate(-1px, 1px);
 }
 60% {
 transform: translate(-1px, 1px);
 }
 70% {
 transform: translate(1px, 1px);
 }
 80% {
 transform: translate(-1px, -1px);
 }
 90% {
 transform: translate(1px, 1px);
 }
 100% {
 transform: translate(1px, -1px);
 }
 }

.shakyhard {
         padding:4px;
 animation: shake 0.1s infinite;
 }
 
 @keyframes shake {
 0% {
 transform: translate(3px, 3px);
 }
 10% {
 transform: translate(-3px, -3px);
 }
 20% {
 transform: translate(-3px, 0px);
 }
 30% {
 transform: translate(3px, 3px);
 }
 40% {
 transform: translate(3px, -3px);
 }
 50% {
 transform: translate(-3px, 3px);
 }
 60% {
 transform: translate(-3px, 3px);
 }
 70% {
 transform: translate(3px, 3px);
 }
 80% {
 transform: translate(-3px, -3px);
 }
 90% {
 transform: translate(3px, 3px);
 }
 100% {
 transform: translate(3px, -3px);
 }
 }