h1 {
    color:rgb(242, 5, 5);
    animation: shake 5s infinite;
    text-shadow: 1px 1px 2px black;
}

h2 {
    color:rgb(242, 5, 5);
    /* animation: shake 5s infinite */
    text-shadow: 1px 1px 2px black;
}


body {
    text-align: center;
    background-color: #f6d7b0;
    font-family: 'Bruno Ace', cursive;
    background-image: url(https://free-vectors.net/_ph/15/2/607127224.jpg);
    background-size: cover;
}

ul {
    list-style-type: none;
}

.instructions {
    display: flex;
    justify-content: center;
    text-align: left;

}

#pirate {
    border-radius: 20px;
    border-style: solid;
    width: auto;

}

li {
    
}

footer {
    margin-top: 35px;
}

.flex-container {
    display: flex;
    justify-content: center;
    border-style: none;
    margin: 25px 0 25px 0;
}

td {
    background-color: #02c7d2;
    padding: 20px;
    cursor: pointer;
    font-size: 30px;
}

table, th, td {
    border: solid 3.5px;
    border-radius: 50px;
}

td:hover {
    cursor: pointer;
    animation: shake 1s;
    animation-iteration-count: infinite;
}

@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); }
  }



  .toggle input[type='checkbox'] {
    display: none;
}

.toggle label {
    background-color: #777;
    border: 2px solid #555;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all ease-in-out 0.3s;
    width: 100px;
    height: 50px;
}

.toggle label::after {
    background-color: #555;
    border-radius: 50%;
    content: ' ';
    cursor: pointer;
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 2px;
    transition: all ease-in-out 0.3s;
    width: 42px;
    height: 42px;
}

.toggle input[type='checkbox']:checked ~ label {
    background-color: #00a0fc;
    border-color: #006dc9;
}

.toggle input[type='checkbox']:checked ~ label::after {
    background-color: #0054b0;
    transform: translateX(50px);
}

body.dark-theme {
    background-color: #333;
    
}