@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap");

:root {
    --clr-yellow: #ffde59;
    --clr-dark-pink: #ff527a;
    --clr-pink: #efa5b6;
    --clr-light-pink: #ffcfda;
}

body {
    background-image: url('/Assets/bg.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    background-attachment: fixed;
    font-family: "Raleway", sans-serif;
}

/*Remove TextBox Mode Number Arrow*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.btnClick {
    color: var(--clr-dark-pink);
    background-color: var(--clr-yellow);
    text-decoration: none;
    padding: 1rem 3rem 1rem 3rem;
    border-radius: 50rem;
    font-weight: 500 !important;
}

.btnDownload {
    color: black;
    background-color: var(--clr-yellow);
    text-decoration: none;
    padding: 1rem 1.3rem 1rem 1.3rem;
    border-radius: 50%;
    /*font-weight: 500 !important;*/
    font-size: 1.5rem;
}

@media(min-width: 1400px) {
    .hero {
        background-color: rgb(255, 255, 255, .2);
        padding: 1rem 1rem 2rem 1rem;
        border-radius: 3rem;
        /*margin: 1rem 0 1rem 0;*/
    }

    .ttl {
        font-size: 4rem !important;
        position: relative;
    }

        .ttl .ttl1 {
            font-weight: bold;
            font-family: "League Spartan", sans-serif;
            color: var(--clr-yellow);
            text-shadow: .3rem .2rem #ff527a;
            letter-spacing: .4rem;
        }

        .ttl .ttl2 {
            font-weight: 400;
            font-family: "Yellowtail", cursive;
            color: white;
            letter-spacing: .45rem;
            position: absolute;
            top: 2.1rem;
            transform: translateX(-50%);
            left: 50%;
            width: 100%;
        }

    .petImage {
        width: 250px;
    }

    .venue {
        font-family: "League Spartan", sans-serif;
        color: white;
        text-shadow: .2rem .2rem var(--clr-pink);
        font-weight: bold;
        font-size: 1.5rem;
        position: relative;
        margin-bottom: 1.1rem;
    }

        .venue .venue2 {
            position: absolute;
            top: 1.6rem;
            transform: translateX(-50%);
            left: 50%;
            width: 100%;
        }

    .boothNo {
        color: white;
        text-shadow: .1rem .1rem var(--clr-pink);
        font-size: 1.4rem;
        font-weight: 450;
        letter-spacing: 3px;
    }

    .line {
        border: 2px solid var(--clr-light-pink);
        margin-top: 1.5rem;
        margin-bottom: 1.5rem
    }

    .message {
        color: white;
        text-shadow: .1rem .1rem var(--clr-pink);
        font-size: 1.1rem;
        font-weight: 420;
    }
}

@media(min-width: 768px) and (max-width: 1399px) {
    .hero {
        background-color: rgb(255, 255, 255, .2);
        padding: 1rem 1rem 2rem 1rem;
        border-radius: 3rem;
        /*margin: 1.5rem 0 1.5rem 0;*/
        /*margin-top: 1rem;
        margin-bottom: 1rem;*/
    }

    .ttl {
        font-size: 3.1rem !important;
        position: relative;
    }

        .ttl .ttl1 {
            font-weight: bold;
            font-family: "League Spartan", sans-serif;
            color: var(--clr-yellow);
            text-shadow: .3rem .2rem #ff527a;
            letter-spacing: .4rem;
        }

        .ttl .ttl2 {
            font-weight: 400;
            font-family: "Yellowtail", cursive;
            color: white;
            letter-spacing: .4rem;
            position: absolute;
            top: 1.5rem;
            transform: translateX(-50%);
            left: 50%;
            width: 100%;
        }

    .petImage {
        width: 180px;
    }

    .venue {
        font-family: "League Spartan", sans-serif;
        color: white;
        text-shadow: .2rem .2rem var(--clr-pink);
        font-weight: 580;
        font-size: 1.3rem;
        position: relative;
        margin-bottom: .8rem;
    }

        .venue .venue2 {
            position: absolute;
            top: 1.4rem;
            transform: translateX(-50%);
            left: 50%;
            width: 100%;
        }

    .boothNo {
        color: white;
        text-shadow: .1rem .1rem var(--clr-pink);
        font-size: 1.2rem;
        font-weight: 450;
        letter-spacing: 2px;
    }

    .line {
        border: 2px solid var(--clr-light-pink);
        margin-top: 1.3rem;
        margin-bottom: 1.3rem
    }

    .message {
        color: white;
        text-shadow: .1rem .1rem var(--clr-pink);
        font-size: 1rem;
        font-weight: 440;
    }
}

@media(max-width: 767px) {
    .hero {
        /*background-color: rgb(255, 255, 255, .2);*/
        /*padding: 1rem 1rem 2rem 1rem;*/
        /*border-radius: 3rem;*/
        /*margin: 1.5rem 0 1.5rem 0;*/
       /* padding-top: 2.5rem;
        padding-bottom: 2rem;*/
    }

    .ttl {
        font-size: 3.2rem !important;
        position: relative;
    }

        .ttl .ttl1 {
            font-weight: bold;
            font-family: "League Spartan", sans-serif;
            color: var(--clr-yellow);
            text-shadow: .3rem .2rem #ff527a;
            letter-spacing: .28rem;
        }

        .ttl .ttl2 {
            font-weight: 400;
            font-family: "Yellowtail", cursive;
            color: white;
            letter-spacing: .4rem;
            position: absolute;
            top: 1.5rem;
            transform: translateX(-50%);
            left: 50%;
            width: 100%;
        }

    .petImage {
        width: 180px;
    }

    .venue {
        font-family: "League Spartan", sans-serif;
        color: white;
        text-shadow: .2rem .2rem var(--clr-pink);
        font-weight: 600;
        font-size: 1.3rem;
        position: relative;
        margin-bottom: .6rem;
    }

        .venue .venue2 {
            position: absolute;
            top: 1.2rem;
            transform: translateX(-50%);
            left: 50%;
            width: 100%;
        }

    .boothNo {
        color: white;
        text-shadow: .1rem .1rem var(--clr-pink);
        font-size: 1.2rem;
        font-weight: 450;
        letter-spacing: 2px;
    }

    .line {
        border: 2px solid var(--clr-light-pink);
        margin-top: 1.3rem;
        margin-bottom: 1.3rem
    }

    .message {
        color: white;
        text-shadow: .1rem .1rem var(--clr-pink);
        font-size: 1rem;
        font-weight: 420;
    }
}


/*input[type=text], TextBox {
    border: 1px solid #ccc;
}

    input[type=text]:focus, TextBox:focus {
        background-color: #FFBFFF;
        border: 1px solid #ccc;
    }
*/