body {
    appearance: none;
    background-color: rgb(30, 31, 31);
    height: 100%;
    margin: 0px;
    padding: 0px;
    z-index: -1; 
    overflow: hidden;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: PressStart2P;
    src: url('./PressStart2P-Regular.ttf');
}



.bg-img {
    height: 100vh;
    width: 100%;
    position: relative;
    background: no-repeat url("./images/14237502_5438849.jpg");
    background-position: center;
    margin: 0px auto;
}

.caption-cont {
    display: flex;
    flex-direction: row;
    flex: 1 1 100%;
    width: 30%;
    position: absolute;
    bottom: 1vh;
    justify-content: center;   
    
}

.bg-caption {
    height: 100%;
    color: white;
    font-size: 1em;
    margin: 0;
}

.bg-link {
    height: 100%;
    color: white;
    font-size: 1em;

}

.form-container {
    height: 100%;
    width: 70%;
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
}


:link {
    color: white;
}

.p-container {
    width: 100%;
    min-width: 66vw;
    background-color: #f8f7f7; 
    float: right;
    padding-left: 4.375rem;
    padding-right: 2.5rem;
    padding-bottom: 1.25rem;
    padding-top: 12vh; 
    font-weight: bold; 
    font-size: 1.4rem;
    flex: 1 1;
    justify-self: flex-end;
}

.heading-text p {
    float: left;
    max-width: 55ch;  
}


.input-header {
    width: 100%;
}

.input-header p {
    font-weight: 700;
    font-size: 1.35rem; 
    opacity: .8;
    width: 30%; 
}

section.inputs {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 4.375rem;
    padding-bottom: .9375rem;
    background-color: white;
    box-shadow: 1px 6px 6px -3px lightgray;    
    position: relative;

}

.user_name,
.contact_info,
.password {
    width: 75%;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    
}

.first_name,
.last_name,
.phone_number,
.email,
.password_initial,
.password_confirm {
    display: flex;
    flex-direction: column; 
    flex-wrap: wrap;
    width: 75%;
    padding-bottom: 1.25rem;
}

label {
    font-size: .75rem;
    font-weight: 600;
    width: 60%;
    opacity: .8;
}

input {
    appearance: none;
    outline: none;
    border-radius: 3px;
    border-color: #dddada;
    border-style: solid;
    border-width: 1.2px;
    max-width: 75%;
    height: 1.75rem;    
}

input:hover,
input.visited:invalid:hover{
    border-color: blue;
    box-shadow: 2px 2px 6px -1px gray;
}

input.visited:invalid {
    border-color: red;
}

.badinput {
    border-color: red;
}

input:valid {
    border: 2px solid lightgreen;
}

.form-submit {
    height: 100%;
    padding-left: 4.375rem;
    background-color: #f8f7f7;
}

.button-container {
    padding-top: 2.5rem;

}


button {
    padding: .9375rem 5% .9375rem 5%;
    background-color: rgb(67, 9, 82, .7);
    box-shadow: 0px 6px 6px -4px black;
    border-style: none;
    color: white;
    font-weight: 700;
    font-size: 1.25em;
    border-radius: 7px;  
}

button:hover{
    background: url("images/14237502_5438849.jpg");
}

.log-in{
    width: 100%;
    margin-top: 1.25rem;
    font-size: 1em;
}

.log-in p {
    padding-top: 1.25rem;
    font-weight: 700;
    opacity: .7;
    display: inline;
}

a {
    text-decoration: none;
    text-decoration-color: none;
    opacity: 1;
    color: rgb(67, 9, 82, .7);
    font-weight: 700;
    padding-left: .5rem;
}

div.logo {
    height: 20vh;  
    background-color:rgba(209, 201, 201, 0.4);
    width: 30%;
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
    top: 16vh;  
    justify-content: space-evenly;
    padding: 2vw;
}

img.logo-svg {
    width: 25%;
    flex: 1 1 100%;
}

p.logo-label {
    font-family: PressStart2P;
    height: 100%;
    font-size: 4vw;
    flex: 1 1 100%;
}

input[type="password"].mismatch+span::after{
    content: 'Passwords do not match';
    color: red;
    font-size: .75rem;
}

.closeBtn {
    margin-left: .9375rem;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 1.375rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition: 0.3s;
  }

  @media (-webkit-device-pixel-ratio: 1.25) {
    * {
      zoom: 0.8;
      
    }
  }