:root
{
    font-size: 16px;
    --bg-colour: #212223
    /* --bg-colour: #fff; */
}


html, body
{
    width: 100%;
    height:100%;

    margin: 0;
    padding: 0;


    background-color: var(--bg-colour);


}

.hero
{
    min-width: 100%;
    min-height: 100%;

    position: relative;
    /* opacity: 30%; */

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("assets/background2.png");
}
.mint-button
{
    font-size: 2em;
    min-width: 12ch;


    position: absolute;
    top: 70%;
    left: 70%;
}

@media (max-width: 1900px) or (orientation: portrait)
{
    .hero
    {
        min-width: 100%;
        min-height: 100%;

        position: relative;
        /* opacity: 30%; */

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url("assets/background1.png");
    }

    .mint-button
    {
        font-size: 2em;
        min-width: 12ch;


        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}


.popup
{
    top: 0.1em;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0%);

    width: 50ch;;
    height: 15ch;
    background-color: white;

    border-radius: 1em;
    display: none;
}

.popup-inner
{
    width: 100%;
    height: 100%;
    text-align: center;

}
.popup-text
{
    display: inline-block;
    padding: 1em;
}
.popup-text *
{
    display: inline;
}
.popup-text p
{
    padding-left: 1em;
    padding-right: 1em;
}


.popup-form *
{
    width: 7ch;
    font-size: 1.5em;
}

#error-msg
{
    padding: 0;
    margin: 0;
    color: red;
    text-align: center;
    font-size: 0.7em;
}