/* ################################################################## */
/* ############################# General ############################ */

/* Header */
header {
    grid-area: header;
    position: relative;
    h1 {
        margin: 0;
        padding: 0.5rem;
        font-size: 2rem;
        text-align: center;
        background-color: #2827278d;
        color: beige;
    }
    /* Navigation Bar */
    nav {
        height: 2rem;
        line-height: 2rem;
        #nav-overlay {
            height: inherit;
            line-height: inherit;
            position: fixed;
            display: flex;
            gap: 1rem;
            font-size: 1.2rem;
            background-color: #282727fa;
            width: 100%;
            z-index: 1;
            font-family: "Ubuntu";
            color: beige;

            /* Navigation Bar Collapse items, when menu short */
            #nav-show-button {
                color: inherit;
                display: none;
                background-color: inherit;
                font-family: inherit;
                text-align: left;
                padding: 0 0.5rem;
                width: fit-content;
                div {
                    color: inherit;
                    display: inline;
                }
            }
            #nav-show-button:hover {
                background-color: #646464aa;
            }
            #nav-show-button:active {
                background-color: #282727fa;
            }

            li, #login_signout_button{
                line-height: inherit;
                a {
                    display: block;
                    padding: 0 0.5rem;
                    line-height: inherit;
                }
            }
            #login_signout_button {
                margin-left: auto;
                font-size: 1rem;
                box-shadow: inset 0 0 0 0.1rem #282727;
                background-color: rgb(235, 235, 235);
                color: black;
                font-family:sans-serif; 
                :hover {
                    background-color: #bebebe;
                    box-shadow: inset 0 0 0 0.1rem #282727;
                }
                :active {
                    background-color: rgb(235, 235, 235);
                }
            }
            #selectedpage {
                background-color: #a29f9feb;
            }
            li:hover, #login_signout_button:hover {
                background-color: #a29f9faa;
            }
            i {
                margin-right: 0.5rem;
                color:white;
            }
        }
    }
}

.show {
    display: inherit;
}

.hide {
    display: none;
}

/* Body */
body {
    min-height: 100vh;
    background-color: black;
}

/* Footer */
footer {
    color: inherit;
    grid-area: footer;
    text-align: center;
    font-size: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    li {
        display: inline;
        ::after{
            color: inherit;
            content: " |";
        }
    }
    #socials {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }
    li:nth-last-child(1) {
        ::after{
            content: "";
        }
    }
    a:hover {
        font-weight: bolder;
    }
}

/* Flex setup */
.container {
    color: white;
    display: flex;
    gap: 1.2rem;
    flex-direction: column;
    article {
        margin: 1rem;
    }
}

/* ################################################################## */
/* ############################# Fonts ############################## */
h1, h2, h3, h4, h5, h6, time {
    font-family: "Ubuntu";
    color: beige;
}
h1 {
    text-align: center;
    font-size: 4rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.2rem;
}
p {
    font-family: "Varela Round";
    color: gainsboro;
}

/* ################################################################## */
a, li, ul {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

/* ################################################################## */
/* ############################ Scrollbar ########################### */
::-webkit-scrollbar {
	width: 0.6rem;
    height: 0.6rem;
    background-color: black;
}
::-webkit-scrollbar-thumb {
	background: #282727fa; 
	border-radius: 0.7rem;
} 
::-webkit-scrollbar-thumb:active, ::-webkit-scrollbar-thumb:hover {
	background: bisque; 
}
::-webkit-scrollbar-corner {
    display: none;
}

/* ################################################################## */
/* ############################# Index Page ######################### */

#myself {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin: 0;
    height: 100vh;
    #aboutme {
        width: 50%;
        height: 50vh;
        margin: auto 1rem auto 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        div {
            overflow-y: scroll;
            p {
                margin-bottom: 0.5rem;
            }
        }
    }
    ::-webkit-scrollbar {
        width: 0.4rem;
    }
    figure {
        width: 50%;
        img {
            border-radius: 2rem;
            max-width: 100%;
            max-height: 80%;
        }
        figcaption {
            border-left: solid 0.3rem bisque;
            margin: 1rem;
            padding-left: 0.5rem;
            h1 {
                text-align: left;
                margin: 0;
            }
            p {
                font-size: 1.5rem;
                color: rgba(125, 125, 111, 0.702);
            }
        }
    }
}

/* ################################################################## */
/* ############################### Forms ############################ */

/* Text Area */
textarea {
    font-family: inherit;
    font-size: inherit;
    border: #adadad 0.2rem solid;
    width: 100%;
    box-sizing: border-box;
    padding: inherit;
    padding: 0.5rem;
    transition: all 0.7s;
    resize: none;
}
textarea:focus, textarea:not(:placeholder-shown) {
    border: black 0.2rem solid;
    outline: none;
}

.form-container {
    display: flex;
    flex-direction: column;
    color: black;
    background-color: #f2f2f2;
    min-height: inherit;
    
    form {
        font-family: sans-serif;
        margin: 10vh auto;
        width: 50%;
        height: auto;
        max-width: 23rem;
        background-color: white;
        border-radius: 0.8rem;
        box-shadow: 0 0.3rem 0.5rem 0 #00000042;
        padding: 2rem 1rem 2rem 1rem;
        font-size: 1rem;

        /* Input setup */
        .wrap-input {
            font-family: inherit;
            width: 100%;
            position: relative;
            padding: 0 0.3rem;
            box-sizing: border-box;
            margin: 3rem 0;
        }
        input[type="email"], input[type="password"], input[type="text"] {
            font-family: inherit;
            font-size: inherit;
            border: none;
            background-color: transparent;
            border-bottom: 0.2rem solid #adadad;
            font-family: inherit;
            width: 100%;
            box-sizing: border-box;
            height: 3rem;
            padding: inherit;
            transition: all 0.7s;
        }
        label {
            font-family: inherit;
            font-size: inherit;
            position: absolute;
            display: block;
            color: #999999;
            top: 1rem;
            padding: inherit;
            pointer-events: none;
            transition: all 0.4s;
        }
        
        /* Input focus: if placeholder not shown then text on input*/
        input:focus, input:not(:placeholder-shown) {
            border-bottom: black 0.2rem solid;
            outline: none;
        }
        input:focus + label, input:not(:placeholder-shown) + label {
            top: -1rem;
        }

        ::-webkit-scrollbar-track {  
            background-color: white; 

        }
        
        /* Submit, Reset and Preview button */
        input[type="submit"], input[type="reset"], #blog-post-preview {
            font-family: inherit;
            display: block;
            color: black;
            padding: 0.7rem 1rem;
            border: rgb(107, 103, 103) 0.2rem outset;
            background-color: rgb(236, 236, 236);
            border-radius: 0.5rem;
            cursor: pointer;
            margin: 1rem 0;
            font-size: 1.3rem;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            transition: all 0.5s;
        }
        /* Submit and Reset Flexbox */
        #blog-post-input-container {
            display: flex;
            flex-direction: row;
            gap: 1rem;
            justify-content: center;
        }

        input[type="reset"] {
            background-color: rgb(231, 231, 231);
        }
        input[type="reset"]:hover {
            background-color: #ffd5d5;
        }
        input[type="reset"]:active {
            background-color: rgb(231, 231, 231);
        }
        input[type="submit"] {
            background-color: rgb(253, 240, 223);
        }
        input[type="submit"]:hover {
            background-color: #ffe6c6;
        }
        input[type="submit"]:active {
            background-color: rgb(253, 240, 223);
        }
        #blog-post-preview:hover {
            background-color: #b8b8b8;
        }
        #blog-post-preview:active {
            background-color: rgb(236, 236, 236);
        }
        
        input[type="submit"]:active, input[type="reset"]:active, #blog-post-preview:active {
            border-style: inset;
        }

        /* Extra Information */
        aside {
            background-color: #f8f8f8;
            font-size: 0.8rem;
            padding: 0.5rem;
            margin: 1rem;
            color: rgb(204, 204, 204);
            h1 {
                color: rgb(42, 42, 42);
            }
            a {
                color: rgb(94, 135, 162);
            }
            a:hover {
                font-weight: bold;    
            }
            h2 {
                font-size: inherit;
                color: inherit;
                text-decoration: underline;
                margin-bottom: 0.3rem;
            }
            p {
                color:inherit;
            }
        }
    }
}

.error {
    color: red;
    font-size: 0.8rem;
    margin: 0;
    p {
        color: inherit;
    }
}

/* ################################################################### */
/* ################################## List ########################### */

/* Content List */
.content-list {
    /* Felexbox setup */
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    /* Item */
    section {
        border-radius: 1rem;
        border: 0.3rem solid bisque;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        .item-inner-container {
            /* Background tint */
            background-color: rgba(0, 0, 0, 0.41);
            border-radius: inherit;
            padding: 0.7rem;
            /* Grid setup */
            display: grid;
            gap: 0.5rem;
            grid-template-areas:
                'title title other-information'
                'skills information aside'
                'skills information extra';
            grid-template-columns: 2fr 5fr 2fr;
            h2 {
                grid-area: title;
            }
            #skills {
                grid-area: skills;
            }
            .other-information {
                grid-area: other-information;
                text-align: right;
                font-size: 2rem;
                color: beige;
            }
            .main-information {
                grid-area: information;
                min-width: 50vw;
            }
            aside {
                grid-area: aside;
            }
            table {
                grid-area: extra;
                /* Table setup */
                border: 0.3rem solid bisque;
                tr {
                    color:white;
                    background-color: #282727bc;
                    th {
                        color: white;
                        font-weight: bold;
                        border: 0.1rem solid bisque;
                        padding: 0.5rem;
                    }
                    td {
                        color: inherit;
                        border: 0.1rem solid bisque;
                        padding: 0.2rem;
                        text-align: center;
                    }
                    td:nth-child(1) {
                        text-align: left;
                    }
                }
            }
            .media {
                grid-area: extra;
                margin-left: auto;
                a {
                    font-family: "Varela Round";
                    font-size: 1.5rem;
                    i {
                        color: inherit;
                        padding-right: 0.3rem;
                    }
                }
            }
        }
        a {
            color:antiquewhite;
        }
        a:active {
            color:inherit;
        }
        a:hover {
            text-decoration: underline;
        }
        aside {
            padding: 0.4rem;
            background-color: rgba(173, 54, 54, 0.646);
        }        
    }
}

/* Box list container */
.box-list {
    background-color: #ffffff2f;
    padding: 0.5rem;
    border-radius: 0.5rem;
    height: fit-content;
    margin: 1rem;
    h2, h3 {
        text-align: center;
        background-color: rgb(36, 28, 20);
        color: white;
        padding: 0.3rem;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    ul {
        list-style: none;
        padding: 0.3rem;
        border-radius: 0 0 0.5rem 0.5rem;
        background-color: white;
        li {
            color: black;
            padding: 0.3rem;
            font-family: sans-serif;
            margin: auto 0.3rem;
            line-height: 1rem;
            p {
                color: inherit;
                margin: inherit;
            }
        }
    }
}

/* Row List, with flexbox, uses scrolling */
.row-list {
    margin: 1rem;
    ul {
        overflow-x: scroll;
        display: flex;
        flex-direction: row-reverse;
        margin: 1rem auto 1rem auto;
        li {
            min-width: 30%;
            border-right: solid white 0.2rem;
            padding: 1rem;
            p {
                font-size: 0.8rem;
                margin-top: 0.5rem;
            }
            a:hover {
                text-decoration: underline;
                color: rgb(252, 205, 148);
            }
            a:active {
                color: inherit;
            }
        }
        li:first-child {
            border-right: none;
        } 
    }
}


/* ################################################################## */
/* ############################### Blog ############################# */

.post_comment_delete {
    grid-area: delete;
    cursor: pointer;
    color: white;
    margin-left: auto;
    i {
        color: inherit;
        font-size: 0.9rem;
    }
}

#blog-error {
    color: red;
    font-size: 0.8rem;
    margin: 0.5rem;
    p {
        color: inherit;
    }

}

#blog {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    #preview {
        background-color: #0b8ca92b;
        box-shadow: inset 0 0 0 0.2rem #0b8ca92b;
    }
    article {
        width: 70%;
        margin: auto;
        padding: 1rem;
        display: grid;
        grid-template-areas:
            'comments time'
            'comments title'
            'comments content'
            'delete author';
        grid-template-columns: min-content auto;
        flex-direction: column;
        gap: 0.4rem;
        time {
            grid-area: time;
            margin-left: auto;
        }
        h3 {
            grid-area: title;
        }
        .content {
            grid-area: content;
            overflow-x: scroll;
        }
        .author {
            grid-area: author;
            margin-left: auto;
            font-size: 0.7rem;
            color: #a29f9f;
        }
        .comments_button {
            grid-area: comments;
            color: white;
            margin-top: auto;
            margin-bottom: auto;
            display: flex;
            flex-direction: row;
            gap: 0.1rem;
            a, i {
                color: inherit;
                font-size: 1.5rem;
            }
            p {
                color: inherit;
                cursor: pointer;
                font-size: 0.8rem;
            }
            margin-right: 0.5rem;
        }
        .comments_button:hover {
            color: #a29f9f;
        }
        .comments_button:active {
            color: white;
        }
        border-bottom: 0.2rem solid white;
    }
}
#addpost_button {
    margin-left: auto;
    margin-right: 2rem;
    box-shadow: inset 0 0 0 0.1rem #282727;
    padding: 0.5rem;
    background-color: rgb(235, 235, 235);
    color: black;
    font-family:monospace; 
}
#addpost_button:hover {
    background-color: #bebebe;
    box-shadow: inset 0 0 0 0.1rem #282727;
}
#addpost_button:active {
    background-color: rgb(235, 235, 235);
}

#blog-nav {
    display: flex;
    justify-content: space-between;
    margin: 0 1rem;
    color: #0b8ca9;
    i, p {
        color: inherit;
        font-size: 1.5rem;
    }
    a {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        cursor: pointer;
        color: white;
    }
    a:hover {
        color: #a29f9f;
    }
    a:active {
        color: white;
    }
}

#blog_full {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    time {
        margin-left: auto;
        font-size: 1.7rem;
    }
    h3 {
        font-size: 2.3rem;
    }
    .content {
        font-size: 1.5rem;
    }
    .author {
        margin-left: auto;
        font-size: 1rem;
        color: #a29f9f;
    }
    #comments {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border-bottom: 0.2rem solid white;
        border-top: 0.2rem solid white;
        padding: 1rem;
        form {
            display: flex;
            flex-direction: row;
        }
        #comments_list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            background-color: #2827275f;
            .comment {
                background-color: #2827278d;
                display: grid;
                grid-template-areas:
                'author time' 
                'content time'
                'delete delete';
                padding: 0.7rem;
                border: solid 0.1rem #282727;
                .comment_content {
                    grid-area: content;
                    padding: 0.5rem;
                    overflow-x: hidden;
                }
                time {
                    grid-area: time;
                    font-size: 1rem;
                    margin-left: auto;
                    padding: 0.5rem;
                }
                .comment_author {
                    grid-area: author;
                    font-size: 0.8rem;
                }
            }
        }


    }
}


#skill-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    ul {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        flex-wrap: wrap;
        li {
            background-color: #2827278d;
            padding: 0.5rem;
            border-radius: 0.5rem;
            color: white;
            font-size: 1.5rem;
            font-family: "Varela Round";
            i {
                color: white;
                padding-right: 0.5rem;
            }
        }
    }
}