@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');


body {
      background-color: #181b22;
    }
    p {
        font-size: 12px !important;
    }
    .mpage-heading {
        font-size: 21px !important;
    }
    .mpage-topic {
        font-size: 16px !important;
    }

    .phone-frame {
      width: 100%;
      min-width: 360px;
      max-width: 440px;
      height: 100%;
      min-height: 667px;
      max-height: 956px;
      border: 16px solid #333;
      border-radius: 36px;
      background-color: #000;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
      position: relative;
      overflow: hidden;
    }
    .phone-screen {
      width: 100%;
      height: 100%;
      background-color: #d6dcce;
      border-radius: 0px;
      overflow-y: auto;
      padding: 1rem;
    }
    .phone-canvas { /* fixed selector */
      height: 100%;
      width: 100%;
      background-color: #fff; /* optional */
    }

    .home-screen { /* fixed selector */
        height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #FBFDF4; /* optional */
    }
    .credits small,
    .credits a {
        font-size: 10px !important;
        color: darkolivegreen;
        text-decoration: none !important;
        text-transform: uppercase !important;
        font-family: "Outfit", sans-serif;
        font-weight: 500 !important;
        letter-spacing: 2px !important;
    }
    .credits small {
      color: darkgreen;
    }