*{
box-sizing:border-box;
}

body{
font-family: Arial;
margin:0;
background-color:#f2f2f2;
}

nav{
background-color:#333;
overflow:hidden;
}

nav a{
float:left;
display:block;
color:white;
padding:14px 20px;
text-decoration:none;
}

nav a:hover{
background-color:#ddd;
color:black;
}

main{
padding:20px;
}

.row:after{
content:"";
display:table;
clear:both;
}

.leftcolumn{
float:left;
width:70%;
}

.rightcolumn{
float:left;
width:30%;
padding-left:20px;
}

.card{
background-color:white;
padding:20px;
margin-top:20px;
}

img{
width:100%;
height:auto;
}

iframe{
width:100%;
height:315px;
border:0;
}

footer{
background-color:#333;
color:white;
text-align:center;
padding:10px;
margin-top:20px;
}

@media screen and (max-width:800px){

.leftcolumn,
.rightcolumn{
width:100%;
padding:0;
}

nav a{
float:none;
width:100%;
}

iframe{
height:250px;
}

}