| @media (max-width: 1400px) { | |
| .login { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| background: url("../assets/background.jpg") no-repeat center center; | |
| background-size: cover; | |
| box-sizing: border-box; | |
| } | |
| .starts { | |
| width: 1px; | |
| height: 1px; | |
| background: transparent; | |
| box-shadow: | |
| 145px 234px #fff, | |
| 876px 543px #fff; | |
| animation: animStar 50s linear infinite; | |
| } | |
| .starts2 { | |
| width: 2px; | |
| height: 2px; | |
| box-shadow: | |
| 445px 234px #fff, | |
| 276px 943px #fff; | |
| animation: animStar 100s linear infinite; | |
| } | |
| .starts3 { | |
| width: 3px; | |
| height: 3px; | |
| background: transparent; | |
| box-shadow: | |
| 745px 834px #fff, | |
| 176px 243px #fff; | |
| animation: animStar 150s linear infinite; | |
| } | |
| } | |
| @media (min-width: 1400px) { | |
| .login { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| background: url("../assets/background.jpg") no-repeat center center; | |
| background-size: cover; | |
| box-sizing: border-box; | |
| } | |
| .starts { | |
| width: 1px; | |
| height: 1px; | |
| background: transparent; | |
| box-shadow: | |
| 45vw 34vh #fff, | |
| 76vw 43vh #fff; | |
| animation: animStar 50s linear infinite; | |
| } | |
| .starts2 { | |
| width: 2px; | |
| height: 2px; | |
| box-shadow: | |
| 145vw 134vh #fff, | |
| 76vw 143vh #fff; | |
| animation: animStar 100s linear infinite; | |
| } | |
| .starts3 { | |
| width: 3px; | |
| height: 3px; | |
| background: transparent; | |
| box-shadow: | |
| 45vw 134vh #fff, | |
| 176vw 43vh #fff; | |
| animation: animStar 150s linear infinite; | |
| } | |
| } | |
| @keyframes animStar { | |
| from { | |
| transform: translateY(0px); | |
| } | |
| to { | |
| transform: translateY(-2000px); | |
| } | |
| } | |