:root{--header_bg_color_LIGHT: hsl(200, 60%, 99%);--header_bg_color_DARK: hsla(225, 23%, 24%, .6);--button_bg_color_LIGHT: hsl(0, 0%, 93%);--button_bg_color_hover_LIGHT: hsl(0, 0%, 78%);--button_focus_LIGHT: hsl(3, 71%, 56%);--button_focus_DARK: hsl(3, 86%, 64%);--button_bg_color_DARK: hsla(226, 11%, 37%, .2)}.header{background-color:var(--header_bg_color_LIGHT);margin:2rem auto;width:85%;padding:.6rem;display:flex;justify-content:space-between;align-items:center;border-radius:15px}.header button{cursor:pointer;background-color:var(--button_bg_color_LIGHT);padding:.4rem .6rem;border:none;border-radius:10px;transition:.4s ease background-color}.header button:hover{background-color:var(--button_bg_color_hover_LIGHT)}.header button:focus{outline-color:var(--button_focus_LIGHT)}.dark_mode .header{background-color:var(--header_bg_color_DARK)}.dark_mode .header button{background-color:var(--button_bg_color_DARK)}.dark_mode .header button:focus{outline:1px solid var(--nav_option_focus_DARK);outline-offset:.2rem}:root{--card_bg_color_LIGHT: hsl(200, 60%, 99%);--card_bg_color_DARK: hsl(226, 25%, 17%);--card_border_color_DARK: hsl(226, 11%, 37%);--name_font_color_DARK: hsl(200, 60%, 99%);--description_font_color_DARK: hsl(0, 0%, 78%);--remove_button_font_color_DARK: hsl(200, 60%, 99%);--remove_button_border_color_LIGHT: hsl(0, 0%, 78%);--remove_button_hover_bg_color_LIGHT: hsl(3, 77%, 44%);--remove_button_hover_font_color_LIGHT: hsl(200, 60%, 99%);--remove_button_border_color_DARK: hsl(226, 11%, 37%);--remove_button_hover_bg_color_DARK: hsl(3, 86%, 64%);--remove_button_hover_font_color_DARK: hsl(227, 75%, 14%);--focus_bg_color_LIGHT: hsl(3, 71%, 56%);--focus_bg_color_DARK: hsl(3, 86%, 64%);--check_label_bg_color: hsl(200, 60%, 99%);--check_container_checked_LIGHT: hsl(3, 77%, 44%);--check_container_checked_LIGHT_hover: hsl(3, 71%, 56%);--check_container_checked_DARK: hsl(3, 86%, 64%);--check_container_checked_DARK_hover: hsl(3, 71%, 56%);--check_container_not_checked_LIGHT: hsl(0, 0%, 78%);--check_container_not_checked_DARK: hsl(226, 11%, 37%);--check_container_not_checked_DARK_hover: hsl(225, 23%, 24%)}.card{background-color:var(--card_bg_color_LIGHT);min-width:calc(33% - .6rem);max-width:18.75rem;height:10rem;padding:1rem;border-radius:15px}.card .content{height:50%;display:flex;gap:1rem}.card .content .text strong{font-size:1.2rem}.card .content .text p{padding-top:.8rem}.card .options{height:50%;display:flex;align-items:end;justify-content:space-between}.card .options button{cursor:pointer;padding:.4rem .8rem;border-radius:20px;background-color:transparent;border:1px solid var(--remove_button_border_color_LIGHT);transition:.4s ease background-color,color,border}.card .options button:hover{background-color:var(--remove_button_hover_bg_color_LIGHT);color:var(--remove_button_hover_font_color_LIGHT);border:1px solid transparent}.card .options button:focus,.check:focus{outline:1.5px solid var(--focus_bg_color_LIGHT);outline-offset:.15rem}.card .options .check{position:relative;width:3rem;height:1.6rem;border-radius:20px}.card .options .check label{width:40%;height:75%;transform:translateY(-50%);position:absolute;top:50%;border-radius:50%;background-color:var(--check_label_bg_color)}.label_checked{right:10%}.label_not_checked{left:10%}.check_container_checked{background-color:var(--check_container_checked_LIGHT)}.check_container_checked:hover{background-color:var(--check_container_checked_LIGHT_hover)}.check_container__not_checked{background-color:var(--check_container_not_checked_LIGHT)}.card .options .check input{position:absolute;z-index:1;height:100%;width:100%;cursor:pointer;opacity:0}.dark_mode .card{background-color:var(--card_bg_color_DARK);border:1px solid var(--card_border_color_DARK)}.dark_mode .card strong{color:var(--name_font_color_DARK)}.dark_mode .card p{color:var(--description_font_color_DARK)}.dark_mode .card button{border:1px solid var(--remove_button_border_color_DARK);color:var(--remove_button_font_color_DARK)}.dark_mode .card .options button:focus,.check:focus{outline:1.5px solid var(--focus_bg_color_DARK);outline-offset:.15rem}.dark_mode .card button:hover{color:var(--remove_button_hover_font_color_DARK);background-color:var(--remove_button_hover_bg_color_DARK)}.dark_mode .check_container_checked{background-color:var(--check_container_checked_DARK)}.dark_mode .check_container_checked:hover{background-color:var(--check_container_checked_DARK_hover)}.dark_mode .check_container__not_checked{background-color:var(--check_container_not_checked_DARK)}.dark_mode .check_container__not_checked:hover{background-color:var(--check_container_not_checked_DARK_hover)}@media screen and (max-width: 476px){.card .content .text p{padding-top:.2rem}}:root{--background_bg_gradient_DARK: linear-gradient(180deg, #040918 0%, #091540 100%);--background_bg_gradient_LIGHT: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);--nav_title_color_LIGHT: hsl(227, 75%, 14%);--nav_title_color_DARK: hsl(200, 60%, 99%);--nav_option_border_color_LIGHT: hsl(0, 0%, 78%);--nav_option_bg_color_LIGHT: hsl(200, 60%, 99%);--nav_option_bg_color_DARK: hsl(226, 11%, 37%);--nav_option_border_color_hover_LIGHT: hsl(217, 61%, 90%);--nav_option_font_color_hover_LIGHT: hsl(226, 11%, 37%);--nav_option_focus_LIGHT: hsl(3, 71%, 56%);--nav_option_focus_DARK: hsl(3, 86%, 64%);--nav_option_active_bg_color_active_LIGHT: hsl(3, 77%, 44%);--nav_option_active_bg_color_active_hover_LIGHT: hsl(3, 71%, 56%);--nav_option_active_font_color_active_LIGHT: hsl(200, 60%, 99%);--nav_option_active_bg_color_active_DARK: hsl(3, 86%, 64%);--nav_option_active_bg_color_active_hover_DARK: hsl(3, 71%, 56%);--nav_option_active_font_color_active_DARK: hsl(227, 75%, 14%)}*{margin:0;padding:0;box-sizing:border-box;font-family:Noto Sans,sans-serif}body{min-height:calc(100vh - 2rem);background:var(--background_bg_gradient_LIGHT);background-repeat:no-repeat}main{margin:0 auto;width:85%}nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}nav h1{color:var(--nav_title_color_LIGHT);font-size:2rem}nav .menu_options button{cursor:pointer;padding:.6rem .8rem;border:1px solid var(--nav_option_border_color_LIGHT);border-radius:20px;background-color:var(--nav_option_bg_color_LIGHT);transition:.4s ease color,.4s ease border}nav .menu_options button:not(.active):hover{color:var(--nav_option_font_color_hover_LIGHT);border:1px solid var(--nav_option_border_color_hover_LIGHT)}nav .menu_options button:not(.active):focus{outline-color:var(--nav_option_focus_LIGHT)}nav .menu_options .active{background-color:var(--nav_option_active_bg_color_active_LIGHT);color:var(--nav_option_active_font_color_active_LIGHT);border:none;transition:.4s ease background-color}nav .menu_options button{border:1px solid var(--nav_option_border_color_LIGHT);background-color:var(--nav_option_bg_color_LIGHT)}nav .menu_options .active:hover{background-color:var(--nav_option_active_bg_color_active_hover_LIGHT)}nav .menu_options .active:focus{outline-offset:.15rem;outline:1px solid var(--nav_option_focus_LIGHT)}nav .menu_options button:not(:last-child){margin-right:1rem}.cards_section{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem}.dark_mode{background:var(--background_bg_gradient_DARK)}.dark_mode nav h1{color:var(--nav_title_color_DARK)}.dark_mode nav .menu_options button:focus{outline:1px solid var(--nav_option_focus_DARK);outline-offset:.2rem}.dark_mode .active{background-color:var(--nav_option_active_bg_color_active_DARK)!important;color:var(--nav_option_active_font_color_active_DARK)!important}.dark_mode .active:hover{background-color:var(--nav_option_active_bg_color_active_hover_DARK)!important}.dark_mode nav .menu_options button:not(.active){background-color:#2f364b;color:#fbfdfe;border:1px solid hsl(226,11%,37%)!important}.dark_mode nav .menu_options button:not(.active):hover{background-color:var(--nav_option_bg_color_DARK)}@media screen and (max-width: 476px){.cards_section,nav{flex-direction:column}}