* {
margin: 0;
padding: 0;}


:root {

	--background-primary: #F4F5FB;
	--background-secondary: #FFFFFF;

	--color-brand: #CA3884;
	--color-brand-hover: #A52C6B;
	--color-danger: #C93847;

	--content-primary: #080B12;
	--content-secondary: #374151;
	--content-tertiary: #9CA3AF;
	--always-white: #FFFFFF;

	--border-primary: #D1D5DB;
	--border-hover: #B9C2D0;


	--font-title: bold 1.5rem/1.6rem "Inter", sans-serif;
	--font-label: 600 1rem/1.25rem "Inter", sans-serif;
	--font-paragraph: 500 1rem/1.25rem "Inter", sans-serif;
	--font-link: 500 0.875rem/1rem "Inter", sans-serif;

}


body {

    width: 85.375rem;
    height: 48rem;
    background-color: var(--background-primary);
 



}

.titulo {
    
    width: 9.6875rem;
    height: 2.5rem;
    margin-inline: auto;
    margin-top:1.5625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0;
    
& p {

font: bold 26.76px "Sora", sans-serif;}

}     


.voltar {
    display: flex;
    align-items: center;
    background-color: inherit;
    border: none;
    margin-top: 3.875rem;
    margin-left: 23.0625rem;
    color: var(--color-brand);
    font: var(--font-link);

}

h1 {
    margin-top: 1rem;
    margin-left: 22.8125rem;
    font: var(--font-title);
     }

.add {
display: flex;
align-items: center;
width: 39.1875rem;
height: 2.75rem;
margin-left: 23.0625rem;
margin-top: 2.75rem;
gap: 1rem;

& input {

height: 100%;
width: 28.1875rem;
border-radius: 12px;
font: var(--font-paragraph);
color: var(--color-brand);
border: 2px solid var(--border-primary);
padding-left: 1.125rem;
}

& input:hover {

 border: 2px solid  var(--border-hover); }

& input:focus {

border: none;
outline: 2px solid var(--color-brand);
}

.add-item {
height: 100%;
width: 10rem;
border-radius: 12px;
background-color: var(--color-brand);
color: var(--always-white);
font: var(--font-label);
border:none;
}

& button:hover {
background-color: var(--color-brand-hover);
cursor: pointer;

}
}







ul {
height: 14.5rem;
width:39.1875rem;
margin-top: 2.5rem;
margin-left: 23.0625rem;


& li {
list-style: none;
border: 1px solid var(--border-primary);
width: 100%;
height: 3.06rem;
background-color: var(--background-secondary);
border-radius: 12px;
margin-bottom: 0.75rem;
display: flex;
align-items: center;

& label{
    position: relative;
   cursor: pointer;
   width: 33.1875rem;
   height: 2.0625rem;
   text-align: start;
   padding-top: 0.875rem;
   margin-inline: 0.75rem;
}

& input {
margin-left: 0.75rem;
display: none;

}

& label::before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
border: 1px solid var(--border-primary);
border-radius: 6px;
margin-right: .875rem;
}

 & input:hover + label::before {
    border: 1px solid var(--border-hover);
 }

& input:checked + label::before {

background-color: var(--color-brand);
border: 1px solid var(--color-brand);
background-image: url(assets/Vector-check.png);
background-position: center;
background-repeat: no-repeat;



}


}

& button {
    border: none;
    background-color: inherit;
    cursor: pointer;
   

}




}


.alert{
 border: 1px solid var(--color-danger);
 border-radius: 12px;
width: 39.1875rem;
height: 2.75rem;
margin-left: 23.0625rem;
margin-top: 2.75rem;
display: flex;
align-items: center;
background-color: var(--color-danger);
color: var(--always-white);
justify-content: space-between;
& div {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 0.75rem;      
    & img {
        margin-right: 0.90rem;}

    }
}

.button-alert {
    border: none;
    background-color: inherit;
    color: var(--always-white);
    margin-right: 1rem;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: bold;

}

    



@media (width <= 24.375rem) {  

    body {
        width: 100%;
        height: 100%; 
 }

 .voltar {
    margin-left: 2rem;
    
 }

h1 {
    margin-left: 2rem;}

.add {
    margin-left: 2rem;
    width: auto;
    flex-direction: column;
    
    & input {
        width: 20.125rem;
        height: 2.75rem;
        
        
    }

    .add-item {
        width: 100%;
        height: 20.75rem;
    }
}

ul {
    margin-left: 2rem;
    width: auto;
}






}