@import url('https://fonts.googleapis.com/css2?family=Chokokutai&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asset&display=swap');
@keyframes mymove {
  from {background-color:black;}
  to {background-color:#f22c71;}
}

.bg{
    overflow-x:hidden;
    animation: mymove 2s infinite;
}

.poke{
    background-color:#e58391;
}

.button{
    background-color:aqua;
    border:none;
}

.button:hover{
    background-color:#348c40;
}

.back{
    background-color:blue;
    color:#e58391;
}

.note{
    font-size: 50px;
    font-family:'Asset';
    color:#ffffff;
}

.type{
    color:white;
    font-size: 100px;
    font-family: 'Asset';
}

.pink{
    background: pink;
}

.break{
    box-sizing:border-box;
    height:300px;
    width:auto;
}

.container {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 1em;
    color: rgb(255, 255, 255);
    padding: 1em;
    z-index: 100px;
}

.container > div {
    background-color: #348c40;
    font-size: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item1 {
    grid-column: span 4;
    font-family: 'Asset', serif;
    font-size: 100px;
    height: 300px;
    background-color: #348c40;
}

.item1:hover {
    background-color: #e58391;
}

.onclick:hover {
    color: #e58391;
}

.sub {
    font-family: 'Chokokutai', cursive;
}

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-family: "Chokokutai";
}

.popuptext {
    visibility: hidden;
    width: 300px;
    height: 300px;
    color: #fff;
    text-align: center;
    padding: 16px;
    position: absolute;
    z-index: 1;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

.popuptext.show {
    visibility: visible;
    opacity: 1;
    background-color:rgb(255, 74, 147);
}

.box{
    box-sizing:border-box;
    Width: 200px;
    height:auto;
}

.zoom{
    transition:transform .2s;
}

#saturation:hover {
    -webkit-filter: saturate(6);
    filter: saturate(6);
 }

.zoom:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(3.0); 
  }

#apple {
    animation: rotation 5s infinite;
  }

#banana{
    animation: rotation 2s infinite
}
  
  @keyframes rotation {
    50% {transform: rotate(360deg);}
  }