@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    background: linear-gradient(300deg,#007102,#026d46,#02156d);
    background-size: 1500% 1500%;
    animation: gradient-animation 12s ease infinite;
    text-align: center;
    font-family: "Poppins", sans-serif;
  }
  
  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  div.polaroid {
    width: 80%;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
    margin: auto;
    border-radius: 8px;
  }
  
  div.container {
    text-align: center;
    padding: 10px 20px;
  }

    @keyframes fadeinall {
        0% {
          opacity: 1; }
        97% {
          opacity: 0; }
        98% {
          opacity: 0;
          -webkit-transform: translateY(0);
          transform: translateY(0); }
        100% {
          opacity: 0;
          -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
          z-index: -1; } }
        #fadein {
          opacity: 1;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          transform: translateY(0);
          background-color: #FFFFFF;
          z-index: 999;
          -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
          -webkit-animation: fadeinall 1s normal both;
          animation: fadeinall 1s normal both;
          -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }