/* GENERAL */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --grey: #efefef; /* main grey background color */
    --grey-icon: rgba(175, 175, 175, 0.6);
    --grey-shadow: rgb(128, 128, 128, 0.3);
    --blue: #004aad; /* links */
    --blue-100: #c7ebff; /* button highlight */
    --blue-200: #007acc; /* logo & project page sidebar */
    --blue-300: #0c6aa1; /* selected button TEXT */
    --blue-400: #00325e; /* project page selected menu */
    --blue-500: #678498;
    --blue-101: #ccecf2; /* circle initials box */
    --blue-102: #afe3ff; /* seleted button */
    --blue-201: #4591bf; /* initials text */
    --brown: #c2ab7a; /* for folder icon */
    --gradient-btn: linear-gradient(270deg, #81aa86, #678498);
    --gradient-icon: linear-gradient(-90deg, #81aa86, #678498);
}

html {
    scroll-behavior: smooth;
}

/* BODY */

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: var(--grey);
}

/* DRY SETTINGS */

li {
    list-style: none;
}
h1 {
    font-size: 1.2rem;
    font-weight: normal;
}

h2 {
    font-size: 1rem;
    font-weight: normal;
}

p {
    font-size: 0.9rem;
}

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

.btn {
    font-size: 0.7rem;
    font-family: inherit;
    padding: 0.3rem;
    background: transparent;
    border: none;
    border-radius: 0.2rem;
    &:hover {
        cursor: pointer;
    }
}

a, .btn {
    transition: all 300ms ease;
}


/*  ~~~ HOME/LANDING PAGE ~~~ */

body.home-page {
    min-block-size: 100vh;
    display: grid;
    grid-template-columns: 13.7vw auto 24.7vw;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
       'header header header'
       'sidebar welcome welcome'
       'sidebar main intro'
       'sidebar main footer';
    column-gap: 4vw;
}

/* HEADER */

header {
    grid-area: header;
    padding: 1.1vh 3.1vw;
    width: 100%;
    height: 14vh;
    display: flex;
    justify-content: space-between;
    background-color: white;
}
.logo {
    display: flex;
    justify-content: space-between;

    /* Title setting */
    align-items: center;
    font-size: 2rem;
    font-size: clamp(1.1rem, 0.4614357262103508rem + 2.404006677796327vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.1rem;
    &:hover {
        cursor: default;
    }

    i {
        position: relative;
        font-size: 2.3rem;
        font-size: clamp(2.3rem, 1.8033388981636056rem + 1.8697829716193664vw, 3rem);
        align-content: center;
        padding-right: 0.8rem;
        padding-right: clamp(0.3rem, -0.0547579298831386rem + 1.335559265442404vw, 0.8rem);
        /* Icon colour */
        background: var(--blue-200);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
.creator {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;

    .circle {
        width: 2.3rem;
        height: 2.3rem;
        background: var(--blue-101);
        border-radius: 50%;
        position: relative;
        align-content: center;
        .initials {
            position: relative;
            width: inherit;
            height: auto;
            text-align: center;
            font-size: 1rem;
            font-weight: 600;
            color: var(--blue-201);
        }
    }

    .name {
        font-size: 1rem;
        font-weight: 600;
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
            color: var(--blue);
            font-size: 0.8rem;
            font-weight: 400;
        }
    }
}


/* SIDEBAR - NAV/MENU */

aside {
    grid-area: sidebar;
    overflow-x: hidden;
}

.menu {
    position: fixed;
    margin-top: 10vh;
    margin-left: -5px;
    height: 25vh; 
    width: 13.7vw;
    background: white;
    border-radius: 0.5rem;
    ul {
        height: 100%;
        padding: 1vh 0;
        margin-right: 0.5vw;
        margin-left: 1.2vw;
        align-items: center;
        display: grid;
        row-gap: 0.9vh;
        overflow: hidden;
        li {
            font-size: 1.1rem;
            font-size: clamp(0.7rem, 0.5325123152709359rem + 0.6305418719211824vw, 1.1rem);
            height: 6.3vh;
            padding: 0.65vh 1vw;
            border-radius: 0.35rem;
            align-content: center;
            overflow: hidden;
            &:hover {
                background: var(--blue-100);
            }
            i {
                font-size: 1.5rem;
                font-size: clamp(0.8rem, 0.506896551724138rem + 1.103448275862069vw, 1.5rem);
                padding-right: 0.5vw;
            }
            a {
                display: block;
            }
        }
        #nav-active {
            background: var(--blue-102);
            a {
                color: var(--blue-300);
            }
        }
        hr {
           border: none;
           height: 0.25vh;
           background-color: var(--grey);
           width: 90%;
           margin: 1% 5%;
        }
    }
}

/* WELCOME BANNER */
.welcome, .proj_page_title {
    grid-area: welcome;
    height: 10vh;
    align-content: center;
    h1 {
        padding: 2vh 0;
    }
}

/* MAIN */
main {
    grid-area: main;
    overflow: hidden;
}

/* Highlight Picture Box */
.highlight-container {
    width: auto;
    height: 21.2vh;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    img {
        width: 100%;
        align-content: center;
    }
}

/* Project Content Box */

.feat_proj-container {
    /* Left Side - Feature Project Text */
    display: flex;
    justify-content: space-between;
}

/* Right Side - Buttons */
.right-box {
    display: flex;
    justify-content: space-around;
    gap: 0.3rem;
    i {
        font-size: 1rem;
    }
    .grid:hover {
        background: var(--blue-100);
    }
}
.more-proj {
    background: white;
    padding: 0 0.5rem;
    margin: 0 0.3rem;
    font-size: 0.7rem;
    gap: 0.5rem;
    display: flex;
    align-items: center;
}
/* Folder Icon */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}
.material-symbols-outlined {
      align-content: center;
      size: 3rem;
      background: var(--brown);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
}

/* Featured Projects List & Grid View */
.main_content-container {
    display: grid;
    columns: 1;
    gap: 1.3vh;
    padding: 1.8vh 0;
}
.feat-proj-list {
    padding-left: 1.2vw;
    padding-right: 1.6vw;
    width: auto;
    height: 11vh;
    border-radius: 0.3rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 4.6vw auto;
    grid-template-rows: 1fr;
    grid-template-areas: 'icon title';
    gap: 0.2vw;
    &:hover {
        background: var(--blue-100);
    }

    .proj-icon {
        grid-area: icon;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 60%;
            height: auto;
            object-fit: contain;
        }
    }

    .proj_title {
        grid-area: title;
        height: auto;
        align-content: center;
        h2 {
            padding-bottom: 0.3rem;
        }
        p {
            font-size: clamp(0.7rem, 0.5935726210350584rem + 0.40066777963272127vw, 0.85rem);
        }
    }
}

/* List - Grid View Settings */
.list-view {
    grid-template-columns: 1fr;
}
.grid-view {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0.5vw;
    padding: 1.8vh 2vw;
    .proj_title {
        h2 {
            font-size: 0.85rem;
            font-size: clamp(0.85rem, 0.19999999999999984rem + 0.6666666666666667vw, 1rem);
        }
        p {
            font-size: 0.7rem;
            font-size: clamp(0.7rem, 0.2666666666666662rem + 0.44444444444444486vw, 0.8rem);
        }
    }
}
/* dynamic buttons(icons) depending on list-grid view */
.right-box button#list-view-btn.active,
.right-box button#grid-view-btn.active {
    background: var(--blue-102);
}
.right-box button#list-view-btn:not(:active),
.right-box button#grid-view-btn:not(:active) {
    &:hover {
        background: var(--blue-100);
    }
}

/* Grid View Styling */
.grid-view .feat-proj-list {
    background: white;
    border-radius: 0.5rem;
    padding: 0;
    height: 40vh;
    width: 15vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
        'grid-img'
        'grid-title';
    column-gap: 0.5vw;
    gap: 0;
    box-shadow: 5px 5px 10px var(--grey-shadow);
    &:hover {
        box-shadow: 0 0 0 5px var(--blue-102);
    }
    .proj-icon{
        grid-area: grid-img;
        width: 100%;
        height: 22vh;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .proj_title {
        grid-area: grid-title;
        overflow: contain;
        padding: 5px;
        align-content: start;
        h2 {
            padding-bottom: 0.5rem;
        }
        p {
            font-size: 1.6vh;
        }
    }
}

/* RIGHT SIDEBAR - INTRO */
.intro {
    grid-area: intro;
    margin-right: 5rem;
    p {
        margin-bottom: 1rem;
    }
}
.intro-container {
    margin-bottom: 1.5rem;
    width: 16vw;
    height: 21.2vh;
    background: white;
    border-radius: 0.3rem;
    box-shadow: 5px 5px 10px var(--grey-shadow);
    overflow: hidden;
    img {
        width: 100%;
        height: 100%;
        justify-content: space-around;
        align-content: center;
        object-fit: contain;
    }
}

/* FOOTER */
footer {
    grid-area: footer;
    p {
        font-size: 0.7rem;
        align-content: center;
        padding: 0.5rem 0;
    }
}


/*  ~~~ PORTFOLIO PAGE ~~~ */

body.portfolio-page {
    min-block-size: 100vh;
    display: grid;
    grid-template-columns: 13.7vw auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
       'header header'
       'sidebar main'
       'sidebar footer';
    column-gap: 4vw;
}

.project-container {
    height: 100%; /* as long as main has overflow set to hidden */
    width: 100%;
    p{
        padding: 1.5vh 0;
        padding-right: 5vw;
    }
    hr {
        border: none;
        height: 0.3vh;
        background-color: white;
        width: 95%;
        margin: 1% 0;
     }
}

.proj-list {
    display: grid;
    grid-template-columns: repeat(5, 10vw);
    grid-template-rows: auto;
    column-gap: 3vh;
    .proj-card {
        overflow: hidden;
        margin: 1.5vh 0;
        margin-left: 0.3vw;
        width: 100%;
        height: 22vh;
        border-radius: 0.5rem;
        background: white;
        box-shadow: 5px 5px 10px var(--grey-shadow);
        &:hover {
            box-shadow: 0 0 0 5px var(--blue-102);
        }
        img {
            height: 65%;
            width: 100%;
            object-fit: cover;
            overflow: hidden;
        }
        p {
            font-size: 0.7rem;
            font-size: clamp(0.7rem, 0.2666666666666662rem + 0.44444444444444486vw, 0.8rem);
            margin: 0;
            padding: 2px 5px;
        }
    }
}

/*  ~~~ CONTACT PAGE ~~~ */

body.contact-page {
    min-block-size: 100vh;
    display: grid;
    grid-template-columns: 13.7vw 30.3vw auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
       'header header header'
       'sidebar welcome welcome'
       'sidebar main form'
       'sidebar footer footer';
    column-gap: 4vw;
}

.contact-form {
    grid-area: form;
}

.contact-main {
    p {
        margin-bottom: 1rem;
    }
    a {
        color: var(--blue);
        font-style: italic;
    }
}

/* FORM SETTING */

.contact_right {
    display: flex;
    flex-direction: column;
    padding: 0 2rem; 
    gap: 1rem; 
    button {
        width: 23rem;
        height: 2.5rem; 
        border: none;
        border-radius: 0.3rem;
        background: var(--blue-500);
        color: white;
        font-size: 0.9rem;
        font-weight: bold;
        align-items: center;
        cursor: pointer;
        &:hover {
            background: var(--gradient-btn);
        }
    }
    .input-wrap {
        .contact-inputs {
            width: 23rem; 
            height: 2.5rem; 
            font-family: inherit;
            outline: none;
            border: transparent 3px solid;
            border-radius: 0.3rem;
            padding-left: 1rem;
            padding-right: 1.2rem;
            background-color: white;
            &:hover, &:focus {
                border: var(--blue-102) 4px solid;
            } 
        }
        i {
            position: relative;
            color: var(--grey-icon);
            font-size: 1rem;
            pointer-events: none;
            top: 50%;
            transform: translateY(-20%);
            right: 2rem;
        }
    }
}
.contact_right textarea {
    min-height: 8rem;
    padding: 0.5rem 1rem;
    ~ .icon {
        bottom: 6.5rem;
        transform: none;
    }
}

/*  ~~~ INDIVIDUAL PROJECT PAGE ~~~ */

body.project-page {
    min-block-size: 100vh;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
       'sidebar header header'
       'sidebar title details'
       'sidebar main main'
       'sidebar footer footer';
}

#side_menu {
    background-color: var(--blue-200);
    height: 100vh;
    z-index: 3; /* only with a fixed header */
    /* sidebar menu */
    overflow: hidden;
    padding-top: 10vh;
    width: 13.7dvw;
    /* fixed sidebar */
    position: sticky;
    top: 0;
    align-self: start;
    /* toggle collapse sidebar settings */
    transition: 300ms ease-in-out;
    text-wrap: nowrap;
}

/* toggle collapse sidebar settings */
#side_menu.close {
    width: 4.2vw;
}
/*from the 5th list onwards & horizontal bar will disappear as sidebar collapses */
#side_menu.close ul li:nth-child(n+5) { 
    display: none;
    transition: 150ms ease-in-out;
}
#side_menu.close hr {
    display: none;
    transition: 150ms ease-in-out;
}

.proj_menu {
    ul {
        padding: 0;
        height: 100%;
        display: grid;
        columns: 1;
        row-gap: 0.9vh;
        color: white;
        li {
            font-size: 1rem;
            height: 6.3vh;
            align-content: center;
            i {
                font-size: 4vh;
                padding: 0 1.2vw;
            }
        }
        
        /* Collapse sidebar */
        #toggle-btn {
            border: none;
            background: none;
            width: auto;
            color: white;
            cursor: pointer;
            transition: rotate 300ms ease;
            &:hover {
                color: var(--blue-400);
            }
        }
        .rotate {/* rotate icon when collapsing the sidebar */
            transform: rotate(180deg) translateY(3.5px);
        }

        #nav-active {
            padding: 0 1.2vw;
            background: var(--blue-400);
            pointer-events: none
        }
        #nav-idle {
            padding: 0 1.2vw;
            pointer-events: none;
            &:hover {
                background: none;
            }
        }
        a {
            color: white;
            height: 100%;
            padding: 0;
            align-content: center;
            display: block;
            &:hover {
                background: var(--blue-100);
                color: var(--blue-400);
            }
        }
        hr {
            border: none;
            height: 0.25vh;
            width: 80%;
            margin: 3% 10%;
            background-color: white;;
         }
    }
}

.proj-header {
    background-color: var(--grey);
    height: auto;
    width: 100%;
    padding: 2vh;
    justify-content: center;
    position: fixed; 
    z-index: 2; /* only with a fixed header */
    p {
        font-size: 0.8rem;
    }
}

.each-proj-title {
    grid-area: title;
    padding: 2.5vh 1vw;
    padding-left: 3vw;
    margin-top: 7vh; /* only with a fixed header */
    h1 {
        font-weight: bold;
        color: var(--blue-200);
    }
}
.proj-details {
    grid-area: details;
    margin: 2.5vh 3vw;
    margin-top: 9.5vh; /* only with a fixed header, 7vh + 2.5vh */
    width: 30vw;
    background:  white;
    border-radius: 0.4rem;
    p {
        padding: 0.5rem;
    }
}

.proj-content {
    padding: 1vh 3vw;
    padding-bottom: 2.5vh;
    p {
        padding-bottom: 0.8rem;
        line-height: 1.2rem;
    }
    li {
        list-style: disc;
        margin: 0 3vw;
    }
}

.screenshot-a {
    width: 65vw;
    height: auto;
    overflow: hidden;
    padding-bottom: 0.8rem;
    img {
        width: 100%;
        align-content: center;
    }
}

.proj-footer {
    padding-left: 3vw;
}

.wrapper-video {
    width: 800px;
    height: auto;
    padding: 2rem 5rem;
}

/* On html: <b>text</b> - bold text */