p {
    color: blue;
    text-align: center;
}
h1 {
    color: purple;
    font-size: 50px;
    text-align: center;
}
h2 {
    color: yellow;
    text-align: center;
}
.table{
    background-color: #008510;
    border: 20px solid #BB5000;
    border-radius: 60px;
    padding: 50px;
    margin: 30px;
    box-shadow:7px 15px 3px #8B2000;
    height: 350px;
    display: flex;
}
span{
     display: block;
     font-size: 20px;
}
.name{
     font-size: 50px;
     color: gold;
     text-shadow: 5px 5px 5px #999999;
}
body{
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
}
.Card{
      background-color: white;
      border: 1px solid black;
      border-radius: 10px;
      padding: 0px;
      margin: 75px;
      box-shadow: 7px 15px 20px #101010;
      width: 200px;
      height: 280px;
      position: absolute;
      top: 850px;
      right: 20px;
      transform: rotate(25deg);
}
.Card2{
      box-shadow: 7px 15px 10px #252525;
      top: 810px;
      right: 120px;
      transform: rotate(15deg);
}
.card0{
      position: absolute;
      top: -40px;
      left: 10px;
      color: red;
      font-size: 35px;
}
.reverse{
         position: absolute;
         bottom: -40px;
         right: 10px;
         color: red;
         transform: rotate(180deg);
         font-size: 35px;
}
.suit{
      top: 0px;
      font-size: 35px;
}
.reverse-suit{
              position: absolute;
              bottom: 0px;
              right: 10px;
              color: red;
              transform: rotate(180deg);
              font-size: 35px;
}
.middle{
        position: absolute;
        color:red;
        font-size: 100px;
        top: -45px;
        left:50px;
}
.card1{
       color: black;
}
.tip{
     background:radial-gradient(circle, white 0 55%,transparent 56%),
                radial-gradient(circle, blue 0 60%,transparent 61%),
                repeating-conic-gradient(
                                          blue 0deg 22.5deg,
                                          white 22.5deg 45deg
                                          );
     position: absolute;
     top: 500px;
     left:75px;
     border:0px solid red;
     border-radius: 200px;
     width: 60px;
     height: 60px;
     box-shadow:7px 7px 7px black;
     padding: 50px;
}
.tip2{
     background:radial-gradient(circle, white 0 55%,transparent 56%),
                radial-gradient(circle, red 0 60%,transparent 61%),
                repeating-conic-gradient(
                                          red 0deg 22.5deg,
                                          white 22.5deg 45deg
                                          );
     top: 540px;
     left:0px;
     width: 75px;
     height: 75px;
     padding: 50px;
}
.INT{
      background-color: #111111;
      border: 5px solid blue;
      border-radius: 5px;
      padding: 0px;
      margin: 45px;
      box-shadow: 7px 15px 20px #000020;
      width: 240px;
      height: 330px;
      flex-shrink: 0;
}
.hobby{
       animation: float 5s ease-in-out infinite;
}
.like{
      animation: flloat 5s ease-in-out infinite;
}
.hates{
       animation: fllloat 5s ease-in-out infinite;
}
.aaa{
     animation: flllloat 5s ease-in-out infinite;
}
.bbb{
     animation: fllllloat 5s ease-in-out infinite;
}
.int0{
     color: white;
     text-shadow:3px 3px 3px purple;
}
.int2{
      text-shadow:2px 2px 30px #00BB00
}
img{
    width: 200px;
    position:absolute;
    left: 15px;
    bottom: 5px;
}
.yokai{
       width: 700px;
       position: static;
}
.small{
       font-size: 15px;
}
@keyframes float{
                 0%{
                    transform: translateY(-20px) rotate(2deg);
                   }
                 50%{
                     transform: translateY(-35px) rotate(-2deg);
                    }
                 100%{
                      transform: translateY(-20px) rotate(2deg);
                     }
}
@keyframes flloat{
                 0%{
                    transform: translateY(-35px) rotate(2deg);
                   }
                 50%{
                     transform: translateY(-20px) rotate(-2deg);
                    }
                 100%{
                      transform: translateY(-35px) rotate(2deg);
                     }
}
@keyframes fllloat{
                 0%{
                    transform: translateY(-20px) rotate(-2deg);
                   }
                 50%{
                     transform: translateY(-35px) rotate(2deg);
                    }
                 100%{
                      transform: translateY(-20px) rotate(-2deg);
                     }
}
@keyframes flllloat{
                 0%{
                    transform: translateY(-35px) rotate(2deg);
                   }
                 50%{
                     transform: translateY(-20px) rotate(-2deg);
                    }
                 100%{
                      transform: translateY(-35px) rotate(2deg);
                     }
}
@keyframes fllllloat{
                 0%{
                    transform: translateY(-20px) rotate(-2deg);
                   }
                 50%{
                     transform: translateY(-35px) rotate(2deg);
                    }
                 100%{
                      transform: translateY(-20px) rotate(-2deg);
                     }
}
.welcome{
         color: gold;
         text-shadow:
                     0 0 5px gold,
                     0 0 15px gold,
                     0 0 30px red;
         font-size: 35px;
         letter-spacing: 5px;
         border: 3px solid gold;
         padding: 15px;
         margin: 30px auto;
         width: 70%;
         text-align: center;
         box-shadow: 0 0 15px gold;
         background-color: rgba(100,100,100,0.4);
}