@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Poetsen+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Wittgenstein:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Arsenal+SC:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100..900&display=swap');

:root {
    --fontname: "Inter";
}

.mantine-69c9zd {
    cursor: pointer
}

.main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.top-buttons {
    display: flex;
    margin-inline: auto;
    grid-gap: 25px;
    margin-top: 10px;
}

h1 {
    font-family: Poppins;
    /* background: linear-gradient(90deg, rgba(31, 251, 67, 1) 0%, rgba(252, 69, 242, 1) 100%); */
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* font-weight: bold; */
    font-size: 2.7rem !important;
    margin-bottom: -8px;
}

h2 {
    /* font-family: Bebas Neue; */
    /* background: linear-gradient(90deg, rgba(31, 251, 67, 1) 0%, rgba(252, 69, 242, 1) 100%); */
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* font-weight: bold; */
    font-size: 1.3rem !important;
    margin-bottom: -10px
}

h3 {
    /* font-family: Bebas Neue; */
    /* background: linear-gradient(90deg, rgba(31, 251, 67, 1) 0%, rgba(252, 69, 242, 1) 100%); */
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* font-weight: bold; */
    font-size: 1.2rem !important;
    margin-bottom: -10px
}

p {
    font-family: var(--fontname);
    /* color: rgb(255, 255, 255); */
    /* margin-left: 10px; */
    max-width: 500px;
    margin-inline: auto
}

@media only screen and (max-width: 768px) {
    p {
        font-family: var(--fontname);
        /* color: rgb(255, 255, 255); */
        margin-left: 10px;
        max-width: 90vw;
        margin-inline: auto
    }
}

.bmac {
    width: 133px;
    height: 36px;
    background-image: url("bmc-button.png");
    margin-inline: auto;
    background-size: cover;
    border-radius: 30px;
    margin-top: 50px;
}

@media only screen and (max-width: 768px) {
    .bmac {
        width: 111px;
        height: 30px;
        background-image: url("bmc-button.png");
        margin-inline: auto;
        background-size: cover;
        border-radius: 30px;
        margin-top: 50px;
    }
}


body {
    text-align: center
}

.settings-div-dark,
.settings-div-light {
    /* width: 500px; */
    display: flex;
    flex-direction: column;
    grid-gap: 30px;
    height: fit-content;
    /* margin-top: 20px; */
    /* padding: 26px; */
    /* border-radius: 12px; */
    /* margin-bottom: 40px; */
    margin-inline: auto
}

.settings {
    margin-inline: auto;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    .settings {
        width: 100vw;
        margin-inline: auto;
        overflow: hidden;

    }
}

@media only screen and (max-width: 768px) {

    .settings-div-dark,
    .settings-div-light {
        width: 95vw;
        display: flex;
        flex-direction: column;
        grid-gap: 30px;
        height: fit-content;
        /* margin-top: 20px; */
        /* padding: 23px; */
        /* border-radius: 12px; */
        /* margin-bottom: 40px; */
        margin-inline: auto
    }
}

.alert {
    width: 400px;
    margin-top: 10px;
}

@media only screen and (max-width: 768px) {
    .alert {
        width: 85vw;
        margin-top: 10px;
    }
}

.input-box {
    width: 490px;
}

@media only screen and (max-width: 768px) {
    .input-box {
        width: 95vw;
    }
}

.contact-div {
    margin-top: 15px;
    margin-bottom: 30px;
    font-size: 0.58rem;
}

.compressor-switch-slider-div {
    width: 500px;
    display: flex;
}

.show-compressor-slider {
    width: 200px;
}

.hide {
    display: none
}

.rain-gif,
.car-gif,
.car-gif2,
.flower-gif {
    background: url('rain.gif');
    width: 500px;
    height: 120px;
    border-radius: 8px;
}

@media only screen and (max-width: 768px) {

    .flower-gif,
    .car-gif2 {
        width: 95vw;
        background: url('rain.gif');
        height: 120px;
    }
}

@media only screen and (max-width: 768px) {
    .car-gif2 {
        background: url('vinyl.gif');
    }
}

.car-gif {
    background: url('car.gif');
    background-position: 50% 70%
}

.flower-gif {
    background: url('flower.gif');
    background-position: 40% 30%
}

.car-gif2 {
    background: url('vinyl.gif');
    background-position: 50% 50%
}


.header {
    display: flex;
    width: fit-content;
    align-items: baseline;
    grid-gap: 20px;
    margin-left: auto;
    margin-right: auto
}

.audio-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 20px;
    margin-top: -15px;
    width: fit-content;
    margin-inline: auto
}

#playback {
    /* border-radius: 15px;
    background-color: lightcoral;
    border-color: red;
    border-style: solid;
    border-width: 2px; */
    /* padding:10px;  */
    margin-top: 15px;
    margin-bottom: 5px;
    border-radius: 9px;
    /* height: fit-content */
}


@media only screen and (max-width: 768px) {
    #playback {
        width: 90vw
    }
}

audio {
    width: 420px;
}

#button {
    margin-top: 10px;
}



._dash-loading {
    margin: auto;
    color: transparent;
    text-align: center;
}