@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap');


:root {
  --Teal:	#009c8e;
  --Light-Teal:	#b2e1de;
  --Pale-Green:	#A8D8B9;
  --MintGreen:	#98E2B6;
  --SeafoamGreen:	#B1E0D4;
  --LightGray:	#D3D3D3;
  --SlateGray:	#708090;
  --CharcoalGray:	#A9A9A9;
  --CoralRed:	#FF6F61;
  --BrickRed:	#C62D2D;
  --Crimson:	#DC143C;
  --Salmon:	#FA8072;
  --Rose:	#D16D94;
  --Light-Mint-Green:	#A8D8B9;
  --Deep-Teal:	#007A66;
  --Dark-Slate-Gray:	#2F4F4F;
  --Forest-Green:	#2C5A4A;
  --Charcoal:	#36454F;
  --Gunmetal:	#2A3439;

  --ROY-Red: #E57373;
  --ROY-Orange: #FFB74D;
  --ROY-Yellow: #FFEB3B;
  --ROY-Green: #4CAF50; 
  --ROY-Blue: #4FC3F7;
  --ROY-Indigo: #5C6BC0;
  --ROY-Violet: #BA68C8;

  --Emerald-Green: #4CAF50;         /* Emerald Green */
  --Light-Sea-Green: #20B2AA;      /* Light Sea Green */
  --Pale-Green: #98FB98;            /* Pale Green */
  --Spring-Green: #00FF7F;          /* Spring Green */
  --Forest-Green: #228B22;          /* Forest Green */
  --Mint: #3EB489;  
  
  --teal-light-shade-1: #00b29d70;
  --teal-light-shade-2: #00c1ab;
  --teal-light-shade-3: #00d0b8;
  --teal-light-shade-4: #00dfc6;
  --teal-light-shade-5: #00efdb;
  --teal-dark-shade-1: #008e7a;
  --teal-dark-shade-2: #007d6a;
  --teal-dark-shade-3: #006b58;
  --teal-dark-shade-4: #005a47;
  --teal-dark-shade-5: #004b3b;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #252525;
}

html {
  font-size: 18px;
  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
  font-family: 'Afacad Flux';
  font-weight: 600;
  /* color: rgba(255, 255, 255, 0.87);
  background-color: #242424; */
}

header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
}

textarea {
  font-size: 16px; /* Base font size */
  line-height: 1.5; /* Line height */
  padding: 10px; /* Padding for better touch targets */
}


body {
  /* background-color: #f5f5f5; */
  background-color: var(--Teal);
  width: 100vw;
  height:fit-content;
  min-height: 100vh;
  /* padding: 0 1rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width:  100vw;
  overflow-x: hidden
}

ul {
    list-style-type: none;
}
hr {
  width: 100%;
  border-color: #252525;
}

button {
    border-radius: 100px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: var(--Teal);
    cursor: pointer;
    transition: border-color 0.25s;
  }
  button:hover {
    border-color: #646cff;
  }
  button:focus,
  button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
  }