:root {

    --background-color:white;
    --box-color: lightgray;
    --menu-text-color: white;
    
    --apple-black: #3b3b3b;
    --apple-gray: #e3e3e3;
    --rogers-red: rgb(218, 41, 28);
    --logo-yellow: #ffc700;
    
    --text-color:rgb(59, 59, 59);           /*apple-black*/
    --text-color-light: rgb(150,150,150);
    --text-hover-color: rgb(218, 41, 28);   /*rogers-red*/
    --film-border-color: green;
    
    --body-color: #e3e3e3;                  /* apple-gray */
    --menu-color: rgb(218, 41, 28);         /*rogers-red*/
    --tag-color: rgb(218, 41, 28);

    --global-font-size: 18px;
    --global-font-weight: 400;

}

body
{
    background-color: white;
    font-display: block;
    font-family: "SF Pro Text","SF Pro Icons","Calibri", "Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: var(--global-font-size);
    font-weight: var(--global-font-weight);
    margin: 0px;
    position: relative;
    overflow-x:hidden;
}

#faq{
    color: var(--logo-yellow);
}

.main-container
{
    width:100%;
    margin:0px;
    position:relative;
    
    .question-container
    {
        display:flex;
        margin: auto;
        max-width:1024px;
        margin-top:20px;
        
        .question
        {
            margin: 0px 10px 0px 10px;
            font-size:32px;
            font-weight:550;
            color: var(--apple-black);
            
            .dull{
                color: var(--text-color-light);
            }
        }
    }
    .heading-container
    {
        display: flex;
        margin: auto;
        justify-content: center;
        max-width:1024px;
        margin-top:20px;
        
        .heading-data
        {
            font-size:32px;
            font-weight:550;
            position: relative;
            display: flex;
            flex-direction: row;
            background-color: var(--logo-yellow);
            padding:5px;
            border-radius:5px 5px 5px 5px;
            margin-bottom:5px;
            width:fit-content;
                
                .black-icon{
                    width:40px;
                    height:40px;
                    padding:5px;
                    border-radius:5px;
                    background-color: var(--apple-black);
                    color:white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .black
                {
                    width:auto;
                    height:40px;
                    padding:5px;
                    border-radius:5px;
                    background-color: var(--apple-black);
                    color:white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
                .yellow{
                    height:40px;
                    padding:5px;
                    margin: 0px 10px 0px 10px;
                    color: var(--apple-black);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
        }
    }
    .answer-container
    {
        display:flex;
        flex-direction: column;
        margin: auto;
        max-width:1024px;
        margin-top:20px;
        
        .answer
        {
            font-size:18px;
            font-weight:400;
            color: var(--apple-black);
            
            .head-container
            {
                display: flex;
                flex-direction: row;
            }
            
            .head{
                position: relative;
                display: flex;
                flex-direction: row;
                background-color: var(--logo-yellow);
                padding:5px;
                border-radius:5px 5px 5px 5px;
                margin-bottom:5px;
                width:fit-content;
                
                .num{
                    width:40px;
                    height:40px;
                    border-radius:5px;
                    background-color: var(--apple-black);
                    color:white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
                .title{
                    height:40px;
                    margin: 0px 10px 0px 10px;
                    color: var(--apple-black);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            
            .gallery{
                position: relative;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: var(--logo-yellow);
                color: var(--apple-black);
                height:40px;
                width:40px;
                padding: 5px;
                margin: 0px 5px 0px 5px;
                border-radius:5px 5px 5px 5px;
            }
            
            .points-container
            {
                padding:0px;
                
                .points
                {
                    font-weight: bold;
                    font-size:24px;
                    margin-bottom:20px;
                    
                    ul
                    {
                        background-color: var(--apple-gray);
                        border-radius: 0px 0px 5px 5px;
                        list-style-type: disc;
                        margin:0px;
                        
                        li
                        {
                            font-weight: 400;
                            font-size:18px;
                            margin-top:0px;
                            text-align: justify;
                            text-justify: inter-word;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (min-width: 1024px)
{
    .points-container{
        ul{
            padding: 20px 20px 20px 45px;
        }
    }
}

@media only screen and (min-width: 650px) and (max-width: 1023px)
{
    .main-container{
        width:95vw;
        margin:auto;
    }
    .points-container{
        ul{
            padding: 20px 20px 20px 45px;
        }
    }
}

@media only screen and (max-width: 649px)
{
    .main-container{
        width:95vw;
        margin:auto;
    }
    
    .points-container{
        ul{
            padding: 20px 20px 20px 35px;
        }
    }
}