/* LWTECH CSS - Must Work With Bootstrap */

:root {
    --lwt-primary-hue: 184;
    --lwt-primary-sat: 100%;
    --lwt-primary-lit: 50%;
    --lwt-primary-color: hsl(var(--lwt-primary-hue), var(--lwt-primary-sat), var(--lwt-primary-lit));

    --lwt-secondary-hue: 188;
    --lwt-secondary-sat: 36%;
    --lwt-secondary-lit: 53%;
    --lwt-secondary-color: hsl(var(--lwt-secondary-hue), var(--lwt-secondary-sat), var(--lwt-secondary-lit));

    --lwt-accent-hue: 83;
    --lwt-accent-sat: 71%;
    --lwt-accent-lit: 62%;
    --lwt-accent-color: hsl(var(--lwt-accent-hue), var(--lwt-accent-sat), var(--lwt-accent-lit));

    --lwt-paper-color: hsl(0, 0%, 98%);
    --lwt-text-color: hsl(var(--lwt-primary-hue), 20%, 40%);
    --lwt-header-color: hsl(var(--lwt-primary-hue), 20%, 10%);

    /* BUTTONS */
    --lwt-prime-btn-bg: var(--lwt-primary-color);
    --lwt-prime-btn-color: var(--lwt-primary-color);
    --lwt-prime-btn-border: 1px solid var(--lwt-primary-color);

    --lwt-sec-btn-bg: transparent;
    --lwt-sec-btn-color:var(--lwt-secondary-color);
    --lwt-sec-btn-border: 1px solid var(--lwt-secondary-color);

    --lwt-acc-btn-bg: var(--lwt-accent-color);
    --lwt-acc-btn-color: var(--lwt-paper-color);
    --lwt-acc-btn-border: 1px solid var(--lwt-accent-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        --lwt-primary-lit: 50%;
        --lwt-secondary-lit: 47%;
        --lwt-accent-lit: 38%;
        
        --lwt-paper-color: hsl(var(--lwt-primary-hue), 39%, 6%);
        --lwt-text-color: hsl(var(--lwt-primary-hue), 20%, 60%);
        --lwt-header-color: hsl(var(--lwt-primary-hue), 20%, 90%);

        /* BUTTONS */
        --lwt-prime-btn-bg: var(--lwt-primary-color);
        --lwt-prime-btn-color: var(--lwt-primary-color);
        --lwt-prime-btn-border: 1px solid var(--lwt-primary-color);

        --lwt-sec-btn-bg: transparent;
        --lwt-sec-btn-color:var(--lwt-secondary-color);
        --lwt-sec-btn-border: 1px solid var(--lwt-secondary-color);

        --lwt-acc-btn-bg: var(--lwt-accent-color);
        --lwt-acc-btn-color: var(--lwt-paper-color);
        --lwt-acc-btn-border: 1px solid var(--lwt-accent-color);
    }
    .navbar-toggler-icon{
        background-color: hsl(0, 0%, 98%);
    }
    .techskills div span{
        color: var(--lwt-paper-color);
    }
}

body {
    font-family: "Instrument Sans", Arial, Helvetica, sans-serif;
    background-color: var(--lwt-paper-color);
    color: var(--lwt-text-color);
    margin: 0;
    padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--lwt-header-color);
}
a{
    color: var(--lwt-header-color);
    text-decoration: none;
    border-bottom: 1px solid var(--lwt-text-color);
    transition: 0.3s ease-in-out;
    width: fit-content;
    padding-bottom: 4px;
}
a:hover{
    color: var(--lwt-secondary-color);
    border-bottom: 1px solid var(--lwt-secondary-color);
}

/* BUTTONS */
.lwt-btn-primary, .lwt-btn-secondary, .lwt-btn-accent {
    padding: 8px 12px;
    margin: 2px;
    border-radius: 4px;
    transition: 0.3s ease-in-out;
}
.lwt-btn-primary {
    background-color: var(--lwt-prime-btn-bg);
    color: var(--lwt-prime-btn-color);
    border: var(--lwt-prime-btn-border);
}
.lwt-btn-secondary {
    background-color: var(--lwt-sec-btn-bg);
    color: var(--lwt-sec-btn-color);
    border: var(--lwt-sec-btn-border);
}
.lwt-btn-accent{
    background-color: var(--lwt-acc-btn-bg);
    color: var(--lwt-acc-btn-color);
    border: var(--lwt-acc-btn-border);
}
.lwt-btn-primary:hover {
    box-shadow: 0 0 15px var(--lwt-primary-color);
}
.lwt-btn-secondary:hover {
    box-shadow: 0 0 15px var(--lwt-secondary-color);
}
.lwt-btn-accent:hover {
    box-shadow: 0 0 15px var(--lwt-accent-color);
}

/* Navigation Menu */
.navbar-toggler-icon{
    background-color: transparent;
}

/* bs accordion */
.lwt-accordion, .lwt-accordion .accordion-item {
    background-color: transparent;
}
.lwt-accordion .accordion-item{
    border: 1px solid hsl(var(--lwt-secondary-hue), var(--lwt-secondary-sat), 80%);
    color: var(--lwt-text-color);
}
.lwt-accordion .accordion-button {
    background-color: transparent;
    color: var(--lwt-header-color);
    border: none;
}
.lwt-accordion .accordion-button:focus {
    box-shadow: none;
    border-bottom: 1px solid hsl(var(--lwt-secondary-hue), var(--lwt-secondary-sat), 80%);
}

.main_info{
    text-align: left;
}
.about_info{
    display: grid;
    grid-template-columns: 200px auto;
    gap: 3rem;
    justify-content: start;
}

.pfmedgrid {
    display: flex;
    margin: auto;
    width: 100%;
    max-width: 1000px;
    height: calc(100vh - 100px);
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
}
.pfmedgrid div {
    display: grid;
    gap: 20px;
    transition: 0.3s ease-in-out;
    grid-auto-rows: 200px;
}
.pfmedgrid div * {
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid var(--main-color);
    transition: 0.3s ease-in-out;
}
.pfmedgrid div *:hover {
    box-shadow: 0 0 15px var(--main-color);
}
.pfmedgrid div:nth-child(1) {
    grid-template-columns: 3fr 3fr;
}
.pfmedgrid div:nth-child(2) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.pfmedgrid div:nth-child(3) {
    grid-template-columns: 1fr 2fr 1fr;
}
.pfmedgrid div:nth-child(4) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(auto-fill, minmax(50px, 130px));
}

.skill_list span{
    display: inline-block;
    background-color: var(--lwt-accent-color);
    color: var(--lwt-paper-color);
    padding: 5px 10px;
    border-radius: 5px;
    margin: 3px;
}
.skilltable{
    display: grid;
    grid-template-columns: 300px 30px auto;
    gap: 22px;
    align-items: center;
}

.lwt-list-group li{
    background-color: transparent;
}
.list-group-item{
    background-color: transparent;
    color: var(--lwt-text-color);
}

.progress-bar{
    background-color: var(--lwt-accent-color);
}

.techskills{
    display: grid;
    grid-template-columns: repeat(10, auto);
    gap: 10px;
    max-width: 1000px;
    align-content: flex-start;
    justify-content: space-between;
}
.techskills div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.6em;
    width: 60px;
    height: 60px;
    background-color: var(--lwt-accent-color);
    border-radius: 5px;
    padding: 5px;
    gap: 3px;
    color: var(--lwt-text-color);
}
.techskills div span{
    text-align: center;
}
.techskills div img{
    width: 30px;
    height: 30px;
}

@media (max-width: 1200px) {
    .main_info{
        text-align: center;
        max-width: 1000px;
        width: 90%;
    }
    .pfmedgrid {
        height: auto;
        gap: 20px;
        justify-content: center;
    }
    .pfmedgrid div:nth-child(1) {
        grid-template-columns: 1fr 1fr;
    }
    .pfmedgrid div:nth-child(2) {
        grid-template-columns: 1fr 1fr;
    }
    .pfmedgrid div:nth-child(3) {
        grid-template-columns: 1fr 1fr;
    }
    .pfmedgrid div:nth-child(4) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(auto-fill, minmax(50px, 130px));
    }
}

@media (max-width: 700px) {
    #main{
        padding-top: 0px !important;
        margin-top: 0px !important;
        min-height: auto !important;
    }
    .pfmedgrid {
        height: auto;
        gap: 20px;
        justify-content: center;
    }
    .pfmedgrid div:nth-child(1) {
        grid-template-columns: 1fr;
    }
    .pfmedgrid div:nth-child(2) {
        grid-template-columns: 1fr;
    }
    .pfmedgrid div:nth-child(3) {
        grid-template-columns: 1fr;
    }
    .pfmedgrid div:nth-child(4) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(auto-fill, minmax(50px, 130px));
    }
    .techskills{
        grid-template-columns: repeat(5, auto);
    }
}