/*ASSETS REPOSITORY*/
:root{
    /* --header-overlay:linear-gradient(to bottom, #3c4242a1, #1a1c1ca1); */
    --header-overlay:linear-gradient(to bottom, #ee1111a5, #ee1111a5);
}
/*ASSETS REPOSITORY END*/

/* IMPORTING fONTS */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&family=Quicksand:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');
/* IMPORTING fONTS END*/

/* GLOABAL STYLING */
*{
    box-sizing: border-box;
}
ol, ul, li{
    list-style: none;
    margin:0; padding:0;
}
img{
    width:100%;
}
a:link{
    text-decoration:none;
}
p, li{
    line-height: calc(30px + 1vw);
}
a{
    color: red;
    font-weight: bold;
}
/* GLOABAL STYLING END*/

/* body */

body{
    min-width: 100%;
    position:relative;
    margin:0;
    display: grid;
    grid-template-columns:1fr;
    row-gap: calc(100px - 1vw);
}
/* body > header */
    header{
        /* grid-area:1/1/2/2; */
        min-width: 100%;
        height: 100%;
        display:inline-block;
        position: relative;
    }
    .overlay{
        min-width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        right: 0;
        left: 0;
        position: fixed;
        background: var(--header-overlay), url(banner.png); 
        background-size:auto auto;
        background-position:  center top;
        background-attachment: fixed;
        background-repeat: no-repeat;
        z-index: -5;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
    }

/* body > header END*/

/*  body > profile */
    .profile{
        grid-area: 2/1/3/2;
        position:relative;
        width: 100%;
        display: flex;

        


    }
    #img-div{
        width: 100%;
        transform: translateY(calc(45px - 2.4vw) );
        position:relative;
/*!to remove for FCC test*/
        padding-left: 5%;
/*!to remove for FCC test*/

/*!just for passing the FCC test bellow */
        /* display: inline-flex;
        flex-direction: column;
        align-items: center; */
/* !just for passing the FCC test above */
    }
    @media (max-width:330px){
        #img-div{
            width: auto;
            transform: translateY(calc(45px) );
        }    
    }

        
        #image{
            border-radius: 50%;
            position: absolute;
            width:calc(80px + 3vw);
            display:inline-block;
            animation: photo 5s infinite linear;
            
        }
        @keyframes photo{
            0%{
                transform: scale(1, 1);
                border: 5px double rgb(153, 0, 255);
            }
            12.5%{
                transform: scale(1.1, 1.1);
                border: 5px double rgb(255, 1, 181);
            }
            25%{
                transform: scale(1.2, 1.2);
                border: 5px double rgb(255, 2, 27);
            }
            37.5%{
                transform: scale(1.1, 1.1);
                border: 5px double rgb(255, 111, 6);
            }
            50%{
                transform: scale(1, 1);
                border: 5px double rgb(255, 246, 5)  ;
            }

            62.5%{
                transform: scale(0.9, 0.9);
                border: 5px double #12ff21;
            }
            75%{
                transform: scale(0.8, 0.8);
                border: 5px double #0bfff1;
            }
            87.5%{
                transform: scale(0.9, 0.9);
                border: 5px double #0714ff;
            }
            100%{
                transform: scale(1, 1);
                border: 5px double rgb(153, 0, 255);
            }

        }
/*  body > profile END*/

/* body > main */
    main{
        grid-area: 3/1/4/2;
        width: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
/* body > main > intro */
        .intro{
            padding:calc(100px + 6vw) 5% calc(5px + 6vw);
            width:100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
            .title, h1{
                font-size: calc(1.5rem + 1vw);
                font-family: 'Quicksand', sans-serif;            
            }
            h1{
                width: 100%;
                text-align: center;
                position: relative;
                font-size: calc(1rem + 2vw);
            }
            h1::before, h1::after{
                content: "";
                display:inline-block;
                border-top: 2.8px solid red;
                width: calc(10px + 15vw + 1rem);
                margin:0 1rem;
                transform: translateY(-.7rem); 
            }
            @media (min-width:370px) and (max-width:800px){
                h1::before, h1::after{
                    content: "";
                    display:inline-block;
                    border-top: 2.8px solid #f00;
                    width: calc(10px + 8vw);
                    transform: translateY(-.5rem); 
                }
            }
            @media (max-width:369.999999px){
                h1::before, h1::after{
                    content: "";
                    display:inline-block;
                    border-top: 2px solid #f00;
                    width: calc(0px + 8vw);
                    margin:0 0rem;
                    transform: translateY(-.3rem); 
                }
            }
            .phrase{
                text-align: center;
                font-size: calc(1rem + 1vw);
                line-height:calc(1rem + 2vw) ;
                padding: 3%;
                font-family: 'Nanum Myeongjo', serif;            
            }
/* body > main > .intro ENDS*/

/* body > main > .tribute-info ENDS*/
            #tribute-info{
                width:100%;
                min-height:100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
                .first{
                    width:100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    box-sizing: border-box;
                    margin:0; padding:0;
                    
                }
                    .ndila{
                        width:calc(100% - 20%);
                        height: auto;
                        max-width:800px;
                        margin: 0 auto;
                        position: relative;
                        box-sizing: border-box;

                    }
                    .ndila ol{
                        padding:1% 5%;
                        background-color: rgb(231, 203, 203);
                        margin-bottom: 10%;
                        border: 8px double red;
                        border-radius: 5%;
                    }
                    .productions{
                        width:calc(100% - 20%);
                        height: auto;
                        max-width:800px;
                        background-color: #e7cbcb;
                        border: 8px double red;
                        border-radius: 5%;
                        padding:1% 5%;
                        margin-bottom: 10%;
                    }
/* view in laptops and bigger devices */
                    @media (min-width:768px){
                        body{
                            font-size: calc(15px + 0.5vw);
                        }
                        .ndila::before{
                            content:"";
                            position: absolute;
                            height: 100%;
                            width:calc(2px + 0.5vw );
                            left:50%;
                            transform: translateX(-50%);
                            background: #000;
                        }
                        .ndila ol{
                            width:50%;
                            margin-bottom:10%;
                            position: relative;
                            box-sizing: border-box;
                            background-color: rgb(231, 203, 203);
                            border: 8px double red;
                        }
                        .ndila ol:last-child{
                            margin-bottom:0;
                        }    
                        .ndila ol:nth-child(odd){
                            float:left;
                            clear: right;
                            transform: translateX(-30px);
                            border-radius: calc(20px + 1vw) 0 calc(20px + 1vw) calc(20px + 1vw);
                        }
                        .ndila ol:nth-child(even){
                            float:right;
                            clear: left;
                            transform: translateX(30px);
                            border-radius: 0 calc(20px + 1vw) calc(20px + 1vw) calc(20px + 1vw);
                        }
                        .ndila ol::after{
                            content:"";
                            position:absolute;
                            width:50px;
                            height:50px;
                            background: no-repeat;
                            top:0;
                            background: url(quincy-face.jpg);
                            background-size: contain;
                            background-position: center;
                            border-radius:50%;
                        }
                        .ndila ol:nth-child(odd)::after{
                            right:calc(-68px);
                            top:calc(-50px - (0.5vw));
                            animation:photo 5s infinite linear;
                            animation-delay: -1s;
                        }
                        .ndila ol:nth-child(even)::after{
                            left:-68px;
                            top:calc(-50px - (0.5vw));
                            animation:photo 5s infinite linear;
                            animation-delay: -5s;
                        }
                    }
/*view in laptops and bigger devices END*/

/* body > main > .tribute-info ENDS*/

/* body > main END*/
            .footer{
                width: 100%;
                position: relative;
                display: flex;
                justify-content: center;
                background-color: #e7cbcb;
            }
            .footer ul{
                margin: 0;
                padding: 0;
            }
            .text{
                width: calc(100% - 50px);
                text-align:center
            }
            .social{
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
}   
                .icons{
                    width: 30%;
                    display:grid;
                    grid-template-areas: "lkd twt cdpn git";
                    justify-content: space-around;
                }
                    .icons li:nth-child(1){
                        grid-area: lkd;
                        width: calc(25px + 2vw);
                        margin-right:10%;
                    }
                    .icons li:nth-child(2){
                        grid-area: twt;
                        width: calc(25px + 2vw);
                        margin-right:10%;
                    }
                    .icons li:nth-child(3){
                        grid-area: cdpn;
                        width: calc(25px + 2vw);
                        margin-right:10%;
                    }
                    .icons li:nth-child(4){
                        grid-area: git;
                        width: calc(25px + 2vw);
                    }

/* body END*/