/* -------------------------- global style ------------------------ */

:root{

    --primary:hsl(0, 59%, 20%);
    --primary-light:hsl(0, 59%, 40%);
    --primary-lighter:hsl(0, 59%, 60%);
    --primary-lighter-plus:hsl(0, 59%, 80%);
    --black:hsl(0, 0%, 0%);
    --grey:hsl(0, 0%, 20%);
    --grey-light:hsl(0, 0%, 40%);
    --grey-lighter:hsl(0, 0%, 60%);
    --grey-lighter-plus:hsl(0, 0%, 80%);
    --white:hsl(0, 0%, 100%);
}


*{
    padding:0;
    margin:0;
}


a{
    text-decoration:none;
    color:inherit;
}


html, body{
    height:100%;
    width:100%;
}


#root{
    width:100%;
}


.post-page{
    width:100%;
    min-height:100%;
    display:grid;
}


/* -------------------------- large screen global layout ------------------------ */

.post-page{
    grid-template-columns:auto 250px minmax(300px, 900px) auto;
    grid-template-rows:80px auto 80px;
    gap:20px;
}


.header{
    grid-column:1/-1;
    grid-row:1/2;
}

.footer{
    grid-column:1/-1;
    grid-row:3/4;
}


.side{
    grid-column:2/3;
    grid-row:2/3;
}

.post{
    grid-column:3/4;
    grid-row:2/3;
}


/* -------------------------- mobile global layout ------------------------ */

@media(max-width:800px){
    
    .post-page{
        grid-template-columns:20px auto 20px;
        grid-template-rows:80px max-content auto 80px;
    }


    .header{
        grid-column:1/-1;
        grid-row:1/2;
    }

    .footer{
        grid-column:1/-1;
        grid-row:4/5;
    }


    .side{
        grid-column:2/3;
        grid-row:2/3;
    }

    .post{
        grid-column:2/3;
        grid-row:3/4;
    }
}


/* -------------------------- header ------------------------ */

.header{
    display:grid;
    grid-template-columns:subgrid;
    background-color:var(--primary-light);
}

.header > a{
    grid-column:2/-1;
    color:var(--white);
    font-size:2rem;
    align-self:center;
}


/* -------------------------- side ------------------------ */

.side-in{
    display:flex;
    flex-direction:column;
    gap:20px;
    height:100vh;
    position:sticky;
    top:0;
    overflow:auto;
}

.side-item-wrap{
    display:contents;
}

.side-item{
    display:grid;
    grid-template-rows:150px max-content;
    padding:15px;
    border-radius:5px;
    background-color:var(--primary);
    gap:10px;
}

.side-item[active]{
    background-color:var(--primary-lighter);
}

.side-item[active] > a{
    background-color:var(--primary);
}

.side-item > a{
    padding-block:10px;
    font-size:1.1rem;
    color:var(--white);
    background-color:var(--primary-lighter);
    text-align:center;
    border-radius:5px;
}

.side-image-wrap{
    position:relative;
    border-radius:5px;
    overflow:hidden;
}

.side-image-wrap > img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

@media(max-width:800px){

    .side-item-wrap{
        width:250px;
        display:inline-block;
    }

    .side-in{
        width:max-content;
        height:auto;
        display:block;
        position:initial;
        top:initial;
        overflow:initial;
        mask-image:initial;
    }

    .side{
        position:sticky;
        z-index:1;
        top:0;
        overflow:auto;
        background-color:var(--white);
    }
}


/* -------------------------- post content ------------------------ */

.post{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.post-image-wrap{
    position:relative;
    aspect-ratio:3/2;
    border-radius:5px;
    overflow:hidden;
}

.post-image-wrap > img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.post-info{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.post-info > span{
    font-weight:bold;
    color:var(--primary);
    font-size:2rem;
}

.post-info > p{
    line-height:1.6;
    color:var(--grey-light);
    text-align:justify;
    font-size:1.2rem;
}

.post-info > a{
    padding:10px;
    border-radius:5px;
    color:var(--white);
    background-color:var(--primary);
    align-self:start;
}

.features, .technologies{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.features > span, .technologies > span{
    color:var(--primary-lighter);
    font-size:1.5rem;
    border-bottom:1px solid var(--primary-lighter);
}

.feature-list, .technology-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.feature-list li, .technology-list li{
    font-size:1.1rem;
    color:var(--grey-lighter);
    font-weight:bold;
    margin-left:40px;
}

.feature-list li::marker, .technology-list li::marker{
    color:var(--primary);
}


/* -------------------------- footer ------------------------ */

.footer{
    background-color:var(--primary-light);
    display:flex;
    justify-content:center;
    align-items:center;
}


.footer > a{
    color:var(--white);
}