/* RESET */
html,body{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
img{
    display:block;
    max-width:100%;
}


/* CUSTOM PROPERTIES */
:root{
    /* COLOR */
    --clr-white: hsl(0, 0%, 100%);
    --clr-lightPink: hsl(275, 100%, 97%);
    --clr-grayishPurple: hsl(292, 16%, 49%);
    --clr-darkPurple: hsl(292, 42%, 14%);

    /* FONT SIZE */
    --fs-12:0.75rem;
    --fs-14:0.88rem;
    --fs-15:0.94rem;
    --fs-16:1rem;
    --fs-17:1.06rem;
    --fs-18:1.13rem;
    --fs-20:1.25rem;
    --fs-27:1.69rem;
    --fs-32:2rem;
    --fs-54:3.38rem;
    
    /* FONT WEIGHT */
    --fw-400:400;
    --fw-600:600;
    --fw-700:700;

    /* FONT FAMILY */
    --ff-work-sans:"Work Sans", sans-serif;
}
/* BODY */
body{
    font-weight:var(--fw-400);
    font-size:var(--fs-16);
    font-family:var(--ff-work-sans);
    line-height:1.6;
    color:var(--clr-grayishPurple);
    background-color: var(--clr-lightPink);  
    height:100vh;
}

/* COMPONENTS */

/* Header Container */
.header-container{
    position:relative;
    width:100%;
}
/* Desktop Background */
.desktop-bg{
    display:none;
}
/* Main Container */
.main-container{
    width:87%;    
    text-align:center;
    margin:0 auto;
    position:relative;
    min-height:100%;
}
/* Section Container */
.section-container{
    position:absolute;
    background-color:var(--clr-white);
    margin-top:-5.63rem;
    border-radius:0.63rem;    
    box-shadow: 0px 20px 20px hsl(276, 28%, 90%);
}
/* Logo Container */
.logo-container{
    display:flex;
    margin-left:7%;
    margin-top:4%;
}
/* Logo Image */
.logo-img{
    width:60%;
}
/* Title */
.title{
    font-size:var(--fs-32);
    margin-top:0.19rem;
    margin-left:0.5rem;
}
/* Description Container */
.description-container{
    margin-top:-1.44rem;
    margin-bottom:1.25rem;
}
/* question */
.question{
    font-size:var(--fs-16);
    font-weight: var(--fw-700);
    width:65%;
    line-height:1.3;
    margin-left:7%;
    position:relative;
    flex:1;
    text-align:left;   
}
/* answer */
.answer{
    font-size:var(--fs-14);
    width:85%;
    font-weight:var(--fw-600);
    margin-left:6.5%;
    margin-top:1.44rem;
    text-align:left;
    line-height:1.5;
    margin-bottom:2.94rem;
    color:hsl(293, 25%, 65%);
    display:none;
}
/* wrapper */
.wrapper{
    position:relative;
    display:flex;
    align-items:center;
}
/* plus and minus image */
.plus-img,.minus-img{  
   position:absolute;
   top:2%;
   left:89%;
   transform:translateX(-50%);
   cursor:pointer;
}
.plus-img:hover,
.minus-img:hover{  
    opacity:0.5;
}
.minus-img{  
    display:none;
}
h2{
    font-weight:var(--fw-400);
}
/* Horizontal rule */
.hr-grp{
    width:84%;
    margin-left:6.5%;
    background-color:var(--clr-lightPink);
    outline:none;
    border:none;
    height:1px;
}
.hr1{
    margin-bottom:1.56rem;
    margin-top:1.56rem;
}
.hr2{
    margin-top:1.56rem;
    margin-bottom:1.25rem;
}
.hr3{
    margin-top:1.06rem;
    margin-bottom:1.25rem;
}
/* Footer */
.footer{
    font-size:var(--fs-12);
    font-weight:var(--fw-600);
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}
.attribution a{
    color:var(--clr-darkPurple); 
    text-decoration:none;
}

@media (min-width:376px)  {
    /* Desktop Background */
    .desktop-bg{
        display:inline;
    }
    /* Mobile Background */
    .mobile-bg{
        display:none;
    }
    /* Header Container */
    .header-container{
        width:95%;
        margin:0 auto;
    }
    /* Main Container */
    .main-container{
        display:flex;
        justify-content:center;
        position:relative;
    }  
    /* Section Container */
    .section-container{
        margin-top:-3.13rem;
    } 
    /* question */ 
    .question{
        width:77%;   
    }
    /* answer */
    .answer{
        font-size:var(--fs-15);
    }    
}
@media (min-width:900px){
    /* Section Container */
    .section-container{
        margin-top:-4.38rem;
    } 
    /* question */
    .question{
        width:77%;   
        font-size:var(--fs-20);
    }
    /* answer */
    .answer{
        font-size:var(--fs-17);
    }

}
@media (min-width:1200px){
    /* Section Container */
    .section-container{
        margin-top:-10rem;
        width:45.5%;
        border-radius:0.94rem;
    }
    /* Logo Container */
    .logo-container{
        display:flex;
        margin-left:7%;
        margin-top:6%;
    }
    .logo-img{
        width:95%;
    }
    /* Title */
    .title{
        font-size:var(--fs-54);
        margin-top:-0.31rem;
        margin-left:1.38rem;
    }
    /* Description Container */
    .description-container{
        margin-top:-2.31rem;
        margin-bottom:2.75rem;
    }
    /* question */
    .question{
        font-size:var(--fs-18);
        width:77%;
        line-height: 1.3;
        margin-left:6.5%;
    }
    /* answer */
    .answer{
        font-size:var(--fs-16);
        width:87%;
        margin-top:1.56rem;
    }
    /* plus and minus image */
    .plus-img,.minus-img{
        top:-0.31rem;
        left:91%;
    }
    /* Horizontal rule */
    .hr-grp{
        width:86%;
    }
    .hr1{
        margin-bottom:1.63rem;
        margin-top:2rem;
    }
    .hr2{
        margin-top:1.69rem;
        margin-bottom:1.56rem;
    }    
    .hr3{
        margin-top:1.63rem;
        margin-bottom:1.63rem;
    }   
}