123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- body {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- color:white;
- font-family: 'Special Elite', cursive;
- background-color: black;
- height: 95vh;
- }
-
- header {
- color: #BF0909;
- font-family: 'Special Elite', cursive;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- flex: 1;
- }
- h1 {
- font-size: 4vw;
- }
-
- header a {
- text-decoration: none;
- color: #494949;
- }
-
- header a:hover {
- color: white;
- }
-
- #main {
- display: flex;
- flex: 4;
- }
-
- #content {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- width: 50vw;
- }
-
- #text {
- font-family: 'Special Elite', cursive;
- font-size: 1.8vw;
- text-align: center;
- color: white;
- }
-
- .textWillAppear {
- opacity: 0;
- }
-
- @keyframes fade {
- 100% {opacity: 1;}
- }
-
- #arrowBlock{
- display: flex;
- justify-content: flex-end;
- height: 2vh;
- width: 45vw;
- }
-
- #space{
- font-size: 1vw;
- font-family: 'Special Elite', cursive;
- padding-right: 1vw;
- }
-
- #arrow{
- height: 2vh;
- animation: bounce 1s forwards;
- animation-iteration-count:infinite;
- }
-
- @keyframes bounce {
- 50% {transform: translate(0, -1em);}
- }
-
- @keyframes fade-reverse {
- 0% {opacity :1}
- 100% {opacity:0}
- }
-
- #buttons {
- opacity: 0;
- display: flex;
- justify-content: space-around;
- }
-
- .button {
- outline: none;
- border:0.2vw solid #b9b9b9;
- border-radius: 4vw;
- min-width: 15vw;
- width: 20vw;
- padding: 1vw 1.2vw 1vw 1.2vw;
- color: black;
- font-family: 'Special Elite', cursive;
- font-size: 0.8vw;
- background-image: linear-gradient(to top, black -50%, #BF0909 80%);
- cursor : pointer;
- }
-
- .button:hover {
- border: 0.2vw solid white;
- box-shadow: 0 0 3vw #B0C4DE;
- }
-
- .button:active {
- background-image: linear-gradient(to top, #BF0909 20%, black 150%);
- }
-
- footer{
- flex:0.5;
- display:flex;
- flex-direction: column;
- justify-content:flex-end;
- align-items: center;
- font-size:1vw;
- margin-top:2vw;
- }
-
- #names{
- margin : 0;
- }
|