/* Navigation */
nav {
margin: auto;
width: 100%;
max-width: 1200px;
}
ul#navigation, ul#navigation ul {
margin: 0;
padding: 0;
list-style-type: None;
height: 32px;
}
ul#navigation li {
float: Left;
width: 150px;
position: Relative;
}
ul#navigation li a {
display: Block;
width: 149px;
line-height: 30px;
text-align: Center;
color: #FFD700;
text-decoration: None;
background-color: #FFD700;
border: 1px Solid #FFFFFF;
border-bottom: 0;
border-radius: 5px;
transition: background-color 0.5s;
}
ul#navigation li a:hover,
ul#navigation li a:active {
background-color: #FFD700;
cursor: Pointer;
}
ul#navigation li ul {
opacity: 0.0;
visibility: Hidden;
position: Absolute;
left: 0px;
top: 31px;
z-index: 100;
transition: Opacity 1s;
}
ul#navigation li:hover > ul,
ul#navigation li:active > ul {
opacity: 1.0;
visibility: Visible;
}
ul#navigation li ul a {
background-color: rgba(17, 145, 209, 0.50);
}
/* Smartphone Menu */
#burger {
display: None;
}
@media screen and (max-width: 580px) {
ul#navigation li,
ul#navigation li a {
width: 100%;
}
#burger {
display: Block;
margin-right: 25px;
-moz-appearance: None;
-webkit-appearance: None;
width: 25px;
height: 25px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAQAAAAATS5MPAAAAAnRSTlMAAHaTzTgAAAAUSURBVHjaY2DAC/7///8HN0EzvQD48y+tFbUTjAAAAABJRU5ErkJggg==");
background-size: 25px 25px;
background-position: Center Center;
background-color: #0080C0;
vertical-align: Middle;
border: None;
outline: None;
cursor: Pointer;
}
#burger:checked ~ ul#navigation {
animation: fadeIn 1.2s;
display: Block;
margin-top: 5px;
}
#burger:not(:checked) ~ ul#navigation {
display: None;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
}
body {
background: #FFD700;
font-family: Verdana;
font-size: 14px;
color: Black;
}
h1, p {
clear: Left;
}
h1 {
background-color: #FFD700;
padding: 10px;
border-radius: 5px;
font-family: Arial;
font-size: 18px;
color: Black;
}
.parallax {
background-image: url("/bilder/hütte.jpg");
min-height: 90vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
section.parallax {
background-image: url(/bilder/filmset.jpg);
}
@media (prefers-reduced-motion: no-preference) {
.parallax {
/* Create the parallax scrolling effect local/fixed */
background-attachment: fixed;
}
}
section {
min-height: 90vh;
background-color: #FAFAD2;
border: none;
color: #c32e04;
padding: 0 1em;
}
section:last-of-type {
background-color: #FAFAD2;
color: #333;
padding: 1em;
iframe
border: none
}
footer {
background-color: Royalblue;
padding: 10px;
border-radius: 5px;
font-family: Verdana;
font-size: 12px;
color: Black;
}