body {
    background: url(assets/backgrounds/bg12.png);
    background-size: cover;
}

p {
    font-size: 16px;
    font-family: yusei magic;
    color: var(--darkbrown);
}

.hd1 {
    font-family: yusei magic;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: white;
    text-shadow:
        1px 1px 2px rgb(86, 41, 48),
        0 0 25px var(--midbrown),
        0 0 5px var(--darkbrown);
    padding: 5px;
    text-align: center;
    width: 95%;
}

.wrapper {
    margin: auto;
    width: 400px;
    margin-top: 50px;
}

.bubbler {
    font-size: 40px;
    font-family: kosugimaru;
    background: #ffffffe4;
    padding: 5px;
    padding-left: 25px;
    border-radius: 40px 10px;
}

.bubbler mark { 
    animation: bubble 2s infinite;
    animation-timing-function: ease-in-out;
    background: none;
    color: var(--darkbrown);
}

.bubbler mark:nth-child(1) { animation-delay:0s; display:inline-block;}
.bubbler mark:nth-child(2) { animation-delay:0.8s; display:inline-block;}
.bubbler mark:nth-child(3) { animation-delay:1.6s; display:inline-block; }
.bubbler mark:nth-child(4) { animation-delay:2.4s; display:inline-block;}
.bubbler mark:nth-child(5) { animation-delay:3.2s; display:inline-block;}
.bubbler mark:nth-child(6) { animation-delay:4s; display:inline-block;}
.bubbler mark:nth-child(7) { animation-delay:4.8s; display:inline-block;}
.bubbler mark:nth-child(8) { animation-delay:5.6s; display:inline-block;}

/* if you need more characters than 16 do this:
- copy the line above
- change the nth-child 16 to 17
- add 0.8 to the animation delay number */

@keyframes bubble {
    from { 
        color: var(--darkbrown); 
    }
    50% { 
        color: var(--lightbrown); 
    }
    to { 
        color: var(--darkbrown); 
    }
}

@-webkit-keyframes bubble {
    from { 
        color:var(--darkbrown); 
    }
    50% { 
        color: var(--lightbrown); 
    }
    to { 
        color: var(--darkbrown); 
    }
}

  .svg-container {
    width: 0;
    height: 0;
    overflow: hidden;
  }

.mainbox {
    margin-top: 10px;
    padding: 10px;
    background: #ffffffd8;
    border: 2px solid var(--darkbrown);
    border-bottom: 3px solid var(--darkbrown);
    border-right: 3px solid var(--darkbrown);
    backdrop-filter: blur(1px);
}

.mainbox p {
    text-align: center;
}

.button-flex {
    display: flex;
    width: 70%;
    margin: auto;
    padding: 0;
}

.button-enter, .button-leave {
    border: 1px solid var(--darkbrown);
    box-shadow: 2px 2px var(--darkbrown);
    font-family: kosugimaru;
    color: var(--darkbrown);
    padding: 10px;
    width: 100px;
    text-align: center;
    margin: 5px;
    background: white;
}

.button-enter:hover {
    scale: 1.1;
    rotate: -5deg;
    box-shadow: 3px 3px var(--darkbrown);
}

.button-leave:hover {
    scale: 1.1;
    rotate: 5deg;
    box-shadow: 3px 3px var(--darkbrown);
}

a {
    text-decoration:none;
}

a:hover {
    font-style: normal;
}