body, html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: url('https://i.ibb.co/HqktVsK/winter-2840549-1280.png') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Mountains of Christmas', cursive;
    font-size: 18px;
  }
  .container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 15%;
    left: 25%;
    background-color:rgba(233, 80, 57, .7);
    border-radius: 1rem;
    width: 50%;
    margin: auto;
    padding: 1rem;
  }
  textarea{
    width:95%;
    height: 30vh;
    background-color: rgba(21, 32, 43,.95);
    color: #fff;
    border-radius:10px;
    font-family: 'Mountains of Christmas', cursive;
    font-size: 1rem;
    padding: 1rem;
    letter-spacing: 1.2px;
    resize: none;
  }
  textarea::placeholder{
      color:#fff;
  }

  #footer {
    margin-top: 0.4rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

  #counterFooter {
    font-size: 1rem;
    letter-spacing: 1.5px;
    color: #fff;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-family: 'Mountains of Christmas', cursive;

  }
  .longerThan120 {
    background-color: cornsilk;
    border-radius: 4px;
    padding: 2px;
  }
  a>button{
      padding: 5px 10px;
  }
  button{
    color: white;
    font-family: 'Mountains of Christmas', cursive;
    font-size: 1rem;
    background-color: rgb(29, 161, 242);
    border-radius: 10px;
    padding: 0 10%;
    justify-content: flex-end;
    cursor: pointer;
    text-align: center;
    border: none;

  }

  .twitter-share-button {
      color: red;
  }
  button:hover {
    background-color: rgb(34, 119, 230);
  }
  button h2{
      display: flex;
      color: #fff;
      font-size: 1.2rem;
      letter-spacing: 1px;

  }
  .buttonDisabled {
     opacity: .5;
     cursor: default;
  }



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

  @-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}
  /* Demo Purpose Only*/
  .demo {
    font-family: 'Raleway', sans-serif;
      color:#fff;
      display: block;
      margin: 0 auto;
      padding: 15px 0;
      text-align: center;
  }
  .demo a{
    font-family: 'Raleway', sans-serif;
  color: #000;
  }