/* ---------------------------- global styling --------------------------- */

:root{
    --primary:green;
    --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;
}

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

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

body, html{
    height:100%;
    width:100%;
    overflow-x:hidden;
}

#container{
   height:100%;
   width:100%;
}


/* ---------------------------- sign form --------------------------- */

.sign-form-wrapper{
    width:100%;
    height:100%;
    background-color:var(--grey);
    display:flex;
    justify-content:center;
    align-items:center;
}

.sign-form{
    display:flex;
    flex-direction:column;
    gap:20px;
    background-color:var(--grey-light);
    padding:20px;
    border-radius:10px;
    box-shadow:2px 2px 10px;
    border:1px solid var(--grey-lighter-plus);
}

.sign-form-title{
    align-self:center;
    font-weight:bold;
    color:var(--grey);
    font-size:1.5rem;
}

.sign-form-field{
    padding:10px;
    border-radius:5px;
    color:var(--grey-light);
}

.sign-form-field::placeholder{
    color:var(--grey-light);
}

.sign-form-submit{
    color:var(--white);
    padding:10px;
    border-radius:5px;
    background-color:var(--grey);
    border:1px solid var(--grey-lighter);
}

.sign-form-action{
    color:var(--white);
}

.sign-form-error{
    font-size:0.8rem;
    color:rgb(194, 102, 102);
    line-height:1.6;
    text-align:center;
}

/* ---------------------------- home --------------------------- */

.home{
    position:relative;
    width:100%;
    min-height:100%;
    display:grid;
    grid-template-columns:auto 300px minmax(300px, 800px) auto;
    background-color:var(--grey);
    left:0;
    transition:left 0.5s;
    min-width:300px;
}


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

.side{
    background-color:var(--grey-light);
    display:grid;
    grid-template-rows:120px auto;
    grid-column:2/3;
    height:100vh;
    position:sticky;
    top:0;
    gap:30px;
    overflow-y:auto;
}


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

.side-header{
    display:flex;
    flex-direction:column;
    padding-inline:20px;
    justify-content:center;
    position:sticky;
    top:0;
    gap:20px;
    box-shadow:0 0 5px;
    clip-path: inset(0  0 -5px  0);
    background-color:var(--grey-light);
}

.side-header > button{
    align-self: start;
    color:var(--grey-lighter-plus);
    background-color:rgb(194, 102, 102);
    padding:10px;
    border:1px solid var(--grey-lighter-plus);
}

.user-info{
    display:flex;
    justify-content:space-between;
}

.user-info > span{
    font-size:1.3rem;
    color:var(--white);
}

.user-info > button{
    color:var(--white);
    font-size:1.3rem;
    display:none;
}

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

.side-body{
    display:flex;
    flex-direction:column;
    gap:30px;
    padding-inline:20px;
    padding-bottom:20px;
}

.side-body > button{
    align-self:center;
    padding:10px;
    background-color:var(--grey-lighter-plus);
    color:var(--grey);
    border:1px solid var(--grey)
}

.quick-access{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.quick-access-item{
    display:flex;
    justify-content:space-between;
   
}

.quick-access-item > *{
    color:var(--grey-lighter-plus);
}

.collections, .tags{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.collection-list, .tag-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.collection-header, .tag-header{
    display:flex;
    justify-content:space-between;
    border:1px solid var(--grey-lighter);
    padding:10px;
    background-color:var(--grey)
}

.collection-header > *, .tag-header > *{
    color:var(--white);
}

.collection-item, .tag-item{
    display:flex;
    justify-content:space-between;
}

.collection-item > *, .tag-item > *{
    color:var(--grey-lighter-plus);
}

.collection-item > button:last-of-type, .tag-item > button:last-of-type{
    display:none;
}

.collection-item:hover > button:last-of-type, .tag-item:hover > button:last-of-type{
    display:initial;
}

.collection-item:hover > span, .tag-item:hover > span{
    display:none;
}

.current-selection > *{
    color:var(--grey);
}


/* ---------------------------- main --------------------------- */

.main{
    display:grid;
    grid-template-rows:120px auto;
    position:relative;
    grid-column:3/4;
}

.main-overlay{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(255, 255, 255, 0.7);
    z-index:2;
}


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

.main-header{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-inline:20px;
    box-shadow:0 0 5px;
    justify-content:center;
    clip-path:inset(0 10px -5px 10px);
    position:sticky;
    background-color:var(--grey);
    top:0;
    z-index:1;
}


.brand{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.brand > a{
    text-decoration:none;
    font-size:1.3rem;
    color:var(--white);
}

.brand > button{
    font-size:1.3rem;
    color:var(--white);
    display:none;
}

.search{
    background-color:var(--grey-light);
    padding:10px;
    display:flex;
    gap:10px;
    align-self:start;
}

.search > input{
    background-color:transparent;
    color:var(--grey-lighter-plus);
}

.search > input:focus{
    outline-width:0px;
}

.search > input::placeholder{
    color:var(--grey-lighter-plus);
}

.search > span{
    color:var(--grey-lighter-plus);
}


/* ---------------------------- main body --------------------------- */

.main-body{
    padding:20px;
    display:flex;
    gap:30px;
    flex-direction:column;
}

.main-body > span{
    text-transform: capitalize;
    font-size:1.3rem;
    color:var(--white);
}

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


/* ---------------------------- bookmark item --------------------------- */

.bookmark-item{
    padding:20px;
    display:grid;
    grid-template-rows:max-content auto;
    gap:20px;
    background-color:var(--grey-light);
    border-radius:10px;
    box-shadow:2px 2px 10px;
    border:1px solid var(--grey-lighter);
}

.bookmark-item-menu{
    position:relative;
    display:flex;
    justify-content: space-between;
    align-items:center;
}

.bookmark-item-menu > button{
    color:var(--white);
}

.bookmark-item-settings{
    display:none;
    flex-direction:column;
    gap:10px;
    padding:15px;
    top:100%;
    position:absolute;
    right:0;
    background-color:var(--grey);
    border:1px solid var(--grey-lighter);
    border-radius:5px;
    box-shadow: 2px 2px 10px;
}

.menu-open{
    display:flex;
}

.bookmark-item-settings > *{
    color:var(--grey-lighter-plus);
    background-color:var(--grey-light);
    padding:5px;
    font-size:0.9rem;
}

.bookmark-item-image{
    position:relative;
    height:50px;
    width:50px;
    border-radius:100%;
    overflow:hidden;
}

.bookmark-item-image > img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.bookmark-item-info{
    display:flex;
    flex-direction:column;
    gap:15px;
    align-self:end;
}

.bookmark-item-info > span{
    line-height:1.6;
}

.bookmark-item-info > span:last-of-type{
    color:var(--grey-lighter-plus)
}

.bookmark-item-info > span:first-of-type{
    font-size:1.1rem;
    color:var(--white);
}

.bookmark-item-info > a{
    text-decoration:none;
    color:rgb(115, 115, 209);
}


/* ---------------------------- manage bookmark --------------------------- */

.manage-wrapper{
    position:fixed;
    width:100%;
    height:100vh;
    background-color:rgba(255, 255, 255, 0.7);
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:3;
}

.manage{
    display:flex;
    flex-direction:column;
    background-color:var(--grey-light);
    gap:20px;
    padding-block:20px;
    border-radius:5px;
    border:1px solid var(--grey-lighter);
    box-shadow:2px 2px 10px;
}

.manage-header{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-inline:20px;
}

.manage-header > button{
    align-self:end;
    color:var(--white);
    font-size:0.8rem;
}

.manage-search{
    display:flex;
    gap:10px;
    background-color:var(--grey);
    padding:10px;
}

.manage-search > *{
    color:var(--grey-lighter);
}

.manage-search > input{
    background-color:transparent;
}

.manage-search > input:focus{
    outline-width:0;
}

.manage-search > input::placeholder{
    color:var(--grey-lighter);
}

.manage-body{
    display:flex;
    flex-direction:column;
    gap:20px;
    max-height:250px;
    overflow-y:auto;
    padding-inline:20px;
}

.manage-item{
    display:flex;
    justify-content:space-between;
}

.manage-item > *{
    color:var(--grey-lighter-plus);
}


/* ---------------------------- user form --------------------------- */

.user-form-wrapper{
    position:fixed;
    height:100vh;
    width:100%;
    background-color:rgba(255, 255, 255, 0.7);
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:3;
}

.user-form{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:20px;
    background-color:var(--grey-light);
    border-radius:10px;
    border:1px solid var(--grey-lighter);
    box-shadow:2px 2px 10px;
}

.user-form > button{
    align-self:end;
    font-size:0.8rem;
    color:var(--white);
}

.user-form > span{
    color:rgb(194, 102, 102);
    font-size:0.rem;
    text-align:center;
    line-height:1.6;
}

.user-form-detail{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.user-form-detail > span{
    text-align:center;
    font-size:1.3rem;
    color:var(--grey);    
}

.user-form-detail > input{
    padding:10px;
    color:var(--grey);
    border-radius:5px;
}

.user-form-detail > input::placeholder{
    color:var(--grey);
}

.user-form-detail > button{
    padding:10px;
    background-color:var(--grey);
    color:var(--white);
    border:1px solid var(--grey-lighter);
    border-radius:5px;
}

.user-form-detail .disabled{
    background-color:var(--grey-light);  
    cursor:initial;
    color:var(--grey-lighter);  
}


@media(max-width:800px){

    .brand > button{
        display:initial;
    }

    .user-info > button{
        display:initial;
    }

    .home{
        width:calc(300px + 100%);
        grid-template-columns:300px auto;
        left:-300px;
    }

    .side{
        grid-column:1/2;
    }

    .main{
        grid-column:2/3;
    }

    .main-overlay-show{
        display:initial;
    }

    .side-open{
        left:0;
    }
}