Polaris/static/assets/css/main.css

@import url('https://site-assets.fontawesome.com/releases/v6.2.0/css/all.css');
@import url('/assets/css/fonts.css');
@import url('/assets/css/themes.css');
@import url('/assets/css/nav.css');
@import url('/assets/css/sidebar.css');
@import url('/assets/css/dropdown.css');

* {
    font-family: 'Lato';
    user-select: none;
    scroll-behavior: smooth;
}

html,
body {
    margin: 0vh;
    background: var(--background-color);
    background-attachment: fixed;
    color: var(--text);
    text-align: center;
}

html {
    min-height: 100%;
}

body::-webkit-scrollbar-track {
    background: var(--solid);
    margin: 0;
}

body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border: 0.5vh solid var(--solid);
    background-clip: content-box;
    border-radius: 1vh;
}

body::-webkit-scrollbar-corner {
    background: #000;
}

::-webkit-scrollbar {
    width: 1.8vh;
}

::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 1vh;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border: 0.5vh solid transparent;
    background-clip: content-box;
    border-radius: 1vh;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.hidden {
    display: none;
}

i {
    margin: 1vh;
}

a {
    color: var(--text);
    text-decoration: none;
}

h1 {
    text-align: center;
    font-size: 8vh;
}

p{
  font-size: 4vh;
}

hr {
  border: 0;
  height: 0.3vh;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}


.welcome{
  padding-bottom: 0px;
}

.small{
  font-size: 3vh;
}

.settings-input {
    text-align: center;
    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
    border: none;
    border-radius: 2vh;
    cursor: pointer;
    background: var(--sidebar-bg);
    width: 25vh;
    height: 4vh;
    color: var(--text);
    transition: 0.4s;
    margin: auto;
    margin-top: 2vh;
}

.proxyinput {
    text-align: center;
    font-size: 2vh;
    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
    border: none;
    border-radius: 2vh;
    cursor: pointer;
    background: var(--sidebar-bg);
    width: 35vh;
    height: 4vh;
    color: var(--text);
    transition: 0.4s;
    margin: auto;
    margin-top: 2vh;
}

.proxycontainer {
    background-color: var(--background-color);
    width: 40vh;
    margin: auto;
    margin-top: 10vh;
    padding-top: 1vh;
    padding-bottom: 2vh;
    padding-left: 1.5vh;
    padding-right: 1.5vh;
    border-radius: 2vh;
    color: var(--text);
}

button {
    text-align: center;
    border: none;
    border-radius: 1vh;
    cursor: pointer;
    background-color: var(--button-bg);
    height: 4vh;
    color: var(--text);
    transition: 0.4s;
    font-size: 2.5vh;
    font-family: 'Lato';
}

.mainpageimage-button {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    justify-content: center;
    width: 45vh;
    margin-top: 10vh;
    transition: all 0.4s ease;
}

.mainpageimage-button:hover {
    transform: scale(1.025);
    opacity: 1;
}

.mainpage-text {
  box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
  background-color: var(--background-color);
  margin-right: 10vh;
  width: 75vh;
  height: 52vh;
  color: var(--text);
  text-align: center;
  border-radius: 2vh;
  opacity: 0.9;
  padding: 2vh;
  line-height: 2vh;
}

.mainpage-text > h1{
  padding: 2vh;
  margin: 0px;
}

.mainpage-text > p{
  padding: 3vh;
  margin: 0px;
}

.blue{
  color: #2d81ff;
  display: inline-block;
  text-shadow: 0vh 0vh 1.5vh rgb(45, 129, 255);
}

.chromebook-btn-div {
    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
    background-color: var(--background-color);
    width: 30vh;
    height: 4.3vh;
    color: var(--text);
    text-align: center;
    border-radius: 2vh;
    justify-content: center;
    padding: 0.5vh;
    margin: 0 auto;
    margin-top: 3vh;
    position: relative;
    opacity: 0.9;
    padding: 2vh;
    line-height: 2vh;
}

.settings-button {
    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
}

select {
    text-align: center;
    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
    border: none;
    border-radius: 1vh;
    cursor: pointer;
    background-color: var(--button-bg);
    min-width: 7vh;
    height: 4vh;
    color: var(--text);
    transition: 0.4s;
    margin-left: 1vh;
    margin-right: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
    margin-top: 2vh;
}

button:hover {
    opacity: 0.8;
}

.switch {
    position: relative;
    display: inline-block;
    width: 6vh;
    height: 3.4vh;
    margin-top: 2vh;
    cursor: pointer;
}

.switch input {
    opacity: 0;
    width: 6vh;
    height: 3.4vh;
    position: relative;
    z-index: 500;
    bottom: 2vh;
    cursor: pointer;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 1vh;
    box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
    background-color: var(--switch-color);
}

.switch>label {
    position: relative;
    right: 6vh;
    font-size: 1.17em;
    top: 0.5vh;
}

.slider:before {
    position: absolute;
    content: '';
    height: 2.6vh;
    width: 2.6vh;
    left: 0.4vh;
    bottom: 0.4vh;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 1vh;
}

input:checked+.slider {
    background-color: var(--switch-active);
}

input:focus+.slider {
    box-shadow: 0 0 0.1vh var(--switch-color);
}

input:checked+.slider:before {
    -webkit-transform: translateX(2.6vh);
    -ms-transform: translateX(2.6vh);
    transform: translateX(2.6vh);
}

.games {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 3vh;
}

.popular-games {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 3vh;
}

.game {
    min-width: 20vh;
    min-height: 20vh;
    display: block;
    border: none;
    cursor: pointer;
    transition: .4s;
    overflow: hidden;
    position: relative;
    box-shadow: 0vh 0.75vh 1.5vh 0vh black;
    margin: 1vh;
    text-align: left;
    border-radius: 1.5vh;
}

.game:hover {
    filter: brightness(95%);
    transform: translateY(-0.2vh);
    border-color: #ffffff;
}

.game>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    object-position: center;
}

.game:after {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.game>h3 {
    position: absolute;
    bottom: -0.5vh;
    left: 2vh;
    color: #fff;
    font-size: 1.8vh;
    z-index: 10;
}

.apps {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 3vh;
}

.app {
    min-width: 20vh;
    min-height: 20vh;
    display: block;
    border: none;
    cursor: pointer;
    transition: .4s;
    overflow: hidden;
    position: relative;
    box-shadow: 0vh 0.75vh 1.5vh 0vh black;
    margin: 1vh;
    border-radius: 1.5vh;
}

.app:hover {
    filter: brightness(95%);
    transform: translateY(-0.2vh);
    border-color: #ffffff;
}

.app>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    object-position: center;
}

.app:after {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.app>h3 {
    position: absolute;
    bottom: -0.5vh;
    left: 2vh;
    color: #fff;
    font-size: 1.8vh;
    z-index: 10;
}

.app>span {
    position: absolute;
    bottom: 2vh;
    left: 2vh;
    color: #fff;
    z-index: 10;
    font-size: 1.5vh;
}

.notifications {
    top: 1%;
    width: 20%;
    position: fixed;
    z-index: 99999999999999999;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .5s;
    height: 2%;
}

.notifications>.notification {
    padding: 1.5vh;
    border-radius: 2vh;
    margin-top: 1vh;
    transition: .5s;
    cursor: pointer;
    background: var(--solid);
}

;

.notifications>.notification.error {
    background: rgba(171, 61, 222, 0.801);
    color: #fff;
    transition: .5s;
    inline-size: 100%;
    overflow-wrap: break-word;
}

.box {
    background: var(--sidebar-bg);
    padding: 5vh;
    border-radius: 1vh;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0vh 0.5vh 1vh 0vh var(--shadow-color);
}

.framei {
    border-radius: 2vh;
    box-shadow: 0vh 0.75vh 1.5vh 0vh var(--shadow-color);
    border-width: 3vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mainiframe {
    position: relative;
}

.center-content {
    text-align: center;
    justify-content: center;
    margin-top: 5vh;
}

.frame {
    margin: auto;
    display: block;
    border-top: 3vh solid;
    border-left: 3vh solid;
    border-right: 3vh solid;
    border-radius: 4vh 4vh 0vh 0vh;
    background: #fff;
    height: 70vh;
    width: 75vw;
    outline: none;
    border-color: rgba(0, 0, 0);
}

.gamebar img {
    width: 3.5vh;
    height: 3.5vh;
    margin: 1vh;
    border-radius: 0.5vh;
}

.gamebar p {
    font-weight: 900;
    font-size: 2vh;
    margin: auto 0;
}

.gamebar i {
    font-size: 3vh;
    margin: auto 0;
    margin-left: auto;
    cursor: pointer;
}

.gamebar {
    width: 75vw;
    margin: 0 auto;
    border-left: 3vh solid black;
    border-right: 3vh solid black;
    display: flex;
    border-radius: 0vh 0vh 4vh 4vh;
    color: #ffffff;
    border-color: rgba(0, 0, 0);
    background: rgba(0, 0, 0);
}

.featuredcontainer {
  background-color: var(--background-color);
  box-shadow: 0.5vh 0.5vh 1vh 0vh var(--shadow-color);
  width: 80vh;
  height: 52vh;
  margin-left: 10vh;
  padding-top: 2vh;
  padding-bottom: 2vh;
  padding-left: 2vh;
  padding-right: 2vh;
  border-radius: 2vh;
  color: var(--text);
}

.featuredimg {
  width: calc(100% - 2vh);
  cursor: pointer;
  border-radius: 2vh;
  border-color: rgba(0, 0, 0, 0);
  transition: border-color 0.4s linear;
}


.featuredimg:hover {
    border-color: rgba(255, 255, 255, 1);
}

.featuredtopbar {
    padding-bottom: 2vh;
}

.snow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}
.snow:nth-child(1) {
  opacity: 0.4111;
  transform: translate(86.3907vw, -10px) scale(0.5822);
  animation: fall-1 17s -20s linear infinite;
}
@keyframes fall-1 {
  48.631% {
    transform: translate(89.3265vw, 48.631vh) scale(0.5822);
  }
  to {
    transform: translate(87.8586vw, 100vh) scale(0.5822);
  }
}
.snow:nth-child(2) {
  opacity: 0.891;
  transform: translate(48.3999vw, -10px) scale(0.3869);
  animation: fall-2 11s -22s linear infinite;
}
@keyframes fall-2 {
  79.379% {
    transform: translate(51.3082vw, 79.379vh) scale(0.3869);
  }
  to {
    transform: translate(49.85405vw, 100vh) scale(0.3869);
  }
}
.snow:nth-child(3) {
  opacity: 0.6292;
  transform: translate(30.9334vw, -10px) scale(0.4441);
  animation: fall-3 23s -16s linear infinite;
}
@keyframes fall-3 {
  49.417% {
    transform: translate(28.1971vw, 49.417vh) scale(0.4441);
  }
  to {
    transform: translate(29.56525vw, 100vh) scale(0.4441);
  }
}
.snow:nth-child(4) {
  opacity: 0.4549;
  transform: translate(80.0816vw, -10px) scale(0.5257);
  animation: fall-4 16s -5s linear infinite;
}
@keyframes fall-4 {
  57.214% {
    transform: translate(86.71vw, 57.214vh) scale(0.5257);
  }
  to {
    transform: translate(83.3958vw, 100vh) scale(0.5257);
  }
}
.snow:nth-child(5) {
  opacity: 0.3155;
  transform: translate(24.6719vw, -10px) scale(0.8585);
  animation: fall-5 25s -19s linear infinite;
}
@keyframes fall-5 {
  42.762% {
    transform: translate(21.0514vw, 42.762vh) scale(0.8585);
  }
  to {
    transform: translate(22.86165vw, 100vh) scale(0.8585);
  }
}
.snow:nth-child(6) {
  opacity: 0.4281;
  transform: translate(50.9854vw, -10px) scale(0.5276);
  animation: fall-6 15s -22s linear infinite;
}
@keyframes fall-6 {
  36.756% {
    transform: translate(42.8797vw, 36.756vh) scale(0.5276);
  }
  to {
    transform: translate(46.93255vw, 100vh) scale(0.5276);
  }
}
.snow:nth-child(7) {
  opacity: 0.1138;
  transform: translate(41.2556vw, -10px) scale(0.5399);
  animation: fall-7 23s -16s linear infinite;
}
@keyframes fall-7 {
  50.295% {
    transform: translate(35.3866vw, 50.295vh) scale(0.5399);
  }
  to {
    transform: translate(38.3211vw, 100vh) scale(0.5399);
  }
}
.snow:nth-child(8) {
  opacity: 0.7204;
  transform: translate(93.4786vw, -10px) scale(0.6546);
  animation: fall-8 18s -6s linear infinite;
}
@keyframes fall-8 {
  43.697% {
    transform: translate(84.6302vw, 43.697vh) scale(0.6546);
  }
  to {
    transform: translate(89.0544vw, 100vh) scale(0.6546);
  }
}
.snow:nth-child(9) {
  opacity: 0.3256;
  transform: translate(29.6981vw, -10px) scale(0.0502);
  animation: fall-9 26s -19s linear infinite;
}
@keyframes fall-9 {
  77.48% {
    transform: translate(30.2454vw, 77.48vh) scale(0.0502);
  }
  to {
    transform: translate(29.97175vw, 100vh) scale(0.0502);
  }
}
.snow:nth-child(10) {
  opacity: 0.6888;
  transform: translate(69.9271vw, -10px) scale(0.6751);
  animation: fall-10 22s -14s linear infinite;
}
@keyframes fall-10 {
  56.39% {
    transform: translate(73.3575vw, 56.39vh) scale(0.6751);
  }
  to {
    transform: translate(71.6423vw, 100vh) scale(0.6751);
  }
}
.snow:nth-child(11) {
  opacity: 0.4634;
  transform: translate(23.7694vw, -10px) scale(0.6359);
  animation: fall-11 10s -21s linear infinite;
}
@keyframes fall-11 {
  42.604% {
    transform: translate(25.5803vw, 42.604vh) scale(0.6359);
  }
  to {
    transform: translate(24.67485vw, 100vh) scale(0.6359);
  }
}
.snow:nth-child(12) {
  opacity: 0.6077;
  transform: translate(27.9743vw, -10px) scale(0.4779);
  animation: fall-12 21s -25s linear infinite;
}
@keyframes fall-12 {
  34.806% {
    transform: translate(35.0838vw, 34.806vh) scale(0.4779);
  }
  to {
    transform: translate(31.52905vw, 100vh) scale(0.4779);
  }
}
.snow:nth-child(13) {
  opacity: 0.2864;
  transform: translate(56.0715vw, -10px) scale(0.7881);
  animation: fall-13 30s -26s linear infinite;
}
@keyframes fall-13 {
  30.288% {
    transform: translate(47.6438vw, 30.288vh) scale(0.7881);
  }
  to {
    transform: translate(51.85765vw, 100vh) scale(0.7881);
  }
}
.snow:nth-child(14) {
  opacity: 0.2675;
  transform: translate(18.8584vw, -10px) scale(0.1664);
  animation: fall-14 12s -17s linear infinite;
}
@keyframes fall-14 {
  65.7% {
    transform: translate(13.5617vw, 65.7vh) scale(0.1664);
  }
  to {
    transform: translate(16.21005vw, 100vh) scale(0.1664);
  }
}
.snow:nth-child(15) {
  opacity: 0.5223;
  transform: translate(51.325vw, -10px) scale(0.9008);
  animation: fall-15 10s -1s linear infinite;
}
@keyframes fall-15 {
  62.437% {
    transform: translate(49.5775vw, 62.437vh) scale(0.9008);
  }
  to {
    transform: translate(50.45125vw, 100vh) scale(0.9008);
  }
}
.snow:nth-child(16) {
  opacity: 0.2751;
  transform: translate(89.597vw, -10px) scale(0.8374);
  animation: fall-16 14s -24s linear infinite;
}
@keyframes fall-16 {
  30.12% {
    transform: translate(89.272vw, 30.12vh) scale(0.8374);
  }
  to {
    transform: translate(89.4345vw, 100vh) scale(0.8374);
  }
}
.snow:nth-child(17) {
  opacity: 0.8662;
  transform: translate(81.1786vw, -10px) scale(0.4392);
  animation: fall-17 19s -29s linear infinite;
}
@keyframes fall-17 {
  47.147% {
    transform: translate(87.0307vw, 47.147vh) scale(0.4392);
  }
  to {
    transform: translate(84.10465vw, 100vh) scale(0.4392);
  }
}
.snow:nth-child(18) {
  opacity: 0.9558;
  transform: translate(70.097vw, -10px) scale(0.4093);
  animation: fall-18 23s -25s linear infinite;
}
@keyframes fall-18 {
  55.573% {
    transform: translate(77.5242vw, 55.573vh) scale(0.4093);
  }
  to {
    transform: translate(73.8106vw, 100vh) scale(0.4093);
  }
}
.snow:nth-child(19) {
  opacity: 0.444;
  transform: translate(86.4696vw, -10px) scale(0.9546);
  animation: fall-19 13s -10s linear infinite;
}
@keyframes fall-19 {
  58.932% {
    transform: translate(95.3761vw, 58.932vh) scale(0.9546);
  }
  to {
    transform: translate(90.92285vw, 100vh) scale(0.9546);
  }
}
.snow:nth-child(20) {
  opacity: 0.9617;
  transform: translate(58.9045vw, -10px) scale(0.6658);
  animation: fall-20 16s -29s linear infinite;
}
@keyframes fall-20 {
  33.626% {
    transform: translate(62.6302vw, 33.626vh) scale(0.6658);
  }
  to {
    transform: translate(60.76735vw, 100vh) scale(0.6658);
  }
}
.snow:nth-child(21) {
  opacity: 0.9459;
  transform: translate(64.4189vw, -10px) scale(0.5679);
  animation: fall-21 19s -3s linear infinite;
}
@keyframes fall-21 {
  58.591% {
    transform: translate(66.9514vw, 58.591vh) scale(0.5679);
  }
  to {
    transform: translate(65.68515vw, 100vh) scale(0.5679);
  }
}
.snow:nth-child(22) {
  opacity: 0.5208;
  transform: translate(23.8883vw, -10px) scale(0.8995);
  animation: fall-22 25s -19s linear infinite;
}
@keyframes fall-22 {
  42.276% {
    transform: translate(23.875vw, 42.276vh) scale(0.8995);
  }
  to {
    transform: translate(23.88165vw, 100vh) scale(0.8995);
  }
}
.snow:nth-child(23) {
  opacity: 0.8881;
  transform: translate(76.2299vw, -10px) scale(0.2034);
  animation: fall-23 16s -24s linear infinite;
}
@keyframes fall-23 {
  71.777% {
    transform: translate(68.098vw, 71.777vh) scale(0.2034);
  }
  to {
    transform: translate(72.16395vw, 100vh) scale(0.2034);
  }
}
.snow:nth-child(24) {
  opacity: 0.2935;
  transform: translate(40.3334vw, -10px) scale(0.851);
  animation: fall-24 20s -8s linear infinite;
}
@keyframes fall-24 {
  56.397% {
    transform: translate(41.8554vw, 56.397vh) scale(0.851);
  }
  to {
    transform: translate(41.0944vw, 100vh) scale(0.851);
  }
}
.snow:nth-child(25) {
  opacity: 0.1059;
  transform: translate(78.0426vw, -10px) scale(0.8924);
  animation: fall-25 13s -5s linear infinite;
}
@keyframes fall-25 {
  59.621% {
    transform: translate(74.0521vw, 59.621vh) scale(0.8924);
  }
  to {
    transform: translate(76.04735vw, 100vh) scale(0.8924);
  }
}
.snow:nth-child(26) {
  opacity: 0.363;
  transform: translate(85.9822vw, -10px) scale(0.3935);
  animation: fall-26 19s -18s linear infinite;
}
@keyframes fall-26 {
  57.041% {
    transform: translate(95.293vw, 57.041vh) scale(0.3935);
  }
  to {
    transform: translate(90.6376vw, 100vh) scale(0.3935);
  }
}
.snow:nth-child(27) {
  opacity: 0.1786;
  transform: translate(65.0764vw, -10px) scale(0.1764);
  animation: fall-27 24s -4s linear infinite;
}
@keyframes fall-27 {
  70.555% {
    transform: translate(55.1714vw, 70.555vh) scale(0.1764);
  }
  to {
    transform: translate(60.1239vw, 100vh) scale(0.1764);
  }
}
.snow:nth-child(28) {
  opacity: 0.1912;
  transform: translate(27.8474vw, -10px) scale(0.2476);
  animation: fall-28 20s -27s linear infinite;
}
@keyframes fall-28 {
  38.243% {
    transform: translate(24.0141vw, 38.243vh) scale(0.2476);
  }
  to {
    transform: translate(25.93075vw, 100vh) scale(0.2476);
  }
}
.snow:nth-child(29) {
  opacity: 0.4662;
  transform: translate(97.8043vw, -10px) scale(0.6502);
  animation: fall-29 30s -16s linear infinite;
}
@keyframes fall-29 {
  30.13% {
    transform: translate(95.6773vw, 30.13vh) scale(0.6502);
  }
  to {
    transform: translate(96.7408vw, 100vh) scale(0.6502);
  }
}
.snow:nth-child(30) {
  opacity: 0.5949;
  transform: translate(24.6841vw, -10px) scale(0.7728);
  animation: fall-30 17s -6s linear infinite;
}
@keyframes fall-30 {
  56.318% {
    transform: translate(29.5213vw, 56.318vh) scale(0.7728);
  }
  to {
    transform: translate(27.1027vw, 100vh) scale(0.7728);
  }
}
.snow:nth-child(31) {
  opacity: 0.657;
  transform: translate(92.3833vw, -10px) scale(0.4935);
  animation: fall-31 12s -18s linear infinite;
}
@keyframes fall-31 {
  39.918% {
    transform: translate(97.9882vw, 39.918vh) scale(0.4935);
  }
  to {
    transform: translate(95.18575vw, 100vh) scale(0.4935);
  }
}
.snow:nth-child(32) {
  opacity: 0.7549;
  transform: translate(87.8866vw, -10px) scale(0.8236);
  animation: fall-32 17s -20s linear infinite;
}
@keyframes fall-32 {
  56.327% {
    transform: translate(95.4297vw, 56.327vh) scale(0.8236);
  }
  to {
    transform: translate(91.65815vw, 100vh) scale(0.8236);
  }
}
.snow:nth-child(33) {
  opacity: 0.7798;
  transform: translate(99.5874vw, -10px) scale(0.5427);
  animation: fall-33 26s -23s linear infinite;
}
@keyframes fall-33 {
  42.978% {
    transform: translate(100.6986vw, 42.978vh) scale(0.5427);
  }
  to {
    transform: translate(100.143vw, 100vh) scale(0.5427);
  }
}
.snow:nth-child(34) {
  opacity: 0.4787;
  transform: translate(39.8927vw, -10px) scale(0.6503);
  animation: fall-34 27s -13s linear infinite;
}
@keyframes fall-34 {
  60.766% {
    transform: translate(36.9004vw, 60.766vh) scale(0.6503);
  }
  to {
    transform: translate(38.39655vw, 100vh) scale(0.6503);
  }
}
.snow:nth-child(35) {
  opacity: 0.6221;
  transform: translate(58.7338vw, -10px) scale(0.9965);
  animation: fall-35 20s -5s linear infinite;
}
@keyframes fall-35 {
  48.535% {
    transform: translate(53.9605vw, 48.535vh) scale(0.9965);
  }
  to {
    transform: translate(56.34715vw, 100vh) scale(0.9965);
  }
}
.snow:nth-child(36) {
  opacity: 0.5592;
  transform: translate(0.046vw, -10px) scale(0.0278);
  animation: fall-36 16s -11s linear infinite;
}
@keyframes fall-36 {
  55.5% {
    transform: translate(9.4117vw, 55.5vh) scale(0.0278);
  }
  to {
    transform: translate(4.72885vw, 100vh) scale(0.0278);
  }
}
.snow:nth-child(37) {
  opacity: 0.7114;
  transform: translate(52.1574vw, -10px) scale(0.5198);
  animation: fall-37 13s -11s linear infinite;
}
@keyframes fall-37 {
  62.828% {
    transform: translate(45.2526vw, 62.828vh) scale(0.5198);
  }
  to {
    transform: translate(48.705vw, 100vh) scale(0.5198);
  }
}