@font-face {
    font-family: 'ComicSansMS';
    src: url('ComicSansMS.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nasinnanpa';
    src: url('nasin-nanpa-4.0.2.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lucidablackletter';
    src: url('Lucida\ Blackletter\ Regular.ttf') format('truetype');
}

.lucidablackletter {
    font-family: 'lucidablackletter', sans-serif;
    color: red;    
}

body {
    font-family: 'ComicSansMS', 'ComicSansMS', cursive, sans-serif;
    color: white;
    text-align: center;
    border-radius: 8px;
}

.tokipona {
    font-family: 'nasinnanpa', sans-serif;
    font-variant-ligatures: common-ligatures contextual;
    /* or, more explicitly: */
    font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
}

a,
a:visited,
a:hover,
a:active {
    color: inherit;
}

div {
    background-color: #1b192780;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: 4px solid transparent;
    border-radius: 10px
}

.nav-container {
    background-color: #ffffff00;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .container div {
    margin: 4px 8px;
  }

  .container h2 {
    font-size: 1em;
  }
}

.posey-img {
  width: 300px;
  height: auto;
}

@media (min-width: 900px) {
  .posey-img {
    width: 380px;
  }
}

.content-block {
  max-width: 300px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .content-block {
    max-width: 700px;
  }
}

.container {
    margin: 10px;
    width: fit-content;
    height: fit-content;
    margin: auto;
    border: 4px solid transparent;
    border-radius: 10px
}

.container div {
  margin: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

                .bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-image: url('website backround.png');
            background-size: 1920px 1080px;
            background-repeat: repeat-x: repeat-y;
            background-position: 0 0;
            animation: scrollRight 8s linear infinite;
        }

        @keyframes scrollRight {
            0% { 
                background-position: 0 0; 
            }
            100% { 
                background-position: 960px 0; 
            }
        }

                    .bg1 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-image: url('website backround1.png');
            background-size: 1920px 1080px;
            background-repeat: repeat-x: repeat-y;
            background-position: 0 0;
            animation: scrollLeft 8s linear infinite;
        }

        @keyframes scrollLeft {
            0% { 
                background-position: 0 0; 
            }
            100% { 
                background-position: -960px 0; 
            }
        }

        .content {
            position: relative;
            z-index: 1;
            color: #1b1927;
            padding: 20px;
        }

.img-sliderighthover {
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
  
.img-sliderighthover:hover {
  	margin-left: 30px
}

.img-hearthover {
  transition: all 0.5s;
display: inline-block;
transition: 1s ease;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 220%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.img-hearthover:hover{
  transition: all 0.5s;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.img-starhover {
 transform:rotate(0deg);
transition:0.3s;
}

.img-starhover:hover{
  -webkit-mask-size: 100%;
  transform:rotate(-15deg);
  transition:0.3s;
  max-width: 300px;
}

.scroll-container {
  background-color: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-width: 300px;
}

@media (min-width: 900px) {
  .scroll-container {
    max-width: 600px;
  }
}

.scroll-container img {
    display: inline-block;
    max-height: 300px;
    width: auto;
    vertical-align: top;
}

@keyframes shake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(0, 10px); }
  40%  { transform: translate(0, 0px); }
  60%  { transform: translate(0, 10px); }
  80%  { transform: translate(0, 0); }
  100% { transform: translate(0, 10px); }
}

.shake {
  animation: shake 0.4s ease !important;
}
#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 600px) {
  #container {
    flex-direction: column;
    align-items: center;
  }
}
  .container .item {
    padding: 20px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

.img-shakehover:hover {
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-transition: .5s ease-in; 
} 
 
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
} 
 
.img-saturatedhover {
  filter: saturate(100%);
transition: .25s ease-out;
}
  
.img-saturatedhover:hover {
  filter: saturate(200%);
transition: .25s ease-in;
}

.img-infinitebouncehover {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.img-infinitebouncehover:hover {
  -webkit-animation-name: bounces;
  animation-name: bounces;
}

@-webkit-keyframes bounces {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounces {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.img-flip:hover {
  transform: scaleX(-1);
}

.container div.text,
.container div.text1 {
  flex-direction: column;
  align-items: center;
}

.text h2, .text1 h2 { margin: 4px 0 0; }