@font-face {
  font-family: karmaticArcade;
  src: url(karmaticArcade.woff2)
}
@font-face{
  font-family: editUndo;
  src: url(editUndoBrk.woff2)
}
.container {  
    
    max-height: 62.5rem;
    box-sizing:border-box;
    justify-items:stretch;
    align-items:stretch;
    background-image:url(backgroundv2.png);
    background-size: cover;
    font-family: editUndo;
}

.header {  
    text-align:center;
    box-sizing:border-box;
    
}

.main {  
    box-sizing:border-box;
    padding:0.625rem;
    justify-items:stretch;
    text-align:center;
}

.logo {
    height: auto;
    width: 100%;
    max-width: 800px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 6.25rem;
    margin-top: 5rem;
}

h1 {
  font-size:2.5rem;
  font-family:karmaticArcade;
}
h2 {
  font-size:1.875rem;
  font-family:karmaticArcade;
}
h3 {
  font-size:0.875rem;
  padding-left:0.375rem;
  margin:0;
  font-family: editUndo
}
p {
  font-size:1rem;
  padding-left:0.375rem;
  margin:0;
  font-family: editUndo
}

*{box-sizing: border-box;}


.open-button {
  display: inline-block;
 cursor: pointer;
 outline: none;
 height: 60px;
 width: 180px;
 vertical-align: middle;
 text-decoration: none;
 font-family: inherit;
 font-size: 16px;
 font-weight: 600;
 color: #1f1f1f;
 text-transform: uppercase;
 padding: 1.25em 2em;
 background: #f41fd7;
 border: 1px solid #1f1f1f;
 border-radius: 0.75em;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}

.open-button:hover{
    background: #ff76ec;
 -webkit-transform: translate(0, 0.25em);
 transform: translate(0, 0.25em);
}
.open-button:active{
    background: #f41fd7;
 -webkit-transform: translate(0em, 0.75em);
 transform: translate(0em, 0.75em);
}
/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  
  border-radius: 0.75em;
  z-index: 9;
}
/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: #aff6ff;
  border: 1px solid #1f1f1f;
  border-radius: 0.75em;
}
/* Full-width input fields */
.form-container input[type=text], input[type=email]{
  width: 100%;
  height: 20px;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: 1px solid #1f1f1f;
  border-radius: 0.75em;
  background: #f1f1f1;
}
.form-container input[type=textarea] {
    width: 100%;
    height: 80px;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: 1px solid #1f1f1f;
  border-radius: 0.75em;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=email]:focus, .form-container input[type=textarea]:focus {
  background-color: #ddd;
  outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #d5ffa0;
  padding: 16px 20px;
  margin-bottom:10px;
  display: inline-block;
 cursor: pointer;
 outline: none;
 height: 60px;
 width: 180px;
 vertical-align: middle;
 text-decoration: none;
 font-family: inherit;
 font-size: 15px;
 font-weight: 600;
 color: #1f1f1f;
 text-transform: uppercase;
 border: 1px solid #1f1f1f;
 border-radius: 0.75em;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
}
/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: #ff76ec;
}
/* Add some hover effects to buttons */
.form-container .btn:hover {
    background: #c1ff72;
 -webkit-transform: translate(0, 0.25em);
 transform: translate(0, 0.25em);
}

.form-container .btn:active {
    background: #d5ffa0;
 -webkit-transform: translate(0em, 0.75em);
 transform: translate(0em, 0.75em);
}

.form-container .cancel:hover{
    background: #f41fd7;
 -webkit-transform: translate(0, 0.25em);
 transform: translate(0, 0.25em);
}

.form-container .cancel:active{
    background: #ff76ec;
 -webkit-transform: translate(0em, 0.75em);
 transform: translate(0em, 0.75em);
}