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

*,*::after,*::before{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}

:root {
  --neutral-900: hsl(227, 75%, 14%);
  --neutral-800: hsl(226, 25%, 17%);
  --neutral-700: hsl(225, 23%, 24%);
  --neutral-600: hsl(226, 11%, 37%);
  --neutral-300: hsl(0, 0%, 78%);
  --neutral-200: hsl(217, 61%, 90%);
  --neutral-100: hsl(0, 0%, 93%);
  --neutral-0: hsl(200, 60%, 99%);

  --red-400: hsl(3, 86%, 64%);
  --red-500: hsl(3, 71%, 56%);
  --red-700: hsl(3, 77%, 44%);

  --gradient-light: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);
  --gradient-dark: linear-gradient(180deg, #040918 0%, #091540 100%);

  --f-f:'Noto Sans';
  --f-st:'italic'
}
body{
    font-family: var(--f-f);
    font-style: var(--f-st);
    background-color: var(--neutral-200);
}
.scheme-dark{
  background: var(--neutral-600);
  color: var(--neutral-100);
}
.bg-scheme-dark{
  background: var(--gradient-dark);
  color: var(--neutral-100);
}
.scheme-light{
  background: var(--neutral-0);
  color: var(--neutral-900);
}
.bg-scheme-light{
  background: var(--gradient-light);
  color: var(--neutral-900);
}
main{
    padding: 2rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.color-div{
    width: 100%;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    border-radius: 1rem;
}
.color-div a img{
    background-color: var(--neutral-300);
    border-radius: 15%;
    padding: 0.5rem;
}

.nav-div{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.nav-div ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
}
.nav-div ul li{
    padding: 0.5rem;
    border-radius: 2rem;
    cursor: pointer;
}
.nav-div ul li:hover{
    transform: scale3d(1.5, 1.5, 1.5);
}
#active{
    background-color: var(--red-500);
    color: var(--neutral-0);
}

.card-section{
    display:flex;
    gap:2rem;
    flex-direction: column;
}
.card-div{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap:2rem;
    border-radius: 1rem;
}
.card-div:hover{
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
}
.card-div .card-text{
    display: flex;
    gap:1rem
}
.card-div .card-btn{
     display: flex;
    justify-content:space-between
}
.card-div .card-btn input{
    appearance: none;
    position: relative;
    width: 3rem;
    height: 1.5rem;
    background-color: var(--neutral-300);
    border-radius: 1rem;
    transition: background-color 0.3s ease;
    outline: none;
    cursor: pointer;
}
.card-div .card-btn input::before{
    content: '';
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    background-color: var(--neutral-0);
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.card-div .card-btn input:checked{
    background-color: var(--red-500);
}
.card-div .card-btn input:checked::before{
    transform: translateX(1.5rem);
}

.card-div .remove-btn{
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    border-color: var(--neutral-300);
}

/*focus states*/
.scheme-btn:focus,.remove-btn:focus,.nav-div ul li:focus{
    outline: 2px solid var(--red-400);
    outline-offset: 2px;
}

/*media queries*/
@media (min-width:40rem){
    .nav-div{
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }
    .nav-div ul{
        justify-content: flex-start;
        gap: 1rem;
    }
    .card-section{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: auto;
        gap: 1rem;
    }
}