:root{
    font-size: 16px;
    box-sizing: border-box;
  
    --bg-color:#ADD8E6;
    --headline-color: #4169E1;
    --text-color: #000080;
    --time-color: #5b08d6;
    --secondary-color: 	#AFEEEE;
    --media-caption-color: #8c7851;
    --tertiary-color: 	#98FB98;
    --border-color: #020826;
  }
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--secondary-color);
}
.main{
    background-color: var(--bg-color);
}

/*header*/
.header{
    padding: 1,4rem 0;
    text-align: center;
}
.title{
    display: inline-block;
    font-size: 2,4rem;
    color: var(--headline-color);
    border-bottom:  1px solid var(--text-color);
    margin-bottom: 0,15em;
    
}
.title-description{
    font-size: 1,3rem;
    color: var(--text-color);
}

@media (min-width:35em){
    .header{
        font-size: 1,1rem;
        color: var(--text-color);
        padding:  1,8em 0;
    }
    .title{
        font-size: 2,8rem;
    }
    .title-description{
        font-size: 1,3rem;
    }
}
@media (min-width:50em){

    .header{
        padding: 2em 0;

    }
    .title{
        font-size: 3rem;
    }
    .title-description{
        font-size: 1,5rem;
    }
    /*styling media*/  
}  .media{
        background-color:var(--border-color);
        width: 100%;
        padding: 3em 1,5em 1,5em;
        margin: 2em auto 1em;

    }
    .media_img{
        display: block;
        max-width: 100%; ;
        height:auto ;
        border-radius: 5px;
        border: 1px solid var(--border-color);
        margin: 0 auto;
    }

    .media_caption{
        color: var(--text-color);
        padding: 0 1rem;
        margin-top: 1,5em;
    }
    @media (min-width:35em){
        
        .media{
            padding: 4em 4em 1,5em;
        }
        .media_caption{
            margin-top: 1em;
        }
    }
    @media (min-width:50em){
        .media{
            padding:  5em 5em 3em;
        }
        .media_img{
            max-width: min(100%, 900px);
        }
        .media_caption{
            max-width: 720px;
            margin: 1em auto;
        }
    }
    /*styling article*/

    @media (min-width:35em){
        .tribute-info{
            max-width: 720px;
            margin: 0 auto;
        }
    }
    .headline{
        font-size: 1,8rem;
        font-weight: 400;
        text-align: center;
        color: var(--headline-color);
    }
    .list-of-time{
        padding:  0 4em;

    }
    .list-of-time *{
        margin-top: 1,2rem;
        
    }
    .list-of-time>li{
        font-size:  1,2rem;
        text-align: justify;
        color: var(--text-color);
    }
    .list-of-time .list-of-time{
        font-weight: 700;
    }
    .quote{
        color: var(--text-color);
        padding-top:  1em;
        border-top: 1px solid var(--text-color);
        margin: 2em 4em;
        text-align: center;

    }
    .quote>p{

        margin-bottom: 0,5em;
        /*sytling footer*/
    }
    .footer{
        background-color: var(--time-color);
        color:var(--text-color);
        font-size: 0,9em;
        font-weight:700;
        text-align: center;
        padding: 1,5em;
        
        }
        /*styling link footer (GiftHub)*/
        .footer a{
            text-decoration: none;
            color:var(--headline-color);
        }
        /*all elemnet*/
        *{
            box-sizing: inherit;
            padding: 0;
            margin: 0;
        }