*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1 {
    font-size: 56px;
}
p {
    color:hsl(292, 16%, 49%);
    font-size: 16px;
    line-height: 1.5rem;
}

body{
    height: 100vh;
    font-family: 'work sans', sans-serif;
    background-color: hsl(275, 100%, 97%);
    display: flex;
    justify-content: center;
    align-items: center;
    background-image:url(assets/images/background-pattern-desktop.svg) ;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 25px;
}

.header{
    display: flex;
    gap: 24px;
    margin-bottom: 50px;

}

main{
    max-width: 600px;
    background-color: white;
    border-radius: 10px;
    padding: 24px;
}


summary::after{
    content: '';
    position: absolute;         
    right: 0;                
    top: 50%;                   
    transform: translateY(-50%); 
    min-width: 20px;            
    min-height: 20px; 
    background-image:url(assets/images/icon-plus.svg) ;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right ;
    transition: transform 0.3s ease;
}

details[open] summary::after {
    background-image:url(assets/images/icon-minus.svg) ; 
    width: 100%;
}





summary {
    min-height: 44px;           
    padding-right: 30px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer; 
    position: relative;
}

details{
    padding: 24px 0;
}

h2{
    font-size: 20px;
    margin-bottom: 16px;
}

hr {
    border : 1px solid #ebebeb;
}

@media screen and (max-width: 768px) {
    
    body {
        padding: 15px;          
        background-image: url(assets/images/background-pattern-mobile.svg); 
    }

    main {
        max-width: 100%;       
        margin: 0 10px;         
    }

    h1 {
        font-size: 32px;        
    }

    h2{
        font-size: 18px;
        margin-bottom: 14px;
    }

    .header {
        gap: 16px;              
        margin-bottom: 30px;    
    }
}