:root{
    --clr-primary-500: hsl(3, 77%, 44%);
    --clr-primary-300: hsl(3, 71%, 56%);
    --clr-primary-100: hsl(3, 86%, 64%);
    --clr-neutral-100: hsl(200, 60%, 99%);
    --clr-neutral-200: hsl(0, 0%, 93%);
    --clr-neutral-300: hsl(217, 61%, 90%);
    --clr-neutral-400: hsl(0, 0%, 78%);
    --clr-neutral-500: hsl(226, 11%, 37%);
    --clr-neutral-600: hsl(225, 23%, 24%);
    --clr-neutral-700: hsl(226, 25%, 17%);
    --clr-neutral-800: hsl(227, 75%, 14%);
    --clr-gradient-500: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);
    --clr-gradient-100: linear-gradient(180deg, #040918 0%, #091540 100%);
    --fs-body: 1rem;
    --ff-body: "Noto Sans", sans-serif;
    --fw-light: 400;
    --fw-bold: 500;
    --fw-bolder: 700;
    --text-header: 2.1875rem;
    --text-semi-header: 1.875rem;
}

/*General Styling*/

.dark-mode{
  --clr-neutral-800: hsl(200, 60%, 99%);
  --clr-neutral-300: hsl(227, 75%, 14%);
  --clr-neutral-100: hsl(226, 25%, 17%);
  --clr-neutral-200: hsl(225, 23%, 24%);
}

body{
    font-size: var(--ff-body);
    font-family: var(--ff-body);
    background-color: var(--clr-neutral-300);
}

.text-header{
    font-size: var(--text-header);
    font-weight: var(--fw-bolder);
}

.text-body{
  color: var(--clr-neutral-500);
  font-weight: var(--fw-bold);
}

.text-semi-header{
    font-size: var(--text-semi-header);
    font-weight: var(--fw-bolder);
}

.text-blue{
  color: var(--clr-neutral-800);
}

.mt-1{
  margin-top: 1rem;
}

.mt-2{
  margin-top: 1.5rem;
}

.mt-3{
  margin-top: 2rem;
}

.mb-1{
  margin-bottom: 1rem;
}

.pb-2{
  padding-bottom: 1.5rem;
}

.mb-3{
  margin-bottom: 2rem;
}

.text-white{
  color: var(--clr-neutral-100);
}

/*CSS Reset*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  overflow-x: hidden;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
    }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.top-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--clr-neutral-100);
  height: 66px;
  padding-inline: 1rem;
}

.mode-togle{
  background-color: var(--clr-neutral-200);
  width: 44px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  border: 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 22px;
}
  
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
  
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--clr-neutral-400);
    -webkit-transition: .4s;
    transition: .4s;
}
  
.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: var(--clr-neutral-100);
    -webkit-transition: .4s;
    transition: .4s;
}
  
input:checked + .slider {
  background-color: var(--clr-primary-300);
}
  
input:focus + .slider {
  box-shadow: 0 0 1px var(--clr-primary-300);
}
  
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}
  
.slider.round:before {
  border-radius: 50%;
}

.extension-card{
  background-color: var(--clr-neutral-100);
  padding-inline: 1rem;
  border-radius: 16px;
  margin-top: 1rem;
  overflow: hidden;
}

.card-top{
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
}

.removeBtn{
  border: 1px solid var(--clr-neutral-500);
  border-radius: 1.5rem;
  width: 100px;
  height: 40px;
  cursor: pointer;
  background-color: var(--clr-neutral-100);
  font-weight: var(--fw-bolder);
}

.button{
  border: 1px solid var(--clr-neutral-100);
  border-radius: 1.5rem;
  width: 95px;
  height: 49px;
  cursor: pointer;
  background-color: var(--clr-neutral-100);
  margin: 5px;
  font-weight: var(--fw-bolder);
  font-size: 18px;
}

.button:hover{
  background-color: var(--clr-primary-300);
  color: var(--clr-neutral-100);
}

.card-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.interactivity{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.interactive-btns{
  list-style: none;
  display: flex;
}

.extensions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: 1rem;
}

.active{
  border: 2px solid var(--clr-primary-300);
}

@media(max-width:55em){

  .container{
    max-width: 500px;
    margin: auto;
    padding-inline: 1rem;
  }
}

@media(min-width:65.63em){
  .container{
    max-width: 1200px;
    margin: auto;
    padding-inline: 1rem;
    padding-bottom: 3rem;
  }
}