/*       <weight>: Use a value from 100 to 900*/
/* <uniquifier>: Use a unique and descriptive class name*/

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

        body {
            font-family: Montserrat, sans-serif;
            background-color: #f4f4f9;
            
        }
        .header{
            display: flex;
            padding: 20px;
            justify-content: space-between;
        }

        .logo img {width: 220px;}
        .download-btn{
            background-color: #fac400;
            border-radius: 20px;
            font-weight: 500;
            padding: 10px 20px;
            border: none;
            
        }

        .watermark{
            position: absolute;
            z-index: 999;
            opacity: 0.1;
            width: 100%;
            text-align: center;
            bottom: -90px;
            pointer-events: none;
        }
        .watermark img{
            width: 1200px;
/*            transform: rotate(-20deg);*/
        }
        .periodic-table {
            display: grid;
            grid-template-columns: repeat(18, 70px);
            gap: 2px;
            max-width: 90%;
            margin: auto;
            position: relative;
            justify-content: center;
        }
        .element {
            width: 70px;
            height: 80px;
            border: 1px solid #ccc;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
/*            align-items: center;*/
            cursor: pointer;
            transition: transform 0.2s;
            font-size: 14px;
            /*text-align: center;*/
            padding: 3px;

        }
        .element:hover {
            transform: scale(1.7);
            filter: brightness(90%);
        }
        .number{
          font-size: 8px;
        }
        .symbol{
          font-size: 18px; font-weight: 500; color:#fff;
        }
        .name{
          font-size: 8px;
        }
        
        .empty {
            background: transparent;
            border: none;
            pointer-events: none;
        }
        .lanthanide, .actinide {
            background-color: #ffb3b3;
        }
        .modal-content {
            border-radius: 10px;
        }
        .modal-header {
            background-color: #fff;
            color: white;
        }
        .modal-body img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }

        .info{
          display: flex;
          flex-direction: column;
        }

        .legend {
          display: grid;
          grid-template-columns: repeat(3, 330px);
          gap: 3px;
          margin-top: 30px;
          max-width: 70%;
          margin: auto;
          justify-content: center;
      }

      .legend-item {
          display: flex;
          align-items: center;
          margin-bottom: 5px;
      }

      .legend-color {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        border-radius: 3px;
    }


    .sym {font-size: 52px;font-weight: 500;}
    .nam {font-weight: 500;font-size: 24px;}
    .sep {border: 1px solid #fff; width: 60%; margin: 5px 0px;}
    .fun {margin: 5px 0px;}
      @media (max-width: 768px) {
            .periodic-table {
                grid-template-columns: repeat(18, 44px);
            }
            .element {
                width: 40px;
                height: 40px;
                font-size: 10px;
            }
            .legend{
              grid-template-columns: repeat(2, 380px);
            }
            .symbol {font-size: 12px;}
                        .name{
                display:none;
            }

}