86 lines
1.8 KiB
CSS
86 lines
1.8 KiB
CSS
body {
|
|
background: rgb(2, 0, 36);
|
|
background: -moz-linear-gradient(140deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 30%, rgba(0, 111, 131, 1) 100%);
|
|
background: -webkit-linear-gradient(140deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 30%, rgba(0, 111, 131, 1) 100%);
|
|
background: linear-gradient(140deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 30%, rgba(0, 111, 131, 1) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024", endColorstr="#006f83", GradientType=1);
|
|
background-size: 400% 400%;
|
|
animation: gradientBG 15s ease infinite;
|
|
}
|
|
|
|
@keyframes gradientBG {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
#indexTitle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 40%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
z-index: auto;
|
|
}
|
|
|
|
#login {
|
|
position: fixed;
|
|
display: block;
|
|
top: 35px;
|
|
right: 35px;
|
|
z-index: auto;
|
|
}
|
|
|
|
#loginButton {
|
|
text-decoration: none;
|
|
letter-spacing: 2px;
|
|
padding: 12px;
|
|
border: solid white;
|
|
border-radius: 15px;
|
|
transition: all 500ms;
|
|
}
|
|
|
|
#loginButton:hover {
|
|
transition: all 500ms;
|
|
color: #546a7b;
|
|
background-color: #fdfdff;
|
|
box-shadow: 0 0 100px white;
|
|
}
|
|
|
|
/* Very small devices (portrait phone, 575 and down) */
|
|
|
|
@media (max-width: 575px) {
|
|
#title {
|
|
font-size: 3em;
|
|
}
|
|
#subtitle {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
/* Small devices (landscape phones, 576px and up)*/
|
|
|
|
@media (min-width: 576px) {
|
|
#title {
|
|
font-size: 5em;
|
|
}
|
|
#subtitle {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
/* Large devices (desktops, 992px and up)*/
|
|
|
|
@media (min-width: 992px) {
|
|
#title {
|
|
font-size: 7em;
|
|
}
|
|
#subtitle {
|
|
font-size: 2.5em;
|
|
}
|
|
} |