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

:root {
    --Neutral900: 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 */

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

body.light-mode {
    color:var(--Neutral900);
    background-color: var(--Neutral-100);
    background-image: linear-gradient(to bottom left,hsl(217, 79%, 74%) , var(--Neutral-100));
    transition: color 300ms;
    
}
button.light-mode , .logo-container.light-mode, .card.light-mode {
    background-color: white;
    border: var(--Neutral-300), solid 1px;
    border-radius: 0.5rem;
    transition:  300ms;
    color: var(--Neutral900);
}
body.dark-mode {
    

    background-image: linear-gradient(to bottom left,hsl(240, 20%, 19%) , hsl(240, 7%, 13%) );
    color: var(--Neutral-100);
    transition:  300ms;
}
button.dark-mode , .logo-container.dark-mode, .card.dark-mode {
    background-color: var(--Neutral-700);
    border: var(--Neutral-600), solid 1px;
    border-radius: 0.5rem;
    color:var(--Neutral-100);
    transition:  300ms;
}

}
body {
    min-height: 100vh;
    font-family: noto sans;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    gap: 1rem

}
.searcher {
    cursor: pointer;
}
button {
    border-radius: 1rem;
        border-style: none;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    
        
}
button:focus {
    border:var(--Red-700) solid 3px
}

.logo-container {
    padding: 0.5rem;
    display: flex;
    align-self: stretch;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.card-container {
    display: flex;
    flex-direction: column;
    gap:2rem
}
.card {
    
    display: flex;
    padding: 0.8rem;
    flex-direction: column;
    gap: 1rem;

    .description {
        

        display: flex;
        gap:1rem;
        .img-container {
            width: 100%;
        }
        
        
    }
    .toggle-buttons {
        display: flex;
        justify-content: space-between;

        
    }
    
}
.title-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    h1{
        margin: 0 2rem;
        text-align: center;
    }
    
    .button-list {
       
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        
        
    }
    
    .nav-button.active {
        background-color: var(--Red-500);
        color: white;
    }
    
    
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--Neutral-800);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--Red-500);
}

input:focus + .slider {
    border:var(--Red-700) solid 3px
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);      
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

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

@media screen and (min-width: 960px) {
    main {
        padding: 2rem 4rem;
    }
    .title-container {
        align-self: stretch;
        flex-direction: row;
        justify-content:space-between ;
        .button-list {
            gap: 1rem;
        }
        h1 {
            margin-left: 0;
        }
    }
    .card-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    .card {
        gap: 1rem;
        justify-content: space-between;
        
    }

    
}