:root {
    --dark-base: #212121;
    --dark-window: #131516;
    --dark-accent: #616161;
    --dark-text: #e8e6e3;
    --dark-button-a: #555353;
    --dark-button-b: #363535;
    --dark-button-c: #303030;
    --dark-skills-bar: #353b48;


    --light-base: #f0f0f0;
    --light-window: #d3d3d3;
    --light-accent: #404040;
    --light-text: black;
    --light-button-a: #8C8B8A;
    --light-button-b: #B5B4B3;
    --light-button-c: #D1D0D0;
    --light-skills-bar: #718093;

    --base-background-color: var(--dark-base);
    --window-background-color: var(--dark-window);
    --accent-color: var(--dark-accent);
    --text-color: var(--dark-text);
    --button-color-a: var(--dark-button-a);
    --button-color-b: var(--dark-button-b);
    --button-color-c: var(--dark-button-c);
    --skills-bar-color: var(--dark-skills-bar);
}

.light-mode {
    --base-background-color: var(--light-base);
    --window-background-color: var(--light-window);
    --accent-color: var(--light-accent);
    --text-color: var(--light-text);
    --button-color-a: var(--light-button-a);
    --button-color-b: var(--light-button-b);
    --button-color-c: var(--light-button-c);
    --skills-bar-color: var(--light-skills-bar);
}

.dark-mode {
    --base-background-color: var(--dark-base);
    --window-background-color: var(--dark-window);
    --accent-color: var(--dark-accent);
    --text-color: var(--dark-text);
    --button-color-a: var(--dark-button-a);
    --button-color-b: var(--dark-button-b);
    --button-color-c: var(--dark-button-c);
    --skills-bar-color: var(--dark-skills-bar);
}

@media (prefers-color-scheme: light) {
    :root{
        --base-background-color: var(--light-base);
        --window-background-color: var(--light-window);
        --accent-color: var(--light-accent);
        --text-color: var(--light-text);
    }
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--base-background-color);
    color: var(--text-color);
}

#welcome img {
    padding-right: 10px;
    max-width: 100%;
    height: auto;
}

.navbar {
    display: flex;
    max-width: 200px;
    align-items: top;
    justify-content: space-between;
    padding: 10px;
    border-right: solid var(--accent-color);
    background-color: var(--window-background-color);
}

.hamburger {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 24px;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    z-index: 1000;
}

nav {
    display: flex;
    flex-direction: column;
}

nav a {
    text-decoration: none;
    color: white;
    padding: 10px;
    display: block;
}

nav a:hover {
    background-color: #555;
}

.hidden {
    display: none;
}

@media (min-width: 769px) {
    .hamburger {
        display: none;
    }

    nav {
        display: flex;
        flex-direction: row;
    }

    .project-content img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 769px) {
    .left-section {
        display: none;
    }
}

.container {
    display: flex;
    flex: auto;
    overflow-y: auto;
    min-height: 100vh;
}

.left-section {
    flex: 0 1;
    padding: 20px;
    border-right: solid var(--accent-color);
    background-color: var(--window-background-color);
}

.left-section img {
    width: 100%;
    border-radius: 10%;
}

.myName {
    text-align: center;
    padding: 5px;
}

.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top:35px;
}

.buttons label {
    position: relative;
    width: 180px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.buttons input {
    appearance: none;
}

.buttons label span {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(var(--button-color-a), var(--button-color-b), var(--button-color-c));
    border: 2px solid #222;
    border-radius: 6px;
    box-shadow: inset 0 5px 1px rgba(0, 0, 0, 0.35),
        0 5px 5px rgba(0, 0, 0, 0.5),
        0 15px 25px rgba(0, 0, 0, 0.35);
}

.buttons label input:checked ~ span {
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35),
        inset 0 5px 5px rgba(0, 0, 0, 0.5),
        inset 0 15px 25px rgba(0, 0, 0, 0.35);
}

.buttons label span::before {
    content: "";
    position: absolute;
    inset: 5px 3px;
    border-top: 1px solid #ccc;
    filter: blur(2px);
}

.buttons label b {
    position: relative;
    z-index: 10;
    font-size: 1.5em;
    color: #068c91;
}

.buttons label input:checked ~ b {
    color: #03fdfe;
    text-shadow: 0 0 5px #219cf3, 0 0 8px #219cf3;
}

#swap-colors {
    background-color: #e1ecf4;
    border-radius: 3px;
    border: 1px solid #7aa7c7;
    box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
    box-sizing: border-box;
    color: #39739d;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.15385;
    margin: 0;
    outline: none;
    padding: 2px .8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
}

#swap-colors:hover {
    background-color: #b3d3ea;
    color: #2c5777;
}

#swap-colors:focus {
    box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}

#swap-colors:active {
    background-color: #a0c7e4;
    box-shadow: none;
    color: 2c5777;
}

.filler {
    flex: 1 auto;
    overflow: auto;
}

.content-section {
    display: flex;
    flex: auto;
    background-color: var(--window-background-color);
    color: var(--text-color);
    margin: 40px;
    padding: 20px;
    max-width: 1000px;
    height: fit-content;
    overflow: auto;
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.content-section header {
    font-size: 32px;
}

.project-title img {
    vertical-align: middle;;
    height: 55px;
}

/* SKILLS */

#skills {
    list-style-type: none;
}x

#skills i {
    margin: 20px 0;
}

#skills img {
    vertical-align: middle;
    height: 45px;
}

.bar {
    background: var(--skills-bar-color);
    display: block;
    height: 10px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.bar:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.bar span {
    height: 10px;
    float: left;
    background: linear-gradient(135deg, rgba(3, 20, 155, 1)0%, rgba(3, 253, 254, 1)100%);
}

.cpp {
    width: 90%;
    animation: cpp 1s;
}

.python {
    width: 85%;
    animation: python 1s;
}

.sql {
    width: 85%;
    animation: sql 1s;
}

.csharp {
    width: 75%;
    animation: csharp 1s;
}

.cmake {
    width: 70%;
    animation: cmake 1s;
}

.c {
    width: 50%;
    animation: c 1s;
}

.js {
    width: 40%;
    animation: js 1s;
}

.html {
    width: 20%;
    animation: html 1s;
}

@keyframes cpp {
0% { width: 0%; }
100% { width: 90%; }
}

@keyframes python {
0% { width: 0%; }
100% { width: 85%; }
}

@keyframes sql {
0% { width: 0%; }
100% { width: 85%; }
}

@keyframes csharp {
0% { width: 0%; }
100% { width: 75%; }
}

@keyframes cmake {
0% { width: 0%; }
100% { width: 70%; }
}

@keyframes c {
0% { width: 0%; }
100% { width: 50%; }
}

@keyframes js {
0% { width: 0%; }
100% { width: 40%; }
}

@keyframes html {
0% { width: 0%; }
100% { width: 20%; }
}

/* PROJECTS */

.project-content img {
    padding-right: 10px;
    max-width: 100%;
    height: auto;
}

.project-content-horizontal {
    display: inline-flex;
    flex-direction: column;
}

.project-content-horizontal img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.description {
    display: flex;
    flex-direction: column;
}

.link {
    display: flex;
    justify-content: center;
}

.view-code {
    width: 10em;
    position: relative;
    height: 3.5em;
    border: 3px ridge #149CEA;
    outline: none;
    background-color: transparent;
    color: var(--text-color);
    transition: 1s;
    border-radius: 0.3em;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.view-code:hover {
    box-shadow: inset 0px 0px 25px #1479EA;
}

/* BLOG */

.blog-container * {
    display: block;
}

li {
    margin: 10px;
}

pre {
    white-space: pre-wrap;
    background-color: var(--base-background-color);
    color: var(--text-color);
    font-family: monospace;
    font-size: 14px;
}

code {
    display: inline !important;
    white-space: pre-wrap;
    background-color: var(--base-background-color);
    color: var(--text-color);
    font-family: monospace;
    font-size: 14px;
}

a {
    display: inline !important;
    font-size: 20px;
    color: #3391ff;
}

strong {
    display: inline !important;
}

i {
    display: inline !important;
}

#back-to-blogs {
    background-color: #e1ecf4;
    border-radius: 3px;
    border: 1px solid #7aa7c7;
    box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
    box-sizing: border-box;
    color: #39739d;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.15385;
    margin: 0;
    outline: none;
    padding: 2px .8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
}

#back-to-blogs:hover {
    background-color: #b3d3ea;
    color: #2c5777;
}

#back-to-blogs:focus {
    box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}

#back-to-blogs:active {
    background-color: #a0c7e4;
    box-shadow: none;
    color: 2c5777;
}

/* LINKS */

.social-links {
    background-color: #e1ecf4;
    border-radius: 3px;
    border: 1px solid #7aa7c7;
    box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
    box-sizing: border-box;
    color: #39739d;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.15385;
    margin: 0;
    outline: none;
    padding: 8px .8em;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
}

.social-links:hover {
    background-color: #b3d3ea;
    color: #2c5777;
}

.social-links:focus {
    box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}

.social-links:active {
    background-color: #a0c7e4;
    box-shadow: none;
    color: 2c5777;
}