@font-face {
    font-family: 'SpaceGrotesk';
    src: url('../resources/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'BrunoAce';
    src: url('../resources/BrunoAce-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'DynaPuff';
    src: url('../resources/DynaPuff-VariableFont_wdth\,wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter';
    src: url('../resources/Inter-VariableFont_opsz\,wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Numans';
    src: url('../resources/Numans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'PoiretOne';
    src: url('../resources/PoiretOne-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'RubikGlitch';
    src: url('../resources/RubikGlitch-Regular.ttf') format('truetype');
}

body{
    background-color: #c69eff;
    margin: 0;
    justify-content: center;
}
.entering-container{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 20vh;
    margin-left: 28vw;
    border: 3px solid #7b00f5;
    border-radius: 30px;
    width: 45vw;
    overflow: hidden;
}
.fox{
    height: 40vh;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.buble-container{
    position: relative;
    height: min-content;
    width: min-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 5vw;
}
.bubl{
    height: 40vh;
    width: auto;
    position: absolute;
    z-index: -1;}
.buble-container h3{
    font-family: 'RubikGlitch';
    color: #35006a;
    margin: 0;
    padding: 0;
    font-size: 30px;
    z-index: 1;
    width: 18vw;
        margin-left: 2vw;
}
.age-rating{
    height: auto;
    width: 3vw;
    position: relative;
    z-index: 2;
    margin-top: -5.5vh;
    margin-left: 17vw;
}
.buble-container h4{
    font-family: 'Inter';
    color: #3e2057;
    margin: 0;
    padding: 0 2vw;
    font-size: 15px;
    z-index: 1;
    width: 14vw;
    margin-left: 2vw;
    height: 17vh;
    overflow-y: scroll;
}
.buble-container h4::-webkit-scrollbar{
    display: none;
}
.warn{
    color: #790094;
    font-style: normal;
    font-weight: 900;
}
.if-no-load{
    font-family: 'Inter';
    color: #35006a;
    text-align: center;
    margin-top: 2vh;
}
a{
    color: #35006a;
    text-decoration:dotted;
    font-weight: 600;
}
a:hover{
    color: #7b00f5;
    text-decoration: underline;
}
.instruction{
    font-family: 'Inter';
    color: #35006a;
    text-align: center;
    margin-top: 5vh;
    font-size: 15px;
    font-weight: 600;
}
.audio-warn{
    width: 15vw;
    font-family: 'BrunoAce';
    margin-left: 2vw;
}
.audio-container{
    bottom: 2vh;
    right: 2vw;
    width: fit-content;
    border-radius: 50px;
    background-image: linear-gradient(to bottom right, #6a00f53f, #ba42ff3f);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    margin-left: 3vw;
}