437 lines
7.7 KiB
CSS
437 lines
7.7 KiB
CSS
/* SCHRIFTARTEN */
|
|
|
|
@font-face { font-family: "League Spartan"; src: url("resources/LeagueSpartan.ttf");}
|
|
@font-face { font-family: "League Spartan Black"; src: url("resources/LeagueSpartan-Black.ttf");}
|
|
|
|
|
|
|
|
/* BODY + NAVBAR */
|
|
|
|
body
|
|
{
|
|
background-color: #FFE49F;
|
|
background-image: url("resources/noise-texture.svg");
|
|
color: #E07A31;
|
|
font-family: "League Spartan";
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.navbar {
|
|
text-align: center;
|
|
width: 40vw;
|
|
background-color: #E07A31;
|
|
z-index: 55;
|
|
border-radius: 2cqmin;
|
|
opacity: 90%;
|
|
height: 3vw;
|
|
}
|
|
|
|
#navbar-top {
|
|
justify-content: center;
|
|
display: flex;
|
|
margin-top: 2vh;
|
|
animation: float-in 0.3s ease-out;
|
|
position: relative;
|
|
z-index: 110;
|
|
}
|
|
|
|
#navbar-bottom {
|
|
justify-content: center;
|
|
display: flex;
|
|
margin-bottom: 2.5vh;
|
|
}
|
|
|
|
ul {
|
|
vertical-align: middle;
|
|
list-style-type: none;
|
|
margin: 0.6vh;
|
|
margin-bottom: 0.3vh;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
padding-right: 2vw;
|
|
padding-left: 2vw;
|
|
}
|
|
|
|
li {
|
|
float: left;
|
|
color: #FFE49F;
|
|
text-align: center;
|
|
padding: 0.6vw;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
font-size: 1.6vw;
|
|
}
|
|
|
|
li a {
|
|
color: #FFE49F;
|
|
text-decoration: none;
|
|
}
|
|
|
|
li.link:hover {
|
|
transform: scale(107%);
|
|
}
|
|
|
|
|
|
|
|
/* INHALT ALLGEMEIN */
|
|
|
|
p {
|
|
position: relative;
|
|
font-size: 0.8vw;
|
|
text-align: right;
|
|
z-index: 60;
|
|
}
|
|
|
|
h1 em {
|
|
font-style: normal;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: bold;
|
|
font-size: 8vw;
|
|
position: relative;
|
|
text-align: justify;
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.start {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
height: 100vh;
|
|
}
|
|
|
|
.text-rechts {
|
|
width: 46vw;
|
|
margin-right: 5vw;
|
|
}
|
|
|
|
.text-mittig {
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
}
|
|
|
|
.text-mittig h3 {
|
|
font-size: 8vw;
|
|
font-weight: bold;
|
|
position: relative;
|
|
text-align: justify;
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.title
|
|
{
|
|
font-family: "League Spartan Black";
|
|
font-size: 10vw;
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 60%;
|
|
height: 100%;
|
|
z-index: 100;
|
|
position: relative;
|
|
flex-direction: column;
|
|
opacity: 90%;
|
|
animation: raise 0.5s ease-in;
|
|
}
|
|
|
|
.title h2{
|
|
font-size: 7.5vw;
|
|
text-align: right;
|
|
text-align-last: right;
|
|
padding: 0 10vw 0 0;
|
|
margin: 0;
|
|
font-family: "League Spartan";
|
|
}
|
|
|
|
.title h3{
|
|
font-size: 6.6vw;
|
|
text-align: right;
|
|
text-align-last: right;
|
|
padding-right: 7vw;
|
|
font-family: "League Spartan";
|
|
}
|
|
|
|
.title em {
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-text-stroke: 0.3vw #E07A31;
|
|
}
|
|
|
|
.title p {
|
|
font-size: 3.5vw;
|
|
font-family: "League Spartan";
|
|
font-style: normal;
|
|
padding-right: 10vw;
|
|
}
|
|
|
|
#eins {
|
|
display: flex;
|
|
justify-content: right;
|
|
height: 100vh;
|
|
}
|
|
|
|
#eins h2 {
|
|
display: flex;
|
|
line-height: 0.3;
|
|
}
|
|
|
|
#zwei {
|
|
width: 100%;
|
|
z-index: 10;
|
|
height: 120vh;
|
|
}
|
|
|
|
#zwei h2 {
|
|
font-size: 10vw;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
|
|
|
|
/* ABOUT */
|
|
.laut {
|
|
font-family: sans-serif !important;
|
|
font-size: 6vw !important;
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
|
|
/* TRY NOW */
|
|
|
|
form {
|
|
background-color: transparent;
|
|
border-style: dotted;
|
|
border-color: #E07A31;
|
|
border-width: 1vh;
|
|
border-radius: 1.5vw;
|
|
color: #E07A31;
|
|
padding: 2vw;
|
|
text-decoration: none;
|
|
font-family: "League Spartan Black";
|
|
font-size: 3vw;
|
|
text-align: center;
|
|
height: 9vw;
|
|
}
|
|
|
|
form label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
color: #e07a319c;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
hr {
|
|
color: #E07A31;
|
|
border-style: dotted none none none;
|
|
border-width: 1vh;
|
|
}
|
|
|
|
.button-rechts {
|
|
height: 100vh;
|
|
position: relative;
|
|
top: 25vh;
|
|
width: 46%;
|
|
margin-right: 5vw;
|
|
display: block;
|
|
}
|
|
|
|
.sel {
|
|
color:#fff0cb
|
|
}
|
|
|
|
#fileselect {
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
|
|
/* BLOBS */
|
|
|
|
.blob {
|
|
border-radius: 7.5vw;
|
|
filter: blur(1.6vw);
|
|
width: 15vw;
|
|
height: 15vw;
|
|
top: 25vh;
|
|
scale: 1.4;
|
|
}
|
|
|
|
#blobs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: -2;
|
|
height: 100%;
|
|
width: 40%;
|
|
position: relative;
|
|
}
|
|
|
|
#blue {
|
|
background-color: #50eff4;
|
|
position: relative;
|
|
right: 22vh;
|
|
top: 10vh;
|
|
z-index: 0;
|
|
animation: idle-blue 8s 0.4s infinite;
|
|
}
|
|
|
|
#green {
|
|
background-color: #86ec4f;
|
|
position: relative;
|
|
top: -22vh;
|
|
right: 15vh;
|
|
z-index: 2;
|
|
animation: idle-green 5s 0.3s infinite;
|
|
}
|
|
|
|
#red {
|
|
background-color: #f04bc1;
|
|
position: relative;
|
|
left: 6vh;
|
|
top: -4.5vh;
|
|
z-index: 1;
|
|
animation: idle-red 7s 0.3s infinite;
|
|
}
|
|
|
|
|
|
|
|
/* ANIMATIONEN 𑁋 ERSCHEINEN */
|
|
|
|
@keyframes raise {
|
|
0% {z-index: 0; opacity: 0%;}
|
|
70% {opacity: 50%;}
|
|
100% {z-index: 100; opacity: 90%;}
|
|
}
|
|
|
|
@keyframes appear {
|
|
0% {transform: scale(0); opacity: 0%}
|
|
60% {transform: scale(0.8)}
|
|
80% {transform: scale(1.1); opacity: 100%}
|
|
100% {transform: scale(1)}
|
|
}
|
|
|
|
@keyframes float-in {
|
|
0% {transform: translateY(-15vh); opacity: 0%}
|
|
100% {transform: translateY(0vh); opacity: 90%;}
|
|
}
|
|
|
|
|
|
|
|
/* ANIMATIONEN 𑁋 TRY NOW */
|
|
|
|
@keyframes text-in-out {
|
|
0% {color: inherit}
|
|
40% {color: transparent}
|
|
60% {color: transparent}
|
|
100% {color: inherit}
|
|
}
|
|
|
|
@keyframes border-in-out {
|
|
0% {border-radius: 1.5vw}
|
|
10%{border-radius: 1.5vw}
|
|
40% {border-radius: 6vw}
|
|
60% {border-radius: 6vw}
|
|
90%{border-radius: 1.5vw}
|
|
100% {border-radius: 1.5vw}
|
|
}
|
|
|
|
@keyframes border-out {
|
|
0% {opacity: 1;}
|
|
40% {opacity: 0;}
|
|
100% {opacity: 0;}
|
|
}
|
|
|
|
|
|
|
|
/* ANIMATIONEN 𑁋 BLOBS */
|
|
|
|
@keyframes idle-blue {
|
|
0% {transform: scale(1); z-index: 0;}
|
|
20% {transform: scale(1.4); z-index: 1;}
|
|
40% {transform: scale(1.1); z-index: 0; transform: translateY(2vw);}
|
|
60% {transform: scale(0.8); transform: translateX(2.5vw)}
|
|
80% {transform: scale(0.9);}
|
|
95% {transform: scale(1); transform: translateY(-2vw); transform: translateX(-2.5vw);}
|
|
}
|
|
|
|
@keyframes idle-green {
|
|
0% {transform: scale(1); }
|
|
20% {transform: scale(0.8); }
|
|
40% {transform: scale(1.1); transform: translateY(3.5vw);}
|
|
60% {transform: scale(0.9); transform: translateX(-1vw)}
|
|
80% {transform: scale(1.3); }
|
|
95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
|
|
}
|
|
|
|
@keyframes idle-red {
|
|
0% {transform: scale(1); ;}
|
|
20% {transform: scale(1.3); z-index: 3;}
|
|
40% {transform: scale(1.2); z-index: 2; transform: translateY(-3vw);}
|
|
60% {transform: scale(0.7); z-index: 0; transform: translateX(-2vw)}
|
|
80% {transform: scale(0.9); z-index: 0;}
|
|
95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
|
|
}
|
|
|
|
@keyframes move-down-1 {
|
|
0% {top: 0; right: 0}
|
|
100% {top: 0; right: 52vw}
|
|
}
|
|
|
|
@keyframes green-move-down-1 {
|
|
0% {top: 0; right: 0 }
|
|
50% {right: 21vw}
|
|
90% {top: 75vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
|
|
100% {top: 100vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
|
|
}
|
|
|
|
@keyframes red-move-down-1 {
|
|
0% {top: 0;}
|
|
90% {top: 85vh; opacity: 100%; transform: scale(1);}
|
|
100% {top: 100vh; opacity: 10%; transform: scale(0.2);}
|
|
}
|
|
|
|
@keyframes blue-move-down-1 {
|
|
0% {top: 0; right: 0 }
|
|
40% {right: 21vw}
|
|
75% {right: 17vw}
|
|
90% {opacity: 100%; transform: scale(1);}
|
|
100% {top: 110vh; right: 0; opacity: 10%; transform: scale(0.2);}
|
|
}
|
|
|
|
@keyframes move-down-2 {
|
|
0% {top: 0; right: 52vw}
|
|
100% {top: 0; right: 31vw}
|
|
}
|
|
|
|
@keyframes green-move-down-2 {
|
|
0% {top: 100vh; right: 0 }
|
|
50% {right: 21vw}
|
|
90% {top: 175vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
|
|
100% {top: 205vh; right: 0; opacity: 10%; transform: scale(0.2);}
|
|
}
|
|
|
|
@keyframes red-move-down-2 {
|
|
0% {top: 100vh;}
|
|
90% {top: 185vh; opacity: 100%; transform: scale(1);}
|
|
100% {top: 205vw; opacity: 10%; transform: scale(0.2);}
|
|
}
|
|
|
|
@keyframes blue-move-down-2 {
|
|
0% {top: 110vh; right: 10.4vw }
|
|
40% {right: 26vw}
|
|
75% {right: 21vw}
|
|
90% {opacity: 100%; transform: scale(1);}
|
|
100% {top: 215vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
|
|
}
|
|
|