* {
box-sizing: border-box;
}
body {
background-color: lightblue;
background-image: linear-gradient(to right,#3196F3, #00BFFF);
font-family: arial;
}
header {
width: 100%;
text-align: center;
}
h1 {
color: #671e17;
text-shadow: 0 0 4px black;
}
a {
color: #671e17;
}
nav {
display: flex;
flex-direction:row;
margin-top: 5px;
width: 100%;
position: sticky;
top: 0;
padding: 5px;
overflow: hidden;
background-color: #333333;
border-radius: 15px 15px 15px 15px;
}

nav a {
color: white;
border-radius: 15px 15px 15px 15px;
margin-left: 10px;
padding: 5px;
text-align: center;
text-decoration: none;
}
nav a picture
{width: 100%;
}
nav a:hover {
background-color: #111;
color: white;
}
nav a.active {
background-color: lightgrey;
border-bottom: 3px #671e17;
color: #101010;
}
side {
padding: 10px;
float: left;

width: 20%;
}
h2 {
text-align: center;
border-left: 5px solid red;
border-radius: 5px 5px 5px 5px;
text-shadow: silver 2px 2px 2px;
background-color: white;
}
side picture
{
padding: 2px;
width: calc(99% - 2px);
background-color: white;
}
side picture img {
width: 100%;
padding: 10px;
border-radius: 15px 15px 15px 15px;
}
ul {
display: flex;
list-style: none;
margin-top: 5px;
width: 100%;
flex-direction: column;
color: white;

text-align: left;
}
li {

margin-top: 15px;
background-color: #333333;
text-decoration: none;
}
li a {
margin-left: 5px;
color: white;}
li:hover {
background-color: #111;
color: white;
}
main {
padding: 20px;
float: left;
width: 60%; 
}
h3 {
text-align: center;
border-left: 5px solid red;
border-radius: 5px 5px 5px 5px;
background-color: white;
text-shadow: silver 2px 2px 2px;
}
ol {
padding: 10px 16px;
list-style: none;
border-radius: 5px 5px 5px 5px;
}

ol li {
display: inline;
border-radius: 5px 5px 5px 5px;
font-size: 18px;
}
ol li+li:before {
padding: 5px;

color: black;
content: "/\00a0";
}
ol li a {
color: white;

text-decoration: none;
}
ol li a:hover {
border-radius: 5px 5px 5px 5px;
color: white;
text-decoration: underline;
}
h4 {
text-align: center;
background-color: white;
margin-left: 5px;
text-shadow: silver 2px 2px 2px;
border-left: 5px solid red;
border-radius: 5px 5px 5px 5px;
}
section  {
margin-top: 5px;
margin-left: 5px;
float: left;
padding: 20px;
width: 100%;
flex-direction: row;

}
section a {
color: #671e17;
text-align: center;

}
iframe {
float: center;
border-radius: 5px 5px 5px 5px;
background-color: blue;
width: 404px;
height: 304px;
overflow: auto;
}

article {

margin-top: 15px;
width: 100%;
}
article img {
width: calc(25% - 2px);
border-radius: 5px 5px 5px 5px;
}
article picture
{
clear: left;
padding: 2px;
display: flex;
width: calc(99% - 2px);
overflow:hide;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
article picture img {
width: calc(100% - 2px);
}
picture
{
float: left;
display: flex;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #ccc;
}

figure
{
float: left;
margin-top: 15px;
border-left: 1px;
width: 200px;
background-color: #f1f1f1;
}
figure img
{
border-left: 1px;
display: inline;
width: calc(100% - 2px);
background-color: #f1f1f1;

}
figure:hover {
opacity: 0.7;
}


figcaption a {
display: block;
border: 1px solid #777;
background-color: black;
text-align: center;
color:white;
padding: 3px;
}

aside {
padding: 20px;
width: 20%;
float: left;
}

h5 {
text-align: center;
background-color: white;
border-radius: 5px 5px 5px 5px;
text-shadow: silver 2px 2px 2px;
border-left: 5px solid red;
}


}
h6 {
text-align: right;
color: #671e17;
border-radius: 5px 5px 5px 5px;
}
aside a {
float: left;
color: #671e17;
margin-top: 10px;
margin-left: 15px;}

aside p {
float: left;
margin-top: 10px;
margin-left: 15px;}
aside picture {
width: 200px;
margin-bottom: 5px;
}

address {
display: block;
text-align: left;
}

}
aside picture
{
padding: 2px;

width: calc(99% - 2px);
overflow:hide;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
aside picture img {
width: calc(100% - 2px);
}
footer {
border-radius: 5px 5px 5px 5px;
text-align: right;
background-color: #333333;
clear: left;
width: 100%;
color: white;
}
@media (max-width: 768px) {
header {
width: 100%;
text-align: center;
}
nav {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}

side
{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
side picture
{
display: flex;
width: calc(100% - 9px);
height: auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
side p {

width: 100%;
height: auto;
}
ul  {
display: flex;
list-style: none;
padding: 0px;
flex-direction: column;
width: 100%;

height: auto;
}
main
{
width: 100%;
height: auto;
padding: 1px;

}

section
{
width: 100%;
display: flex;
height: auto;
flex-direction: column;
}
article
{
width: 100%;
height: auto;
}
article figure
{
width: calc(100% - 30px);
height: auto;
}
article figure img
{
width: 100%;
height: auto;
}
article figure figcaption
{
width: 100%;
height: auto;
}
aside
{
width: 100%;
height: auto;
float: center;
}
aside picture
{
display: flex;
width: calc(100% - 9px);
height: auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
aside address
{
width: 100%;
height: auto;
float: center;
}
footer
{
width: 100%;
height: auto;
}

}
@media (max-width: 480px){
header {
width: 100%;
text-align: center;
}
nav {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}

side
{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
side picture
{
display: flex;
width: calc(100% - 9px);
height: auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
side p {

width: 100%;
height: auto;
}
ul  {
display: flex;
list-style: none;
padding: 0px;
flex-direction: column;
width: 100%;

height: auto;
}
main
{
width: 100%;
height: auto;
padding: 1px;

}

section
{
width: 100%;
display: flex;
height: auto;
flex-direction: column;
}
article
{
width: 100%;
height: auto;
}
article figure
{
width: calc(100% - 30px);
height: auto;
}
article figure img
{
width: 100%;
height: auto;
}
article figure figcaption
{
width: 100%;
height: auto;
}
aside
{
width: 100%;
height: auto;
float: center;
}
aside picture
{
display: flex;
width: calc(100% - 9px);
height: auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
aside address
{
width: 100%;
height: auto;
float: center;
}
footer
{
width: 100%;
height: auto;
}

}