@import url('https://fonts.googleapis.com/css2?family=Solway&display=swap');

:root {
    --backGround:  darkolivegreen;
    --mainfontColour:  white;;
  }

body {
    margin: 0 8px 0 0; 
    padding: 0; /*reset*/ 
    background-color: var(--backGround); 
    color: var(--mainfontColour);
}

main {
    width: 100%; 
    text-align: center; 
    margin: 0px 5px;
}

.title {
    margin-top: 50px; 
    display: inline-block;
}

footer {
    text-align: center; 
    position: fixed; 
    bottom: 10%; 
    width: 100%; 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
}

a:link,a:visited {color: var(--mainfontColour) ;text-decoration:none;} 
a:hover {color: red ; text-decoration:none;}

#form, #response {
    margin: 0 8px 0 0;  
    padding: 0; /*reset*/ 
    font-family: 'Arial', Helvetica, sans-serif; 
    font-size: 18px; 
    font-weight: normal; 
}

/* ================= CONTACT FORM ================= */

#formContainer {
    width: 90%; 
    margin: 50px auto 0 auto; 
    text-align:left; 
}

.f1 {font-size: inherit ; color: rgb(122, 122, 122); border:1px solid #CCCCCC;background-color: #FAFAFA; height:35px; width:97%; padding-left:3%;}
.f2 {font-size: inherit ; color: #333; vertical-align: middle; height:60px; border:1px solid #CCCCCC; border-radius: 5px; background-color: #FAFAFA; width:100%;}
.f3 {font-family: Arial, Helvetica, sans-serif; font-size: inherit ; color: #333; /*vertical-align: top; */line-height:25px; border:1px solid #CCCCCC; background-color:#FAFAFA; width:97%; padding-left:3%;}

#telephoneBox {display:none !important;}
.label {margin: 10px 0 3px;}
#button {margin: 10px 0 10px 0;}

#badge {
    margin-top: 50px; 
    position: fixed; 
    bottom: 5%;
}

/* ================= SUCCESS PAGE ================= */

#success {
    text-align: center; 
    margin-top: 20%; 
    line-height: 40px;
}

/* ================= RESPONSIVE MEDIA QUERIES - MOBILE FIRST ================= */

@media only screen and (orientation: landscape) {    
    #badge {
        margin-top: 30px; 
        position: relative; 
    }
}

/* Extra small devices (phones, 576px and down) */
@media only screen and (max-width: 576px) {
    h1 {font-family: 'Solway', serif; font-size: 36pt; color: rgb(255, 255, 255);}
    hr {border-top: 5px dotted var(--mainfontColour); margin-top: -35px; border-bottom: 0;}
}

/* Small devices (portrait tablets and large phones, 576px and up) */
@media only screen and (min-width: 576px) {
    h1 {font-family: 'Solway', serif; font-size: 24pt; color: rgb(255, 255, 255);}
    hr {border-top: 4px dotted var(--mainfontColour); margin-top: -23px; border-bottom: 0;}
    footer {font-size: 20px;}
    #formContainer {width: 80%;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) { 
    #formContainer {width: 500px;}
}

/* Large devices (laptops/desktops 992px and up) */
@media only screen and (min-width: 992px) {

} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}