:root{
    --pale-dogwood: hsla(10, 54%, 86%, 1);
    --dun: hsla(46, 14%, 72%, 1);
    --battleship-gray: hsla(77, 7%, 58%, 1);
    --reseda-green: hsla(110, 14%, 40%, 1);
    --cal-poly-green: hsla(145, 41%, 22%, 1);
}

*{
    padding:0;
    margin:0;
}

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

button{
    cursor:pointer;
    border-width:0;
    background-color:transparent;
    color:inherit;
    font-family:inherit;
    font-size:inherit;
}

input, textarea{
    font-family:inherit;
    font-size:inherit;
    border-width:0;

    &::placeholder{
        font-family:inherit;
        font-size:inherit; 
    }
}

body, html{
    height:100%;
}

body{
    display:grid;
    min-width:400px;
    grid-template-columns:minmax(40px, auto) minmax(320px, 750px) minmax(40px, auto);
    grid-template-rows:max-content auto max-content;
    row-gap:40px;
}

header{
    grid-column:2/3;
    display:flex;
    flex-direction:column;
    gap:30px;
    z-index:2;
}

main{
    grid-column:2/3;
    display:flex;
    flex-direction:column;
    gap:40px;
}


/* footer */
footer{
    grid-column:2/3;
    position:relative;
    padding-block:15px;
    display:flex;
    flex-direction:column;
    gap:20px;

    a{
        font-size:1.3rem;
        color:var(--reseda-green);
        font-weight:bold;
    }

    span{
        line-height:1.6;
        color:var(--reseda-green);
    }

    button{
        color:var(--cal-poly-green);
        border:1px solid var(--cal-poly-green);
        border-radius:5px;
        font-weight:bold;
        align-self:start;
        padding:15px;
    }

    &:after{
        content:"";
        display:block;
        position:absolute;
        width:100%;
        height:1px;
        bottom:100%;
        background-image:linear-gradient(to right, var(--cal-poly-green), transparent);
    }
}


/* post list */
.post-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap:20px;
}


/* pagination */
.pagination{
    display:flex;
    gap:15px;
    justify-content:center;

    a{
        padding-block:10px;
        padding-inline:15px;
    }

    a:not(.next, .prev){
        background-color:var(--reseda-green);
        border-radius:5px;
        color:white;
    }

    a[current-page]{
        background-color:var(--cal-poly-green);
        color:white;
    }

    .next, .prev{
        color:var(--cal-poly-green);
    }
}


/* post */
.post{
    display:flex;
    flex-direction:column;
    gap:15px;
    aspect-ratio:1/1;

    .post-header{
        flex-grow:1;
        position:relative;
        border-radius:10px;
        overflow:hidden;
        box-shadow:2px 2px 10px;

        &:hover > div{
            display:flex;
        }

        img{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            object-fit:fill;
        }

        > div{
            z-index:1;
            flex-direction:column;
            justify-content:center;
            gap:10px;
            align-items:center;
            height:100%;
            position:absolute;
            width:100%;
            left:0;
            top:0;
            background-color:rgba(0,0,0,0.7);
            display:none;

            a, form{
                padding:10px;
                background-color:var(--cal-poly-green);
                color:white;
                border-radius:calc(10px + 1rem);
                width:70px;
                text-align:center;
                font-size:0.8rem;
            }
        }
    }

    .post-footer{
        display:flex;
        flex-direction:column;
        gap:10px;

        span:first-child{
            font-size:1.1rem;
            color:var(--cal-poly-green);
            font-weight:bold;
        }

        span:last-child{
            color:var(--reseda-green);
        }
    }
}


/* brand */
.brand{
    position:relative;
    padding-block:15px;
    display:flex;
    flex-direction:column;
    gap:10px;

    > a{
        font-size:2.5rem;
        font-weight:bold;
        align-self:start;

        span:first-child{
            color:var(--cal-poly-green);
        }

        span:last-child{
            color:var(--reseda-green);
        }

    }

    > span{
        line-height:1.6;
        color:var(--reseda-green);
    }

    &:after{
        content:"";
        display:block;
        position:absolute;
        width:100%;
        height:1px;
        top:100%;
        background-image:linear-gradient(to right, var(--cal-poly-green), transparent);
    }
   
}


/* types */
.types{
    display:flex;
    gap:15px;

    a{
        font-size:1.5rem;
        padding-bottom:10px;
    }

    a:not([selected]){
        color:var(--reseda-green);
    }

    a[selected]{
       font-weight:bold;
       border-bottom:1px solid var(--cal-poly-green);
       color:var(--cal-poly-green);
    }

}


/* categories */
.categories{
    display:flex;
    flex-wrap:wrap;
    gap:15px;

    a{
        padding:10px;
        border-radius:5px;
        color:white;
    }

    a:not([selected]){
        background-color:var(--reseda-green);
    }

    a[selected]{
        background-color:var(--cal-poly-green);
    }
}



/* current location */
.current-location{
    display:flex;
    gap:5px;
    align-items:center;

    a, i{
        color:var(--reseda-green);
    }

    i{
        font-size:0.5rem;
    }

    a:last-child{
        color:var(--cal-poly-green);
        font-weight:bold
    }
}


/* preview */
.preview{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    /*  */
    height:100%;
    /*  */

    background-color:rgba(0,0,0,0.7);
    display:none;
    z-index:2;

    .preview-wrap{
        background-color:white;
        max-width:850px;
        height:100%;
        margin-inline:auto;
        display:flex;
        flex-direction:column;

        .preview-header{
            position:sticky;
            top:0;
            padding:10px;
            background-color:white;
            box-shadow: 2px 0 10px;
            clip-path: inset(0 0 -10px 0);

            button{
                font-size:1.3rem;
                padding:10px;
                color:white;
                background-color:var(--cal-poly-green);
                border-radius:5px;                
            }
        }

        .preview-content{
            flex-grow:1;
            border-width:0;
        }
    }
}


/* share */
.share{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    /*  */
    height:100%;
    /*  */

    background-color:rgba(0,0,0,0.7);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:2;
    
    .share-content{
        display:flex;
        flex-direction:column;
        gap:15px;
        padding:10px;
        width:300px;
        background-color:white;
        box-sizing:border-box;

        a{
            padding:10;
            border-radius:5px;
            background-color:var(--cal-poly-green);
            color:white;
            text-align:center;
        }
    }
}

/* contact */
.contact{
    display:flex;
    justify-content:center;
    align-items:center;
    position:fixed;
    width:100%;

    /*  */
    height:100%;
    /*  */

    background-color:rgba(0,0,0,0.7);
    left:0;
    top:0;
    z-index:2;
    display:none;

    .form-wrap{
        position:relative;
        background-color:white;

        form{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:20px;
            padding:20px;

            *:not(:first-child, :nth-child(2)){
                grid-column:1/-1;
            }

            textarea, input{
                padding:10px;
                background-color:var(--battleship-gray);
                color:white;

                &::placeholder{
                    color:white;
                }
                
                &:focus{
                    border:1px solid var(--cal-poly-green);
                    outline-width:0;
                }
            }

            textarea{
                height:150px;
            }

            button{
                padding:15px;
                color:white;
                background-color:var(--cal-poly-green);
                border-radius:5px;
            }
        }

        > button{
            position:absolute;
            top:-30px;
            left:100%;
            background-color:var(--cal-poly-green);
            color:white;
            padding-block:7px;
            padding-inline:5px;
            border-radius:calc(5px + 1rem);
            border:1px solid white;
        }
    }
}

@media(max-width:800px){
    .contact{

        .form-wrap{

            form{
                *{
                    grid-column:1/-1;
                }
            }
        }
    }
}