#contact-container{
font-size: 18px;
background: rgba(130,150,180,0.1);
position: relative;
top:10%;
height: fit-content;
left: 50%;
transform: translate(-50%, 0%);
width: fit-content;
resize: vertical;
text-decoration: none; 
-webkit-box-shadow: 2px 3px 15px -4px rgba(0,0,0,0.7); 
box-shadow: 2px 3px 15px -4px rgba(0,0,0,0.7);
}

#contactme{
position: relative;
top:0.5em;
height: 1.3em;
left:0.5em;
width: 100%;
padding-left:.3em;
padding-top:.2em;
font-size: 26px;
text-align:left;
color: black;
}

.contact-form{
position: relative;
margin-top:1.3em;
height: fit-content;
left:0;
max-width: 40em;
text-align:left;
padding-left:.4em;
padding-right:.4em;
/* background-color: blue; */
}

.error{
position:relative;
bottom:.3em;
padding-left:.3em;
height: 1.3em;
left:0;
width: 100%;
font-size: inherit;
text-align:left;
color:red;
}

.success{
position:relative;
bottom:.3em;
padding-left:.3em;
height: 1.3em;
left:0;
width: 100%;
font-size: inherit;
text-align:left;
color:green;
}

input[type=text] {
position: relative;
width: 100%;
padding: .9em 1.1em;
margin: .4em 0;
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
background:#c7aea5;
}

textarea{
position: relative;
width: 100%;
resize: vertical;
padding: .9em 1.1em;
margin: .4em 0;
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
background:#c7aea5;
}

#contact-container button {
width: 20%;
background-color: rgba(120, 16, 34, 1);
color: white;
padding: .9em 1.1em;
margin: .4em 0;
border: none;
cursor: pointer;
}

#contact-container button:hover {
background-color: rgba(120, 16, 34, 0.8);
}


@media screen and (max-width: 767px) and (orientation: landscape) {
body{
    overflow:hidden;
}

#contact-form{
    top:120px;
    width: 400px;
}
}

@media screen and (max-width: 767px) and (orientation: portrait) {
body{
    overflow:hidden;
}

#contact-form{
    left:10%;
    width: 360px;
}
}