html {
font-size: 1vw; /*vw stands for viewport window with is part of rems*/
}
#wrapper {
width: 85%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#hero {
width: 100%; /*this is 100% of the parent, which is the wrapper*/
height: auto;
margin-bottom: 2%;
position: relative;
}
/*if you don't want the gap between the column and the hero, have img display: block*/
@media screen and (max-width: auto){
img{
width: 100% !important;}
}
body {
background-color: #794c55;
color: #2e2725;
font-size: 1.5rem;
font-family: tahoma, verdana, sans-serif;
}
#leftcolumn {
width: 32%;
height: auto;
background-color: #ec6c76;
float: left;
padding: 2%;
}
#rightcolumn {
width: 56%;
height: auto;
background-color: #c7442f;
float: right;
padding: 2%;
margin-bottom: 2%;
}
#footer {
width: 96%;
height: auto;
background-color: #794c55;
padding: 2%;
text-align: center;
clear: both;
}
/*clear and both signify to the footer to go below the columns; otherwise it will be a part of it */
.videocontainer {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.videocontainer iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
p{
line-height: 130%
}
.right {
float: right;
margin-left: 2%;
margin-bottom: 2%;
}
a:link {
color:#e8a95a;
}
a:visited {
color: #7d9cb1;
}
a:hover {
text-decoration: none;
color: #e4d4c9;
}
img{
max-width: 100%;
height: auto;
}
#hero img{
width: 100%;
height: auto;
}
.herotext {
position: absolute;
margin: 0;
top: 5%;
left 55%;
width: 100%;
text-align: center;
font-family: garamond, serif;
}