@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Roboto;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side,#000 90%,#0000) 0/calc(100%/3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: l1 1s steps(4) infinite;
  opacity: 0;
}
@keyframes l1 {to{clip-path: inset(0 -34% 0 0)}}
.joke-container{
    padding: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
button{
    width: 100%;
    padding: 0.3rem;
    background-color: chartreuse;
    border-radius: 0.5rem;
    border: none;
    display: flex;
    justify-content: space-evenly;

}
button:hover{
    color:darkgoldenrod;
    background-color: rgb(58, 58, 144);
    
}
.joke{
    color: red;
    font-style: italic;
}