@charset "UTF-8";
/**
  Check it out in Full page view 😄
**/
:root {
  --background-color: #f2bdbb;
  --year-color: #eb8258;
  --year-text-shadow: 10px 0px 0px rgba(219, 80, 74,1);
  --year-change-text-shadow: 10px 0px 0px rgba(70, 153, 218, 1);
  --greeting-text-shadow: 5px 0px 0px rgba(70, 153, 218, 1);
  --year-change-color: #84dbf7;
  --year-change-background-color: #072852;
}

* {
  box-sizing: border-box;
}

body,
div,
p {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--background-color);
  height: 100vh;
  width: 100%;
  font-family: "Work Sans", sans-serif;
  animation: changeBg 0.5s ease-in-out 3.5s 1 normal forwards;
  overflow: hidden;
}

.header,
.footer {
  position: absolute;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='206' height='53' viewBox='0 0 206 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='206' height='53' fill='%23072852'/%3E%3Ccircle cx='26.5' cy='13.25' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='26.5' cy='24.2917' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='39.75' cy='24.2917' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='39.75' cy='35.3333' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='39.75' cy='13.25' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='13.25' cy='13.25' r='4.41667' fill='%2300539F'/%3E%3Cpath d='M108.625 32.0208L113.95 21.37C114.577 20.1161 116.266 19.8795 117.214 20.9129L125.365 29.8054C126.33 30.8585 128.057 30.5892 128.655 29.2921L132.457 21.0546C133.126 19.6052 135.14 19.485 135.976 20.8445L140.608 28.3716C141.498 29.8178 143.672 29.5669 144.209 27.9558L147.271 18.7708' stroke='%2300539F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M68.6667 18.2976L76.3958 24.2917M84.125 30.9167L76.3958 24.2917M76.3958 24.2917L68.6667 30.9167L84.125 17.6667' stroke='%2300539F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M164.77 31.5208L177.292 9.83334L189.813 31.5208H164.77Z' stroke='%230B4A99'/%3E%3Cpath d='M182.812 11.0417L197.156 34.2292H168.469L182.812 11.0417Z' fill='%2300539F'/%3E%3C/svg%3E%0A");
}

.header {
  top: 0;
  left: 0;
  height: 25%;
  width: 20%;
  animation: revealheader 0.5s ease-in-out 4s 1 normal forwards;
}

.footer {
  height: 35%;
  width: 40%;
  bottom: 0;
  right: 0;
  animation: revealfooter 0.5s ease-in-out 4s 1 normal forwards;
}

.container {
  height: 100vh;
}
.container .current-year {
  position: absolute;
  width: 100vw;
  height: 100%;
  transition: all 0.5s;
}

.current-year {
  position: relative;
}
.current-year .year {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 300px;
  text-align: center;
  color: var(--year-color);
}
.current-year .year::before {
  content: "Happy";
  font-size: 7em;
  position: absolute;
  top: -100px;
  left: 20%;
  margin: 0 auto;
  opacity: 0;
  color: var(--year-change-color);
  text-shadow: var(--greeting-text-shadow);
  animation: fadeIn 0.5s ease-in-out 3.5s 1 normal forwards;
}
.current-year .year span {
  display: inline-block;
  position: relative;
  font-size: 20em;
  text-shadow: var(--year-text-shadow);
  z-index: 10;
}
.current-year .year span:nth-child(1) {
  animation: jump 0.75s ease-in-out 3.6s infinite normal forwards, color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.current-year .year span:nth-child(2) {
  animation: jump 0.75s ease-in-out 3.4s infinite normal forwards, color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.current-year .year span:nth-child(3) {
  animation: jump 0.75s ease-in-out 3.2s infinite normal forwards, color 0.75s ease-in-out 3.5s 1 normal forwards;
}
.current-year .year span:nth-child(4) {
  animation: jump 0.5s ease-in-out 0.2s infinite normal forwards, fadeOut 1s ease-in-out 3s 1 normal forwards;
  position: relative;
}
.current-year .year span:last-child {
  display: inline-block;
  position: relative;
  opacity: 0;
  animation: jumpNewYear 1s ease-in-out 3s 1 normal forwards, jumpY 0.75s ease-in-out 4s infinite normal forwards, color 0.5s ease-in-out 3.5s 1 normal forwards;
}

@keyframes jump {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  75% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes jumpNewYear {
  0% {
    opacity: 1;
    transform: scale(0.3) translateY(-200px) translateX(-200px);
  }
  100% {
    transform: scale(1) translateY(0px) translateX(-200px);
    opacity: 1;
  }
}
@keyframes jumpNewYearSm {
  0% {
    opacity: 1;
    transform: scale(0.3) translateY(-200px) translateX(-100px);
  }
  100% {
    transform: scale(1) translateY(0px) translateX(-100px);
    opacity: 1;
  }
}
@keyframes jumpNewYearXs {
  0% {
    opacity: 1;
    transform: scale(0.3) translateY(-200px) translateX(-80px);
  }
  100% {
    transform: scale(1) translateY(0px) translateX(-80px);
    opacity: 1;
  }
}
@keyframes jumpY {
  0% {
    transform: translateX(-200px) translateY(0px);
  }
  50% {
    transform: translateX(-200px) translateY(-20px);
  }
  75% {
    transform: translateX(-200px) translateY(20px);
  }
  100% {
    transform: translateX(-200px) translateY(0px);
  }
}
@keyframes jumpYSm {
  0% {
    transform: translateX(-100px) translateY(0px);
  }
  50% {
    transform: translateX(-100px) translateY(-20px);
  }
  75% {
    transform: translateX(-100px) translateY(20px);
  }
  100% {
    transform: translateX(-100px) translateY(0px);
  }
}
@keyframes jumpYXs {
  0% {
    transform: translateX(-80px) translateY(0px);
  }
  50% {
    transform: translateX(-80px) translateY(-20px);
  }
  75% {
    transform: translateX(-80px) translateY(20px);
  }
  100% {
    transform: translateX(-80px) translateY(0px);
  }
}
@keyframes fadeOut {
  0% {
    transform: scale(1) translateY(0px);
  }
  100% {
    transform: scale(0) translateY(600px);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes color {
  0% {
    color: var(--year-color);
    text-shadow: var(--year-text-shadow);
  }
  100% {
    color: var(--year-change-color);
    text-shadow: var(--year-change-text-shadow);
  }
}
@keyframes changeBg {
  0% {
    background-color: var(--background-color);
  }
  100% {
    background-color: var(--year-change-background-color);
  }
}
@keyframes revealheader {
  0% {
    transform: translateY(-50px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes revealfooter {
  0% {
    transform: translateY(50px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0.5;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
.snowflake-grid {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px;
  gap: 5px;
  opacity: 0;
  width: 100px;
  transform: scale(0.4);
}
.snowflake-grid div {
  border-radius: 5px;
}
.snowflake-grid .snowflake-item {
  position: relative;
}

.to-left {
  position: absolute;
  top: 5%;
  left: 35%;
  animation: swing 3s ease-in-out 4.5s infinite;
}
.to-left div {
  animation: flash 3s ease-in-out 4.5s infinite;
}

.to-right {
  position: absolute;
  top: 35%;
  right: 15%;
  animation: swing 2.5s ease-in-out 4s infinite;
}
.to-right div {
  animation: flash 2.5s ease-in-out 4s infinite;
}

.border-left {
  border-left: 4px solid #e6dada;
}

.border-right {
  border-right: 4px solid #e6dada;
}

.border-bottom {
  border-bottom: 4px solid #e6dada;
}

.border-top {
  border-top: 4px solid #e6dada;
}

.sub-items {
  height: 28px;
  width: 28px;
}

.m-w-15 {
  width: 15px;
}

.m-h-15 {
  height: 15px;
}

.r-270 {
  transform: rotate(270deg);
}

.r-180 {
  transform: rotate(180deg);
}

.r-90 {
  transform: rotate(90deg);
}

.pull-down {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.pull-down-right {
  position: absolute;
  bottom: 5px;
  left: 5px;
}

.pull-right {
  position: absolute;
  right: 5px;
  top: 5px;
}

.pull-left {
  position: absolute;
  left: 5px;
  top: 5px;
}

.m-3 {
  margin: 3px;
}

@keyframes swing {
  0% {
    opacity: 0.5;
  }
  50% {
    transform: rotateZ(20deg) scale(0.4);
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes flash {
  50% {
    border-color: #e7e9eb;
  }
}
.circles {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  opacity: 0;
}

.bottom-left.circles {
  bottom: 5%;
  left: 5%;
  animation: colorSwitcher 2s ease 4.5s infinite;
}

.circles.top-right {
  top: 25%;
  right: 45%;
  animation: colorSwitcher 1.5s ease 5.5s infinite;
}

@keyframes colorSwitcher {
  0% {
    opacity: 1;
    background: #642b73;
    background: -webkit-linear-gradient(to right, #c6426e, #642b73);
    background: linear-gradient(to right, #c6426e, #642b73);
  }
  50% {
    opacity: 1;
    background: #add100;
    background: -webkit-linear-gradient(to right, #7b920a, #add100);
    background: linear-gradient(to right, #7b920a, #add100);
  }
  100% {
    opacity: 1;
    background: #11998e;
    background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
    background: linear-gradient(to right, #38ef7d, #11998e);
  }
}
.star {
  width: 70px;
  height: 70px;
  border: 1px solid white;
  background-color: white;
  opacity: 0;
}
.star div {
  border: 1px solid var(--year-change-background-color);
  background-color: var(--year-change-background-color);
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
}
.star .top {
  top: -18px;
  left: -16px;
}
.star .right {
  top: -18px;
  right: -17px;
}
.star .bottom {
  bottom: -15px;
  right: -15px;
}
.star .left {
  bottom: -14px;
  left: -17px;
}

.star.top-right {
  position: absolute;
  top: 10%;
  right: 15%;
  animation: blink 2s ease-in-out 5s infinite normal forwards;
  background: #ee9ca7;
  background: -webkit-linear-gradient(to right, #ffdde1, #ee9ca7);
  background: linear-gradient(to right, #ffdde1, #ee9ca7);
}

.star.bottom-left {
  position: absolute;
  top: 60%;
  left: 10%;
  animation: blink 1.5s ease-in-out 6s infinite normal forwards;
  background-color: #d39e0b;
}

.star.bottom-center {
  position: absolute;
  bottom: 10%;
  left: 40%;
  animation: blink 1s ease-in-out 5.5s infinite normal forwards;
  background: #f953c6;
  background: -webkit-linear-gradient(to right, #b91d73, #f953c6);
  background: linear-gradient(to right, #b91d73, #f953c6);
}

@media (max-width: 900px) {
  .current-year .year {
    height: 200px;
  }

  .current-year .year span {
    font-size: 12em;
  }

  .current-year .year span:last-child {
    display: inline-block;
    position: relative;
    opacity: 0;
    animation: jumpNewYearSm 1s ease-in-out 3s 1 normal forwards, jumpYSm 0.75s ease-in-out 4s infinite normal forwards, color 0.5s ease-in-out 3.5s 1 normal forwards;
  }
}
@media (max-width: 767px) {
  .current-year .year {
    height: 150px;
  }
  .current-year .year::before {
    left: 5%;
    font-size: 5em;
  }

  .current-year .year span {
    font-size: 7em;
  }

  .current-year .year span:last-child {
    display: inline-block;
    position: relative;
    opacity: 0;
    animation: jumpNewYearXs 1s ease-in-out 3s 1 normal forwards, jumpYXs 0.75s ease-in-out 4s infinite normal forwards, color 0.5s ease-in-out 3.5s 1 normal forwards;
  }

  .snowflake-grid.to-right {
    display: none;
  }

  .header, .footer {
    width: 100%;
    height: 14%;
    z-index: 20;
  }

  .snowflake-grid.to-left {
    top: 16%;
    left: 15%;
  }

  .star.bottom-center {
    left: unset;
    right: 5%;
    bottom: 15%;
  }

  .star.top-right {
    top: 14%;
  }
}