@import url('https://fonts.googleapis.com/css2?family=Mynerve&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

.bangers {
    Font-family: 'Bangers', cursive;
}

.luckiest {
    Font-family: 'Luckiest Guy', cursive;
}

.caveat {
    Font-family: 'Caveat', cursive;
}

.mynerve {
    Font-family: 'Mynerve', sans-serif;
}
body {
    font-family: Geneva, Tahoma, sans-serif
}

.contain {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.circleborder {
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

.parchment-box {
    --mask:
        radial-gradient(15.65px at 21.00px 50%, #000 99%, #0000 101%) 0 calc(50% - 14px)/51% 28px repeat-y,
        radial-gradient(15.65px at -14px 50%, #0000 99%, #000 101%) 7px 50%/calc(51% - 7px) 28px repeat-y,
        radial-gradient(15.65px at calc(100% - 21.00px) 50%, #000 99%, #0000 101%) 100% calc(50% - 14px)/51% 28px repeat-y,
        radial-gradient(15.65px at calc(100% + 14.00px) 50%, #0000 99%, #000 101%) calc(100% - 7px) 50%/calc(51% - 7px) 28px repeat-y;
    -webkit-mask: var(--mask);
    mask: var(--mask);
}

.top-parchment {
    --mask:
        radial-gradient(15.65px at 50% 21.00px, #000 99%, #0000 101%) calc(50% - 14px) 0/28px 51% repeat-x,
        radial-gradient(15.65px at 50% -14px, #0000 99%, #000 101%) 50% 7px/28px calc(51% - 7px) repeat-x,
        radial-gradient(15.65px at 50% calc(100% - 21.00px), #000 99%, #0000 101%) calc(50% - 14px) 100%/28px 51% repeat-x,
        radial-gradient(15.65px at 50% calc(100% + 14.00px), #0000 99%, #000 101%) 50% calc(100% - 7px)/28px calc(51% - 7px) repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);  
}

.nav-wave-div {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

.nav-wave-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.nav-wave-footer svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 56px;
    transform: rotateY(180deg);
}

.nav-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.nav-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 49px;
    transform: rotateY(180deg);
}