body{
  background-color: #222222;
  color: white;
  font-family: 'Courier New', monospace;
}

#Ryou{
  display:none;
}

#kuvat:hover #Bocchi{
  display:none;
}

#kuvat:hover #Ryou{
  display:block;
}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: grey;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: black;
  background-color: transparent;
  text-decoration: underline;
}
  .iframe {
height: 100%;
width: 100%;
float: left;
background-color: white;
}
#rhythmring-img{
    content: url("https://maddycha.com/rhythm-ring/imgs/widget/g3.png") !important;
}
#rhythmring {
    color: white;
    fill: white;
}
  .webrings{
height:100%;
width: 100%;
background-color: white;
}

.container {
     --duration: 0.4s;
}

 .container {
     display: inline-block;
     width: max-content;
     animation: shake var(--duration) linear infinite;
}

 .container:hover {
     transform: none;
}
 .container:hover {
     animation-play-state: paused;
}
 @keyframes shake {
    0% { transform: translate(0px, 0px)}
  50% { transform: translate(0px, 15px)}
    100% { transform: translate(0px, 0px)}
}
    .container {
     --duration: 0.4s;
}

 .container {
     display: inline-block;
     width: max-content;
     animation: shake var(--duration) linear infinite;
}

 .container:hover {
     transform: none;
}
 .container:hover {
     animation-play-state: paused;
}
 @keyframes shake {
    0% { transform: translate(0px, 0px)}
  50% { transform: translate(0px, 10px)}
    100% { transform: translate(0px, 0px)}
}

.websitestuff {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body {
    font-family: 'Courier New', monospace;
}

details {
  user-select: none;
}

details>summary span.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s;
  margin-left: auto;
}

details[open] summary span.icon {
  transform: rotate(180deg);
}

summary {
  display: flex;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}