@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  }

  a {
      color: #c2c2c2;
  }
      .morebtn {
      display: block;
      z-index: 10;
      width: 24px;
      position: absolute;
      right: 24px;
      top: 24px;
      opacity: 0.5;
      transition: opacity .5s ease-in-out;
      -moz-transition: opacity .5s ease-in-out;
      -webkit-transition: opacity .5s ease-in-out;
      cursor: pointer;
  }

  .morebtn:hover {
      display: block;
      z-index: 10;
      width: 24px;
      position: absolute;
      right: 24px;
      top: 24px;
      opacity: 1;
      transition: opacity .3s ease-in-out;
      -moz-transition: opacity .3s ease-in-out;
      -webkit-transition: opacity .3s ease-in-out;
  }

  #description {
      width: 300px;
      overflow: auto;
      background-color: rgba(89, 138, 246, 0.67);
      color: #cad6f0;
      box-shadow: 0 0 2px;
      border-radius: 5px;
          border: none;
          position: absolute;
          top: 34px;
          right: 34px;
          padding: 20px;
      }

      .hide {
          display: none;
      }

      
      /* The Modal (background) */
          .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 100000; /* Sit on top */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
          -webkit-animation-name: fadeIn; /* Fade in the background */
          -webkit-animation-duration: 0.4s;
          animation-name: fadeIn;
          animation-duration: 0.4s
          }

          /* Modal Content */
     
          .modal-content {
          position: fixed;
          top: 0;
          background-color: transparent;
          width: 100%;
          -webkit-animation-name: slideIn;
          -webkit-animation-duration: 0.4s;
          animation-name: slideIn;
          animation-duration: 0.4s;
          font-family: 'Nunito Sans',Georgia, 'Times New Roman', Times, serif;
          font-size: 14px;
          }

          h2{
            font-weight: normal;
            font-size: 30px;
          font-family: 'Nunito Sans', Georgia, 'Times New Roman', Times, serif;
         margin: 10px 0 0 0;
        }
        h3{
          font-family: 'Nunito Sans', Georgia, 'Times New Roman', Times, serif;
         margin: 0px 0 10px 0;
        }

          /* The Close Button */
          .close {
          color: white;
          float: right; 
          padding:0px 0 0 0 ;
          font-size: 40px;
          font-weight: bold;
          }

          .close:hover,
          .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
          }

          .modal-header {
          padding: 2px 16px;
          background-color: #000000;
          color: white;
          }

          .modal-body {
              padding: 2px 16px;
              background-color: #0000009d;
              color: white;
          }


          .modal-footer {
          padding: 2px 16px;
          background-color: #00000062;
          color: white;
          font-weight:500;
          font-size: 10px;
        font-family: 'Nunito Sans', Georgia, 'Times New Roman', Times, serif;
          }

          /* Add Animation */
          @-webkit-keyframes slideIn {
          from {top: -300px; opacity: 0} 
          to {top: 0; opacity: 1}
          }

          @keyframes slideIn {
          from {top: -300px; opacity: 0}
          to {top: 0; opacity: 1}
          }

          @-webkit-keyframes fadeIn {
          from {opacity: 0} 
          to {opacity: 1}
          }

          @keyframes fadeIn {
          from {opacity: 0} 
          to {opacity: 1}
          }