nav {
margin: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:active {
color: white;
}
a:hover {
color: white;
}
p {
text-align: center;
}
div {
text-align: center;
}
flex-container {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
@keyframes menuc {
0% {background-color: rgba(0,0,0);}
15% {background-color: rgba(0,0,0);}
30% {background-color: rgba(0,0,0,0.9);}
45% {background-color: rgba(0,0,0,0.8);}
60% {background-color: rgba(0,0,0,0.7);}
75% {background-color: rgba(0,0,0,0.6);}
90% {background-color: rgba(0,0,0,0.5); color: white;}
100% {background-color: rgba(255,215,0); color: black;}
}
@keyframes wallp {
0% {background-color: #000080;}
25% {background-color: #4169E1;}
50% {background-color: #000080;}
75% {background-color: #4169E1;}
100% {background-color: #000080;}
}
@keyframes bbl {
from {border: none; border-left: 3px solid black; border-bottom: 3px solid black;} to {border: none; border-left: 3px solid white; border-bottom: 3px solid white;}
}
@keyframes bbm {
from {border: none; border-bottom: 3px solid black;} to {border: none; border-bottom: 3px solid white;}
}
@keyframes bbr {
from {border: none; border-right: 3px solid black; border-bottom: 3px solid black;} to {border: none; border-right: 3px solid white; border-bottom: 3px solid white;}
}
@keyframes fb {
from {border: none; border-top: 3px solid black;} to {border: none; border-top: 3px solid white;}
}
body {
margin: 0;
color: white;
background-image: url(bilder/V.png);
background-color: #4169E1;
background-position: 50% 50%;
background-attachment: fixed;
background-repeat: no-repeat;
animation-name: wallp;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.fuss {
color: black;
background-color: rgba(255,215,0);
border: none;
border-top: 3px solid white;
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 999;
animation-name: menuc, fb;
animation-duration: 4s, 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.buttonl {
color: black;
background-color: rgba(255,215,0);
border: none;
border-left: 3px solid white;
border-bottom: 3px solid white;
border-bottom-left-radius: 3px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
animation-name: menuc, bbl;
animation-duration: 4s, 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.buttonl:hover {
color: white;
background-color: rgba(255,0,0);
border: none;
border-left: 3px solid white;
border-bottom: 3px solid white;
border-bottom-left-radius: 3px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
animation-name: menuc, bbl;
animation-duration: 4s, 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.buttonm {
color: black;
background-color: rgba(255,215,0);
border: none;
border-bottom: 3px solid white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
animation-name: menuc, bbm;
animation-duration: 4s, 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.buttonm:hover {
color: white;
background-color: rgba(255,0,0);
border: none;
border-bottom: 3px solid white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
animation-name: menuc, bbm;
animation-duration: 4s, 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.buttonr {
color: black;
background-color: rgba(255,215,0);
border: none;
border-right: 3px solid white;
border-bottom: 3px solid white;
border-bottom-right-radius: 3px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
animation-name: menuc, bbr;
animation-duration: 4s, 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.buttonr:hover {
color: white;
background-color: rgba(255,0,0);
border: none;
border-right: 3px solid white;
border-bottom: 3px solid white;
border-bottom-right-radius: 3px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
animation-name: menuc, bbr;
animation-duration: 4s, 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.alshop {
color: black;
background-color: rgba(255,215,0);
border: none;
border-right: 3px solid white;
border-bottom: 3px solid white;
border-bottom-right-radius: 3px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
animation-name: menuc, bbr;
animation-duration: 4s, 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
.alshop:hover {
color: white;
background-color: rgba(255,0,0);
border: none;
border-right: 3px solid white;
border-bottom: 3px solid white;
border-bottom-right-radius: 3px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
animation-name: menuc, bbr;
animation-duration: 4s, 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
}