@font-face {
    font-family: 'Work Sans';
    src: url('assets/fonts/WorkSans-VariableFont_wght.ttf') format('truetype');  
}

:root{
    --White: hsl(0, 0%, 100%);
    --Light-pink: hsl(275, 100%, 97%);
    --Grayish-purple: hsl(292, 16%, 49%);
    --Dark-purple: hsl(292, 42%, 14%);
    --footer-color: hsl(228, 45%, 44%);
}

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: var(--Light-pink);
    background-image: url("assets/images/background-pattern-mobile.svg");
    background-repeat: no-repeat;
    background-size: contain;
    font-family: 'Work Sans';
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    gap: 5rem;
}

main{
    background-color: var(--White);
    border-radius: 10px 10px;
    padding: 30px;
    max-width: 17rem;
}

.title_container{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.title_container img{
    max-width: 30px;
}

.question_container{ 
    font-size: 1rem;
 }

.question_container label, .Card_Content h1{ color: var(--Dark-purple) }

.Card_Content h1{ 
    font-weight: 700; 
    font-size: 2rem;
}

.question_container label{ 
    font-weight: 600; 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 2em;
    gap: 2rem;
}

.question_container label:hover {
    color: var(--Grayish-purple);
    cursor: pointer
}

.question_container label .icon_container.open img {
    content: url('assets/images/icon-minus.svg');
}

.Card_Content p{
    color: var(--Grayish-purple);
    font-weight: 400;
}

input[type=checkbox]{ display: none }

.separation{ 
    border-top: solid var(--Light-pink) 2px
}

.content .inner{
    padding-bottom: 1em;
    padding-top: 1em;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.30s ease-in-out;
}

input:checked + label + .content .inner {
    height: auto;
    opacity: 1;
}

footer { text-align: center }
footer a { color: var(--footer-color) }

@media screen and (min-width: 26.625rem) {
    body{
        background-image: url("assets/images/background-pattern-desktop.svg");
        background-size: 100vw;
    }
    
    main{
        max-width: 30em;
    }

    .Card_Content h1{ 
        font-size: 3rem;
    }
}