* {
    text-align: center;
    color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
    margin: 0 auto;
}


body {
    background-color: #0c0c0c;
}

body:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background: linear-gradient(0deg, #2b1d7a, #076aff);
    background-size: 400% 400%;
    clip-path: circle(40% at 60% 100%);

    -webkit-animation: AnimationName 14s ease infinite;
    -moz-animation: AnimationName 14s ease infinite;
    -o-animation: AnimationName 14s ease infinite;
    animation: AnimationName 14s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes AnimationName {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}

h1 {
    font-size: 3vw;
    font-family: Arial Black, Gadget, sans-serif;
    color: white;
}

main {
    margin-top: 10vh;
    backdrop-filter: blur(16px) saturate(176%);
    -webkit-backdrop-filter: blur(16px) saturate(176%);
    background-color: rgb(11 11 20 / 54%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    width: 50vw;
    height: 80vh;
}

form {
    width: 40vw;
    margin: 0 auto;
}
.feedback-input {
    color:white;
    font-family: Helvetica, Arial, sans-serif;
    font-weight:500;
    font-size: 18px;
    border-radius: 5px;
    line-height: 22px;
    background-color: transparent;
    border: 2px solid rgb(0, 26, 255);
    box-shadow: 0 0 0.5rem rgb(0, 26, 255),
    inset 0 0 1rem rgb(0, 4, 255);
    transition: all 0.3s;
    padding: 13px;
    margin-bottom: 15px;
    width:100%;
    box-sizing: border-box;
    outline:0;
  }
  
  .feedback-input:focus { border:2px solid #49c3cc; }
  
  textarea {
    height: 150px;
    line-height: 150%;
    resize:vertical;
    max-height: 50vh;
  }
  
  [type="submit"] {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    width: 100%;
    background:#69d65a;
    border: 2px solid rgb(0, 255, 42);
    box-shadow: 0 0 0.5rem rgb(0, 255, 42),
    inset 0 0 1rem rgb(0, 255, 42);
    border-radius:5px;
    border:0;
    cursor:pointer;
    color:white;
    font-size:24px;
    padding-top:10px;
    padding-bottom:10px;
    transition: all 0.3s;
    margin-top:-4px;
    font-weight:700;
  }
  [type="submit"]:hover { background:#49cc6a; }

@media all and (orientation: portrait) and (max-aspect-ratio: 13/9) {
    * {
        text-align: center;
    }
    header {
        display: block;
    }
    h1 {
        font-size: 5vw;
        margin-bottom: 5%;
    }

    main {
        margin: 0 auto;
        margin-top: 10%;
        width: 90vw;
        z-index: 999999;
    }

    form {
        width: 80vw;
    }
}