body {
    background-image: url(../images/ShiplapBackgrounf.png);
    cursor: url("../images/champagne-pointer.png"), default !important;
} 

.jumbotron {
    background-image: url(../images/HeaderEdited.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 400px;
    padding: 0 0;
}

h1 {
    position: relative;
    bottom: -250px;
    color: palevioletred;
    font-family: 'Rochester', cursive;
    text-align: center;
    font-size: 8vw;
    
}

.mainWrapper {
    margin: 0 auto;
}

h2 {
    color: palevioletred;
    font-family: 'Old Standard TT', serif;
    text-align: center;
    position: relative;
    font-size: 300%;
    bottom: -100%;
    margin-bottom: 50px;
}
#firstForm {
    margin-top: 20px;
    margin-bottom: 20px;
}
form {
    margin-top: 100px;
    width: 75%;
    margin: 0 auto;
    background-color: whitesmoke;
    border-radius: 15px;
}

.card {
    width: 80%;
    margin: 0 auto;
}

#submit:hover {
    cursor: url("../images/mouse-glass.png"), default !important;
    background-color: palevioletred;
    color: black;
}

.bellhop:hover {
    cursor: url("../images/mouse-glass.png"), default !important;
    background-color: palevioletred;
    color: black;
}


#close:hover {
    cursor: url("../images/mouse-glass.png"), default !important;
    background-color: palevioletred;
    color: black;
}

.btn-primary {
    color: black;
    background-color: lightpink;
    align-self: center;
    font-family: 'Old Standard TT', serif;
    padding-bottom: 5px;
    padding-top: 8px;
    border: white;
    margin-bottom: 5px;
    font-size: 2vw;
}

.close {
    color: black;
    background-color: lightpink;
    align-self: center;
    font-family: 'Old Standard TT', serif;
    padding-bottom: 5px;
    padding-top: 8px;
    border: white;
    margin-bottom: 5px;
    font-size: 3vw;
}

.heading {
    font-family: 'Old Standard TT', serif;
    text-align: center;
    font-weight: 2vw;
}

.form-group {
    margin-top: 20px;
    font-family: 'Old Standard TT', serif;
    font-size: 3vw;
}

label {
    font-family: 'Old Standard TT', serif;
    font-size: 3vw;
    text-align: center;  
}

#resultsWrap {
    margin-top: 100px;
    width: 75%;
    margin: 0 20px 0 0 auto;
    background-color: whitesmoke;
    border-radius: 15px;
}

h4 {
    font-family: 'Old Standard TT', serif;
}

.hide {
    display: none;
} 

#loader, 
#alert {
    z-index: 999;
    text-align: center;
    padding: 10%;
    position: fixed;
    background: rgba(255,255,255,.8);
    width: 100vw;
    height: 100vh;
    color: palevioletred;
}

#loader h3, 
h3.alert-msg {
    color: palevioletred;
    padding-top: 5%;
    font-size: 3em;
    font-weight: 300;
}

#inviteTextDiv {
    position: relative;
    width: 80%;
    height: 40%;
    bottom: -55%;
    font-size: 1vw;
    margin: 0 auto;
    
}

.white {
    color: whitesmoke;
    font-family: 'Reem Kufi', sans-serif;
}

.black {
    color: black;
    font-family: 'Reem Kufi', sans-serif;
}

.fancy {
    font-family: 'Petit Formal Script', cursive;
    font-size: 150%;
    font-weight: bold;

}

@media only screen and (max-width: 980px) {
    .jumbotron {
      height: 300px;
    }
    h1 {
        bottom: -200px;
    }
    #inviteTextDiv {
        font-size: 2vw;
    }
  }

  @media only screen and (max-width: 768px) {
    .jumbotron {
      height: 200px;
    }
    h1 {
        bottom: -120px;
    }
    #styleButtons {
        display: inline-flex !important;
    }
    #inviteTextDiv {
        font-size: 2vw;
    }
  }
  @media only screen and (max-width: 575px) {
    .jumbotron {
      height: 175px;
    }
    h1 {
        bottom: -120px;
    }
    #inviteTextDiv {
        font-size: 3vw;
    }
  }
  @media only screen and (max-width: 420px) {
    .jumbotron {
      height: 110px;
    }
    h1 {
        bottom: -100px;
        font-size: 12vw;
    }
  }