:root {
    --border-color: rgba(255, 0, 179, 1);
    --main-bg-color: black;
    --main-shadow-color: rgba(255, 0, 179, 0.75);
    --main-padding: 15px;
    --red-shadow-color: rgba(255, 0, 0, 0.75);
    --red-solid-color: rgba(255, 0, 0, 1);
  }
html{
    background-color: black;
    align-content: center;
    align-items: center;
    text-align: center;
    height: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.behind{
    z-index: 0;
    opacity: .4;
    position: absolute;
    pointer-events: none;
    height: inherit;
    width: 100%;
}
.content{
    z-index: 1;
    opacity: 1;
    margin: none;
    padding: none;
    font-family: 'Dancing Script', cursive;
    align-content: center;
    align-items: center;
    text-align: center;
}
.title{
    color:white;
    text-shadow: 2px 2px rgba(255, 0, 0, 1);
}
.mainTitleText{
    font-size: 45px;
}
.mainTitle{
    width: auto;
    height: 30vh;
    font-size: 60px;
}
.subTitle{
    font-family: 'Courgette', cursive;
    font-size: 20px;
}

.display{
    display: flex;
    background-color: rbga(200,200,200,1);
    width: 100%;
    height: 50vh;
    align-items: center;
    align-content: center;
    justify-content: center;
    
}
.map {
    background-color: rbga(0,0,0,1);
    height: 50vh;
    width: 50%;
    float: left;

}

.bottom{
    z-index: 1;
    background-color: rbga(0,0,0,1);
    opacity: 1;
    height: 50vh;
    width: 50%;
    float: left;
    align-items: center;
    text-align: center;
    align-content: center;
    overflow: visible;
}
.inputs{
    color: white;
    font-family: 'Courgette', cursive;
    text-align: left;
}
.inputs h3{
    text-align: center;
}
.choices{
    color: white;
    float:left;
}
.button{
    font-family: 'Courgette', cursive;
    width: 50%;
    background-color: var(--red-solid-color);
    border:none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    position: flex;      
}
.button:hover{
    background-color: rgba(255,0,0,.6);
    color: white;
}
.button:active{
    background-color: black;
    color:white;
}
a {
    color: white;
    text-decoration: none;
}
.link{
    color: white;
    text-decoration: none;
}
.side{
    height: auto;
    position: auto;
    font-family: 'Courgette', cursive;
    text-align: center;
    align-items: center;
    align-content: center;
    color: white;
    width: 100%;
    background-color: rbga(0,0,0,1);
}
.side ul{
    list-style-type: none;
}
@keyframes pulseGlow{
	0%, 100% {box-shadow: 0 -10px -12px 0 rgba(255, 0, 0, 0.24), 0 17px 50px 0 rgba(255, 0, 0, 0.17);}
	50% {box-shadow: 0 -10px 12px 0 rgba(255, 0, 0, 0.75), 0 17px 50px 0 rgba(255, 0, 0, 0.69);}
}