/*General CSS RESET*/
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    :root {
      --body-bg-color: hsl(221, 100%, 96%);
      --primary-bg:  hsl(241, 81%, 54%);
      --primary-bg-gradient-1: hsl(252, 100%, 67%);
      --primary-bg-gradient-2: hsl(241, 81%, 54%);

      --circular-bg-gradient-1: hsla(256, 72%, 46%, 1);
      --circular-bg-gradient-2: hsla(241, 72%, 46%, 0);

      --container-color: hsl(0, 0%, 100%);
      --btn-bg-color: hsl(224, 30%, 27%);
    }

    html {
      font-size: 62.5%;
    }

    body {
      font-size: 1.4rem;
      font-family: "Hanken Grotesk", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      background-color: var(--body-bg-color);
    }

    /*=================MAIN CONTAINER=============*/
    .container {
      width: 100;
      background-color: var(--container-color);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      color: var(--btn-bg-color);
    }

    /*--------TOP(LEFT ON DESKTOP) CONTAINER STYLING-------- */
    .top-or-left {
      background: linear-gradient(to bottom, var(--primary-bg-gradient-1), var(--primary-bg-gradient-2));
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 1rem;
      padding: 3rem 3rem;
      color: hsl(241, 100%, 89%); 
      border-bottom-right-radius: 3rem;
      border-bottom-left-radius: 3rem;
    }
    
    .top-or-left p:first-child {
      font-size: 1.6rem;
    }


    /*------------CIRCULAR SCORE BOARD ----------*/
    .circular-score-board {
      width: 12rem;
      height: 12rem;
      background: linear-gradient(to top, var(--circular-bg-gradient-2), var(--circular-bg-gradient-1));;
      border-radius: 50%;
      margin: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    #result {
      font-size: 5rem;
      font-weight: 600;
      color: white;
    }

    .circular-score-board p:last-child {
      opacity: .6;
    }

    .credit {
      font-size: 2rem;
      color: white;
    }

    .credit-note {
      line-height: 1.3;
    }



    /*--------BOTTOM(RIGHT ON DESKTOP) CONTAINER STYLING-------- */
    .bottom-or-right {
      padding: 2rem;
    }

    .summary-score-container {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      margin: 2rem 0;
    }

    .caterogy-score-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: silver;
      padding: 1.2rem 1rem;
      border-radius: 1rem;
    }

    .summary {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    .score .opaque {
      opacity: 0.6;
      font-weight: 700;    
    }

    .score span {
      opacity: 1;
    }

    .box-1 {
      background-color: hsla(0, 100%, 67%, 0.1);
    }

    .box-2 {
      background-color: hsla(39, 100%, 56%, 0.1);
    }

    .box-3 {
      background-color: hsla(166, 100%, 37%, 0.1);
    }

    .box-4 {
      background-color: hsla(234, 85%, 45%, 0.1);
    }

    .box-1 .category {
      color: hsl(0, 100%, 67%);
    }

    .box-2 .category{
      color: hsl(39, 100%, 56%);
    }

    .box-3 .category{
      color: hsl(166, 100%, 37%);
    }

    .box-4 .category{
      color: hsl(234, 85%, 45%);
    }

    .bottom-or-right a {
      text-decoration: none;
      color: white;
      background-color: var(--btn-bg-color);
      display: flex;
      justify-content: center;
      padding: 1.4rem 1rem;
      border-radius: 3rem;
    }

    a {
      margin-top: 1rem;
    }

    a:hover {
      background-color: var(--primary-bg);
    }
  
    /*--------COMPONENTS-------------*/
    .bold {
      font-weight: 700;
    }

    .chat-icon {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background-color: hsl(221, 100%, 96%);
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 1rem;
      right: 2rem;
    }


    /*--------RESPONSIVE DESIGN TABLE/DESKTOP SIZE-------- */
    @media (min-width: 768px) {
      body {
        display: flex;
        flex-direction: column;
        width: 100vw;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        font-size: 1.6rem;
      }

      .container {
        width: 58rem;
        min-height: revert;
        max-height: 40rem;
        flex-direction: row;
        border-radius: 2rem;
        overflow: hidden;
      }

      .top-or-left, .bottom-or-right {
        width: 50%;
      }

      .top-or-left {
        border-radius: revert;
        border-bottom-right-radius: 2rem;
        border-top-right-radius: 2rem;
        justify-content: flex-start;
        padding: 3rem 3rem;
        gap: 1rem; 
      }

      .bottom-or-right {
        padding: 3rem;
      }

      .circular-score-board {
        margin-top: 2rem;
        width: 160px;
        height: 180px;
      }

      .summary-score-container {
        margin-bottom: 3rem;
      }

      .credit {
        margin-top: 1rem;
      }
    
      .heading {
        font-size: 2rem;
      }
    }

    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }