.middle {
    text-align: center;
}
.right {
    text-align: right;
}
.white {
    color:white;
}
#info {
    justify-content: center;
}
@media (min-width: 908px) {
    img {
        width: 100%;
    }
    body {
        background: #62b8ed url(/static/background.png) fixed top center;
        background-size: cover;
    }
    canvas {
        border: 2px solid white;
        height:360px;
        width:600px;
    }
    select {
        border: 0px;
    }
    #header {
        background: #3D436A;
        width: 100%;
    }
    #title {
        vertical-align: middle;
        font-family: 'Cormorant Garamond', serif;
        font-weight: thin;
        color:white;
        font-size: 60px;
    }
    #prompt {
        font-size: 28px;
        font-weight: 300;
        margin-bottom:2%;
        margin-top: 1%;
    }
    #container {
        display: grid;
        height: 100%;
        grid-template-columns: 615px auto;
        margin: 1%;
    }
    #forms {
        display: grid;
        grid-template-rows: auto;
    }
    .form {
        padding: 1%;
    }
    .label {
        height: 100%;
        vertical-align: middle;
        color:white;
    }
    #midform {
        display: grid;
        grid-template-columns: auto;
        float: inline-start;
    }
    #description {
        overflow : auto;
        height : 190px;
        width : 100%;
        padding: 5px;
    }
    .row {
        text-align:center;
        margin-left:-20px;
        margin-right:-20px;
    }
    .holder {
        padding-top: 0.3%;
        padding-bottom: 0.3%;
        padding-left: 5px;
        margin: 0%;
        background-color: #FFFFFF;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .title {
        padding-top: 0.3%;
        padding-bottom: 0.3%;
        padding-left: 5px;
        margin: 0%;
        background-color: #3D436A;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .btn {
        font-size:48px;
        color: white;
    }
    .btn:hover {
        color: #d3d3d3;
    }
    #topbar{
        position: absolute;
        top: 1px;
        right: 40px;
    }
    #subject {
        width: 97.5%;
        border-radius:5px;
    }
    textarea {
        margin-top: 10px;
        width: 97.5%;
        height: 8vw;
        border-radius:5px;
    }
    .suggest {
        border: 1px solid #d3d3d3;
    }
    .suggest:focus{
        outline-width: 0;
        box-shadow: 0 0 6px #009eff;
        border: 1px solid #e0e0e0;
        color: #000;
    }
    select:focus{
        outline-width: 0;
        box-shadow: 0 0 6px #009eff;
        border: 1px solid #e0e0e0;
        color: #000;
        border-radius: 3px;
    }
    .submit {
        width: auto;
        font-size: 32px;
        background-color:rgb(9, 66, 101); 
        margin:0 auto;
        display:block;
        margin-top: 5px;
    }
    .submit2 {
        width: auto;
        font-size: 20px;
        background-color: #3D436A; 
        margin:0 auto;
        display:block;
    }
    #Suggestion {
        margin-left: 15%;
        margin-right:15%;
    }
    #Query {
        margin-top: 2%;
        margin-left: 15%;
        margin-right:15%;
    }
    #email {
        margin-top: 10px;
        margin-bottom: 10px;
        width: 97.5%;
        border-radius:5px;
    }
    #InteractMessage {
        text-align: center;
    }
    .gap {
        margin-top: 15px;
    }
    #Map{
        width:95%;
    }
}
@media (max-width: 908px) { 
    img {
        width:100%;
    }
    body {
        background: #62b8ed url(/static/background.png) fixed top center;
        background-size: cover;
    }
    canvas {
        border: 2px solid white;
        width: 95vw;
        height: auto;
    }
    .mapDiv {
        padding: 2vw;
        margin: 0 auto;
    }
    #title {
        vertical-align: middle;
        font-family: 'Cormorant Garamond', serif;
        font-weight: thin;
        color:white;
        font-size: 48px;
    }
    #prompt {
        font-size: 24px;
        font-weight: 300;
        margin-bottom:2%;
        margin-top: 1%;
    }
    select {
        border: 0px;
    }
    #header {
        background: #3D436A
    }
    #forms {
        display: grid;
        grid-template-rows: auto;
    }
    .form {
        padding: 1%;
    }
    .label {
        height: 100%;
        vertical-align: middle;
        color:white;
    }
    #midform {
        display: grid;
        grid-template-columns: auto;
        float: inline-start;
    }
    #description {
        overflow : auto;
        height : 190px;
        width : 100%;
        padding: 5px;
    }
    .row {
        text-align:center;
        margin-left:-20px;
        margin-right:-20px;
    }
    .holder {
        padding-top: 0.3%;
        padding-bottom: 0.3%;
        padding-left: 5px;
        margin-left: 2vw;
        margin-right: 2vw;
        background-color: #FFFFFF;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .title {
        padding-top: 0.3%;
        padding-bottom: 0.3%;
        padding-left: 5px;
        margin-left: 2vw;
        margin-right: 2vw;
        background-color: #3D436A;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    #descriptionHolder {
        margin-bottom: 3vw;
    }
    .btn {
        font-size:32px;
        color: white;
    }
    .btn:hover {
        color: #d3d3d3;
    }
    #topbar{
        position: absolute;
        top: 0px;
        right: 40px;
    }
    #subject {
        width: 97.5%;
        border-radius:5px;
    }
    textarea {
        margin-top: 10px;
        width: 97.5%;
        height: 8vw;
        border-radius:5px;
    }
    .suggest {
        border: 1px solid #d3d3d3;
    }
    .suggest:focus{
        outline-width: 0;
        box-shadow: 0 0 6px #009eff;
        border: 1px solid #e0e0e0;
        color: #000;
    }
    select:focus{
        outline-width: 0;
        box-shadow: 0 0 6px #009eff;
        border: 1px solid #e0e0e0;
        color: #000;
        border-radius: 3px;
    }
    .submit {
        width: auto;
        font-size: 32px;
        background-color:rgb(9, 66, 101); 
        margin:0 auto;
        display:block;
        margin-top: 5px;
    }
    .submit2 {
        width: auto;
        font-size: 20px;
        background-color: #3D436A; 
        margin:0 auto;
        display:block;
    }
    #Suggestion {
        margin-left: 15%;
        margin-right:15%;
    }
    #Query {
        margin-top: 2%;
        margin-left: 15%;
        margin-right:15%;
    }
    #email {
        margin-top: 10px;
        margin-bottom: 10px;
        width: 97.5%;
        border-radius:5px;
    }
    #InteractMessage {
        text-align: center;
    }
    .gap {
        margin-top: 15px;
    }
    #Map{
        width:95%;
    }
    #myRange {
        margin-left: 10px;
    }
}
@media (max-width: 454px) { 
    #title {
        font-size: 30px;
    }
    .rowbtn {
        font-size:18px;
        width: 10px;
        margin: 2px;
    }
    .row {
        text-align:center;
        margin-left:-50px;
        margin-right:0px;
    }
    #topbar{
        position: absolute;
        top: 0px;
        right: 5px;
    }
}