body {
  background-color: #ffffff;
  opacity: 1;
  background-image:  linear-gradient(135deg, #f4f4f4 25%, transparent 25%), linear-gradient(225deg, #f4f4f4 25%, transparent 25%), linear-gradient(45deg, #f4f4f4 25%, transparent 25%), linear-gradient(315deg, #f4f4f4 25%, #ffffff 25%);
  background-position:  14px 0, 14px 0, 0 0, 0 0;
  background-size: 14px 14px;
  background-repeat: repeat;}

      p {
        color: #000000;
      }
      .box {
        background: rgb(161,199,226);
        background: linear-gradient(120deg, rgba(161,199,226,1) 0%, rgba(212,226,236,1) 100%);
      }

      .box-purple {
        background: rgb(179,160,226);
        background: linear-gradient(120deg, rgba(179,160,226,1) 0%, rgba(212,205,231,1) 100%);
      }

      .footer {
        background-color: #dddddd;
      }

      .h3 {
        font-family: 'Patrick Hand', cursive;
      }

      .tooltip {
        position: relative;
        display: inline-block;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 140px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -75px;
        opacity: 0;
        transition: opacity 0.3s;
      }

      .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
      }