*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
/* header section */
.header{ 
    display: grid;
    grid-template-columns: auto;
    background-color: rgba(0, 0, 0, 0.918);
    box-shadow: 2px 2px 2px rgba(154, 240, 117, 0.562);
}
.header .container{
    position: relative;
    height: 110px;
    width: 100%;
}
.logo-img{
    position: absolute;
    width: 30%;
    padding-left: 25px;
    padding-top: 5px;
    left: 0;
}
 .logo-img img{
    position: absolute;
    width: 80px;
}
.name{
    position: relative;
    width: 70%;
    left: 10px;
    padding-left: 20px;
    padding-top: 5px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.name h1{
    text-decoration: none;
    font-size: 3em;;
    font-style: oblique;
    color: white;
    text-shadow: 2px 2px 2px rgba(226, 170, 170, 0.562), 2px 2px 2px rgba(250, 248, 248, 0.562), 2px 2px 2px rgba(148, 106, 247, 0.562);
}
.name p{
    text-decoration: none;
    font-size: 1em;;
    font-style: oblique;
    color: white;
    text-shadow: 2px 2px 2px rgba(232, 241, 98, 0.979);
}

@media screen and (max-width:850px) {

    .logo-img { padding: 0; }
    .name { left: 30px; padding: 0;}
    .name h1{    font-size: 2em; }
}

@media screen and (max-width:650px) {
    .logo-img {width: 50%;}
    .name {width: 50%;}
   
}


/* content box */
.content-box{
    padding: 10px;
    background-color: rgba(230, 227, 227, 0.747);
    text-align: center;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-shadow:  5px 5px 10px rgba(12,12,12,0.2);
}
.container{
    display: flex;
    grid-template-columns: auto auto auto auto;
    position: relative;
    justify-content: center;
    gap: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
}
.box{
    display: flex;
    position: relative;
    width: 150px;
    height: 100px;
    justify-content: center;
    border: 0px solid black;
    background-color: rgb(255, 255, 255);
    box-shadow: 10px 10px 10px rgba(12,12,12,0.2);
    padding: 2px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: indigo;
    flex-wrap: wrap;
}
h5{
    text-align: center;
    font-style: italic;
    font-size: 1em;
}
h4, h3{
    text-align: center;
    font-style: italic;
}
.box .one{
    position: absolute;
    justify-content: center;
    top: 15%;
    font-size: 1em;
    color: rgba(12, 12, 12, 0.562);
}
.box .two{
    position: absolute;
    justify-content: center;
    top: 55%;
    font-size: 1em;
    color: rgba(12, 12, 12, 0.562);
}
.box #one{
    position: absolute;
    justify-content: center;
    top: 35%;
    font-size: 0.5em;
}
.box #two{
    position: absolute;
    justify-content: center;
    top: 80%;
    font-size: 0.5em;
}
.box .single{
    position: absolute;
    justify-content: center;
    top: 40%;
    font-size: 1em;
    color: rgba(12, 12, 12, 0.562);
}
.box #single{
    position: absolute;
    justify-content: center;
    top: 70%;
    font-size: 1em;
}
.box hr{
    position: absolute;
    top:50%;
    width: 70%;
    height: 1px;
}
.container-partition{
    position: relative;
    background-color: rgba(230, 227, 227, 0.747);
    justify-content: center;
}
.partition-line{
    position: absolute;
    box-sizing: border-box;
    background-color: rgb(7, 5, 5);
    opacity: 0.5;
    width: 90%;
    height: 2px;
    justify-content: center;
    box-shadow: 2px 2px 5px rgba(226, 170, 170, 0.562);
    margin-left: 5%; 
}

/* canvas trends */
.trend-section{
    display:flex;
    position: relative;
    width:100%;
    justify-content: center;
}
.trend{
    display:block;
    position:absolute;
    height:370px;
    width:95%;
    justify-content: center;
    border:1px solid white;
    z-index: 10;
}
.trend::before{
    content:'';
    display:block;
    background-color:white;
    width:100px;
    height:15px;
    position:absolute;
    bottom:0px;
    right:0px;
    border:1px solid white;
    z-index: 100;
}
.trend::after{
    content:'';
    display:flex;
    background-color:white;
    width:100px;
    height:15px;
    position:absolute;
    bottom:0px;
    border:1px solid white;
    z-index: 200;
}