* {
  box-sizing: border-box;
}

body {
  background-color: rgb(4 0 42);
  margin: 0;
  position: relative;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;

  overflow: hidden;
}

.top-border {
  background-image: url(img/top-snow.png);
  background-repeat: repeat-x;
  min-height: 39px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.bottom-border {
  position: absolute;
  background-image: url(img/bottom-snow.png);
  background-position: 36% bottom;
  min-height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.tree {
  width: 200px;
  margin-left: -100px;
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 10px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(4, 0, 42, 0.8);
  z-index: 2;
}

.card {
  z-index: 100000;
  text-align: center;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  overflow: scroll;
}

.flakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

h1 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.links {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 20px;
  flex-direction: row;
  flex-wrap: wrap;
}

.links > a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.links > a:hover {
  color: yellow;
}

.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{
  0%{top:-10%}
  100%{top:100%}
}

@-webkit-keyframes snowflakes-shake{
  0% {
    -webkit-transform: translateX(0px);
    transform:translateX(0px)
  }

  50%{
    -webkit-transform:translateX(80px);transform:translateX(80px)
  }

  100%{
    -webkit-transform:translateX(0px);transform:translateX(0px)
  }
}

@keyframes snowflakes-fall{
  0%{top:-10%}
  100%{top:100%}
}

@keyframes snowflakes-shake{
  0%{transform:translateX(0px)}
  50%{transform:translateX(80px)}
  100%{transform:translateX(0px)}
}

.snowflake{
  position:fixed;
  top:-10%;
  z-index:9999;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
  -webkit-animation-name:snowflakes-fall,snowflakes-shake;
  -webkit-animation-duration:10s,3s;
  -webkit-animation-timing-function:linear,ease-in-out;
  -webkit-animation-iteration-count:infinite,infinite;
  -webkit-animation-play-state:running,running;
  animation-name:snowflakes-fall,snowflakes-shake;
  animation-duration:10s,3s;
  animation-timing-function:linear,ease-in-out;
  animation-iteration-count:infinite,infinite;
  animation-play-state:running,running}

.snowflake:nth-of-type(0){
  left:1%;
  -webkit-animation-delay:0s,0s;
  animation-delay:0s,0s
}

.snowflake:nth-of-type(1){
  left:10%;
  -webkit-animation-delay:1s,1s;
  animation-delay:1s,1s
}

.snowflake:nth-of-type(2){
  left:20%;
  -webkit-animation-delay:6s,.5s;
  animation-delay:6s,.5s
}

.snowflake:nth-of-type(3){
  left:30%;
  -webkit-animation-delay:4s,2s;
  animation-delay:4s,2s
}

.snowflake:nth-of-type(4){
  left:40%;
  -webkit-animation-delay:2s,2s;
  animation-delay:2s,2s
}

.snowflake:nth-of-type(5){
  left:50%;
  -webkit-animation-delay:8s,3s;
  animation-delay:8s,3s
}

.snowflake:nth-of-type(6){
  left:60%;
  -webkit-animation-delay:6s,2s;
  animation-delay:6s,2s
}

.snowflake:nth-of-type(7){
  left:70%;
  -webkit-animation-delay:2.5s,1s;
  animation-delay:2.5s,1s
}

.snowflake:nth-of-type(8){
  left:80%;
  -webkit-animation-delay:1s,0s;
  animation-delay:1s,0s
}

.snowflake:nth-of-type(9){
  left:90%;
  -webkit-animation-delay:3s,1.5s;
  animation-delay:3s,1.5s
}