.link {
    text-decoration: none;
    color: #ccc;
    transition: border 0.5s, color 0.3s;
    border-bottom: 2px solid rgba(134, 134, 245, 0);
}

.link:hover {
    color: #fff;
    cursor: pointer;
    border-bottom: 2px solid rgb(134, 134, 245);
}

html {
    scroll-behavior: smooth;
}


details {
    text-decoration: none;
    color: #aaa;
    transition: border 0.5s, color 0.3s;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-color: #7D7D7D #2D2D2D ;
    scrollbar-width: thin;
}


details:hover {
    color: #FFF;
    cursor: pointer;
}

details:open {
    color: #FFF;
}

body {
    width: 100%;
    height: 100%;
    margin: 0%;
    left: 0;
    top: 0;
    color: #aaa;
    font-family: "Exo 2", sans-serif;
    background-color: #000;
}

blockquote {
    border-left: 5px solid #777;
    margin-left: 0px;
    padding-left: 20px;
    color: #777;
}

blockquote.warning {
    border-color: #FFAA00;
    color: #9e6524
}

blockquote.warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 384C302.3 384 288 398.3 288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384zM320 192C301.8 192 287.3 207.5 288.6 225.7L296 329.7C296.9 342.3 307.4 352 319.9 352C332.5 352 342.9 342.3 343.8 329.7L351.2 225.7C352.5 207.5 338.1 192 319.8 192z'/%3E%3C/svg%3E");
    content: 'Warning';
    display: flex;
    width: 100px;
    height: 2rem;
    justify-content: right;
    align-items: center;
    object-fit: contain;
    color: #ffaa00;
    filter: brightness(0) saturate(100%) invert(82%) sepia(30%) saturate(7008%) hue-rotate(358deg) brightness(101%) contrast(108%);
    background-repeat: no-repeat;
}

blockquote.info {
    border-color: #4087d2;
    color: rgb(43, 112, 196);
}

blockquote.info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z'/%3E%3C/svg%3E");
    content: 'Info';
    display: flex;
    width: 65px;
    height: 2rem;
    justify-content: right;
    align-items: center;
    object-fit: contain;
    color: #4087d2;
    filter: brightness(0) saturate(100%) invert(54%) sepia(30%) saturate(3595%) hue-rotate(189deg) brightness(88%) contrast(85%);
    background-repeat: no-repeat;
}

.header {
    display: flex;
    position: relative;
    width: 100%;
    height: calc(0.3 * (100vw - 60px));
    z-index: -1;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.sidebar_menu {
    padding-bottom: 10px;
}

.hide {
    opacity: 0;
}

.hide_sidebar {
    opacity: 0;
    transition: opacity 0.5s;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #333;
    z-index: 50;
    transition: opacity 0.5s;
}

.loader_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 40px);
}

.loader_circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 100px;
    border: 1px solid rgb(134, 134, 245);
    box-shadow: 0 0 8px 4px #000;
    border-radius: 50%;
}

.gear_2 {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 44%;
    top: 10%;
    animation: loader 4s infinite;
}

.gear_3 {
    height: 25px;
    width: 25px;
    position: absolute;
    left: 44%;
    bottom: 12%;
    transform: 10px 0;
    animation: loader 4s infinite;
}

.gear_1 {
    height: 40px;
    width: 40px;
    position: absolute;
    left: 14%;
    top: 50%;
    transform: translate(0, -50%);
    transform-origin: 50% 0;
    animation: loader_reverse 4s infinite;
}

.generic_container {
    width: 90%;
    margin: auto;
    position: relative;
    padding: 10px;
    background-color: #323232;
    margin-top: 30px;
    border-radius: 10px;
}

.generic_input {
    background-color: #454545;
    border: 2px solid #787878;
    border-radius: 5px;
    color: #fff;
    padding-left: 5px;
    font-size: 16px;
    height: 25px;
}

.generic_input:focus {
    outline: none;
    border: 2px solid rgb(134, 134, 245);
}

@keyframes loader_reverse {
    0% {
        rotate: 0deg;
    }

    50% {
        rotate: 250deg;
    }

    100% {
        rotate: 360deg;
    }
}

@keyframes loader {
    0% {
        rotate: 0deg;
    }

    50% {
        rotate: -250deg;
    }

    100% {
        rotate: -360deg;
    }
}

.line {
    border-top: 2px solid #777;
    margin: 0;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    transform: translate(0, -10px);
}

.logo-top {
    display: flex;
    position: fixed;
    z-index: -3;
    width: 90%; 
    transition: transform 0.02s;
}

.logo-bottom {
    display: flex;
    position: fixed;
    z-index: -3;
    width: 90%;
    bottom: calc(0.15 * (100vw - 60px));
    transition: transform 0.02s;
}

.main {
    position: relative;
    left: 60px;
    height: fit-content;
    width: calc(100% - 60px);
    overflow-x: hidden;
}

.sidebar_container {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 60px;
    z-index: 7;
    padding: 0;
}

.menu_icon_image {
    margin-top: -50px;
    height: 15px;
    width: 15px;
}

.menu_button i {
    transition: color 0.2s, scale 0.2s;
    color: #aaa;
    scale: 1;
}

a.menu_button {
    padding-top: 15px;
    padding-bottom: 15px;
}


.menu_button:hover i {
    opacity: 1.0;
    scale: 1.05;
    color: #fff;
}

.menu_title {
    margin-left: 5px;
    left: 0;
    text-wrap: nowarp;
    overflow-wrap: normal;
    margin-right: 5px;
    color: rgba(0.0, 0.0, 0.0, 0.0);
    transition: color 0.5s;
}

.menu_title i {
    color: #aaa;
    overflow-wrap: normal;
}

.menu_title .arrow-down {
    margin-left: 5px;
}


.page {
    border-top: 2px solid #777;
    border-bottom: 2px solid #777;
    height: fit-content;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    position: relative;
    background-color: #222222;
}

.scroll_to_top_button {
    z-index: 40;
    position: fixed;
    right: 50px;
    bottom: 50px;
    height: 40px;
    width: 40px;
    background-color: #222;
    text-align: center;
    border-radius: 100%;
    border: 2px solid #777;
    transition: border 0.5s, box-shadow 0.5s, background-color 0.5s, opacity 0.5s;
    animation-timing-function: ease-in-out;
}

.scroll_to_top_button>i {
    margin-top: 50%;
    transform: translate(0, -50%);
    color: #aaa;
    transition: color 0.5s;
}

.scroll_to_top_button:hover {
    border: 2px solid rgb(134, 134, 245);
    background-color: #333;
    box-shadow: 0px 0px 5px 2px #aaaaaa33;
}

.scroll_to_top_button:hover>i {
    color: #fff;
}

.sidebar {
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 60px;
    background-color: #000;
    border-right: 2px solid #777;
    border-bottom: 2px solid #777;
    transition: width 0.5s;
    animation-timing-function: ease-in-out;
    z-index: 5;
}


@media (pointer:fine) { /* Mobile support since they can't hover */
    .sidebar_container:hover .hide_sidebar {
        opacity: 1;
    }

    .sidebar_container:hover .menu_title {
        color: rgba(175, 175, 175, 1);
    }

    .sidebar_container:hover .sidebar_icon>.plus {
        opacity: 0;
    }

    .sidebar_container:hover .sidebar_icon>.minus {
        opacity: 1;
    }

    .sidebar_container:hover .sidebar {
        width: 180px;
    }

    .sidebar_container:focus-within .hide_sidebar {
        opacity: 1;
    }

    .sidebar_container:focus-within .menu_title {
        color: rgba(175, 175, 175, 1);
    }

    .sidebar_container:focus-within .sidebar_icon>.plus {
        opacity: 0;
    }

    .sidebar_container:focus-within .sidebar_icon>.minus {
        opacity: 1;
    }

    .sidebar_container:focus-within .sidebar {
        width: 180px;
    }
}


.sidebar_contents {
    border-top: 2px solid #777;
    position: relative;
    margin-top: 90px;
    margin-left: 0;
    height: fit-content;
    width: 180px;
    opacity: 1;
    transition: opacity 0.5s;
    text-align: left;
    overflow-y: auto;
}

.sidebar_container::-webkit-scrollbar {
    display: none;
}

.sidebar_list {
    list-style-type: none;
    text-align: left;
    padding: 0;
}

.sidebar_list li {
    display: static;
    margin-top: 10px;
    margin-left: 20px;
}


.sidebar_icon {
    z-index: 6;
    position: absolute;
    margin-left: 28px;
    margin-top: 20px;
    transform: translate(-50%, 0);
    text-align: center;
    border-radius: 10%;
    height: 40px;
    width: 40px;
    border: 2px solid #aaa;
}



.sidebar_icon>i {
    position: absolute;
    margin-top: 50%;
    transform: translate(-50%, -50%);
}

.minus {
    opacity: 0;
    transition: opacity 0.5s;
}

.plus {
    opacity: 1;
    transition: opacity 0.5s;
}

.footer {
    display: flex;
    position: relative;
    width: 100%;
    height: calc(0.3 * (100vw - 60px) + 50px);
    z-index: -1;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.footer > p {
    position: absolute;
    bottom: 10px; 
}

.click_history {
    width: 100%;
    text-align: center;
}

.generic_table td, .generic_table th {
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
    
}

.generic_table th {
    background-color: #262626;
    margin-bottom: 10px;
}

.generic_table tr:nth-of-type(odd) {
    background-color: #383838;
}

.generic_table tr:nth-of-type(even) {
    background-color: #424242;
}

.generic_table tr:not(:last-child) > td, .generic_table tr:not(:last-child) > th {
    border-bottom: 1px solid #777;
}

.generic_table td:not(:last-child), .generic_table th:not(:last-child) {
    border-right: 1px solid #777;
}

.generic_table {
    width: fit-content;
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid #777;
    border-spacing: 0;
    border-collapse: separate;
}

.sidebar_expand .sidebar {
    width: 180px;
}

.sidebar_expand .hide_sidebar {
    opacity: 1;
}

.sidebar_expand .menu_title {
    color: rgba(175, 175, 175, 1);
}

.sidebar_expand .sidebar_icon>.plus {
    opacity: 0;
}

.sidebar_expand .sidebar_icon>.minus {
    opacity: 1;
}

@media only all and (max-width: 770px) {

    .sidebar_collapse .sidebar {
        width: 60px;
    }

    .main {
        width: 100%;
        left: 0;
        top: 60px;
    }

    .sidebar_container {
        width: 100%;
        height: 60px;
        max-height: fit-content;
    }

    .sidebar_collapse {
        width: 60px;
    }

    .sidebar {
        width: 100%;
        height: 60px;
        transition: height 0.3s, width 0.3s;
        border-top: none;
        max-height: fit-content;
    }

    .sidebar_contents {
        width: calc(100vw - 140px);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: start;
        gap: 0;
        margin-top: 1px;
        overflow: visible;
        margin-left: 80px;
        margin-right: 60px;
        border: none;
        max-height: fit-content;
    }

    .sidebar_menu {
        padding-right: 10%;
        height: fit-content;
        display: block;
        margin: 0;
        border: none;
        position: relative;
    }

    .line {
        display: none;
    }

    .sidebar_expand .sidebar {
        height: 450px;
        width: 100%;
    }

    .sidebar_icon {
        margin-top: 8px;
        border-left: 2px solid #aaa;
    }

    .menu_title {
        color: #aaa;
    }

    .hide_sidebar {
        opacity: 1;
    }

    .home_button {
        position: absolute;
        right: -35px;

        transform: translate(50%, 0);
        display: block;
    }
}

@media only all and (max-width: 460px) {


    .sidebar_menu {
        padding-right: 5%;
    }

    .sidebar_contents {
        margin-left: 60px;
        width: calc(100vw - 120px);
    }
}

@media (pointer:fine) and (max-width: 770px) {
    .sidebar_container:hover .sidebar {
        width: 100%;
    }
}

@media only all and (max-width: 680px) {
    .sidebar_menu {
        margin-top: 7px;
        font-size: 12px;
        line-height: 20px;
    }

    .menu_title {
        margin-bottom: 20px;
    }
}

.stats_wrapper {
    position: relative;
    margin: auto;
    margin-top: 20px;
    gap: 10px;
    width: 90%;
    height: min-content;
    background-color: #323232;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    text-align: center;

}

.stats_wrapper h1 {
    padding-top: 10px;
    display: block;
}

.stats_container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    padding: 10px;
}

.stat_item {
    max-width: 300px;
    margin: 5px;
    background-color: #383838;
    padding: 10px;
    border-radius: 10px;
    line-height: 20px;
    display: inline-block;
    width: 100%;
    
}

@media only all and (max-width: 400px) {
    .stat_item {
        width: 200px;
    }
}

.stat_item .stat_big {
    font-size: 50px;
    display: block;
    height: fit-content;
    margin-bottom: 10px;
    text-shadow: #0000007b 0px 0px 10px;
    line-height: 50px;
    background: -webkit-linear-gradient(right, #03ffbc, #86ff98, #03ffea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat_item .stat_small {
    font-size: 20px;
}

.projects_wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin: auto;
    margin-top: 20px;
    gap: 10px;
    width: 90%;
    height: fit-content;
    background-color: #323232;
    border-radius: 10px;
    padding-top: 80px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.project_info {
    color: #aaa;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-top: 2px solid #aaaaaa;
    z-index: 2;
    position: absolute;
    height: 0;
    background-color: #111111cc;
    bottom: -7px;
    left:0;
    transition: height 0.5s, border-top 0.3s;
}

.project_tags {
    font-size: 12px;
    padding-top: 1px;
    padding-bottom: 5px;
    border-bottom: 1px solid #888;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 90%;
    height: fit-content;
}

.project_tags>div {
    display: inline;
    padding: 2px 5px 2px 5px;
    align-items: center;
    border-radius: 0.5em;
    position: relative;
    background-color: #323232;
    width: fit-content;
    height: 1em;
}

.project_info > p {
    margin: 0;
    display: block;
    text-shadow: #000000 0px 0 10px;
    background-image: -webkit-linear-gradient(right, #03ffbc, #86ff98, #03ffea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.project:hover {
    transform: scale(1.01, 1.01);
    border: 2px solid rgb(134, 134, 245);
    box-shadow: 0px 0px 5px 2px #aaaaaa33;
}

.project:hover > .project_info {
    height: 45%;
}

.project_info_extend {
    height: 45%;
}


@media (pointer:none), (pointer:coarse) { /* Mobile support since they can't hover */
    .project_info {
        height: 45%;
    }
}

.projects_wrapper > h1 {
    position: absolute;
    top: 0;
}

.project {
    position: relative;
    border-radius: 10px;
    width: 300px;
    height: 200px;
    overflow: hidden;
    border: 2px solid #aaa;
    transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
    align-self: flex-start;
}

.project>img {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    object-fit: cover;
}

@media only all and (max-width: 770px) {

    .project {
        width: 90%;
        max-width: 450px;
        display: block;
    }

    .project > img {
        width: 300px;
        display: inline;
    }

    .project:nth-last-of-type(even) .project_info {
        margin-left: 300px;
        border-left: 2px solid #aaaaaa;
    }

    .project:nth-last-of-type(odd) img {
        margin-left: calc(100% - 300px);
    }

    .project:nth-last-of-type(odd) .project_info {
        margin-right: 300px;
        border-right: 2px solid #aaaaaa;
    }

    .project_info {
        height: 100%;
        display: inline;
        bottom: 0;
        position: absolute;
        width: auto;
    }

    .project_info > div {
        margin-bottom: 10px;
        margin-top: 10px;
    }
    
    .project:hover > .project_info {
        height: 100%;
    }
    
}

@media only all and (max-width: 590px) {
    .project > img {
        width: 250px;
        height: 166px;
    }

    .project {
        height: 166px;
    }

    .project:nth-last-of-type(even) .project_info {
        margin-left: 250px;
        border-left: 2px solid #aaaaaa;
    }

    .project:nth-last-of-type(odd) img {
        margin-left: calc(100% - 250px);
    }

    .project:nth-last-of-type(odd) .project_info {
        margin-right: 250px;
        border-right: 2px solid #aaaaaa;
    }
}

@media only all and (max-width: 500px) {
    .project {
        width: 250px;
        height: 280px;
        display: block;
    }

    .project > img {
        width: 250px;
        height: 166px;
    }

    .project_info {
        width: 100%;
        height: 114px;
        margin: 0;
        padding: 2px;
    }

    .project:nth-last-of-type(even) .project_info {
        margin-left: 0;
        border-left: none;
    }

    .project:nth-last-of-type(odd) img {
        margin-left: 0;
    }

    .project:nth-last-of-type(odd) .project_info {
        margin-right: 0;
        border-right: none;
    }

    .project:hover > .project_info {
        height: 114px;
    }
}











.fa-custom-and {
    content: url('../images/css_paths/and.svg')
}

.fa-custom-or {
    content: url('../images/css_paths/or.svg')
}





.dialog_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: dialog_bg_fade_in forwards 0.3s;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

@keyframes dialog_bg_fade_in {
    0% {
        background-color: #00000000;
    }
    100% {
        background-color: #0000007B;
    }
}

@keyframes dialog_menu_fade_in {
    0% {
        opacity: 0.0;
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1.0;
        transform: scale(1.0);
    }
}

.dialog_wrapper {
    height: fit-content;
    min-width: fit-content;
    animation: dialog_menu_fade_in forwards 0.3s;
    background-color: #383838;
    padding: 10px;
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 2px 2px 1px 1px #0000007B;
}

.dialog_text {
    font-size: 18px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.dialog_button_container {
    min-height: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.dialog_button {
    font-size: 20px;
    background-color: #454545;
    height: 30px;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    text-align: center;
    align-items: center;
    transition: transform 0.3s, background-color 0.3s;
}

.dialog_button:hover {
    transform: scale(1.05);
    background-color: #505050;
}

.dialog_body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
}



body.focus {
    background-color: #222;
}

body.focus .focus_mode_hidden {
    display: none;
}

body.focus .main {
    width: 100%;
    min-height: 100%;
    position: relative;
    left: 0;
}

body.focus .page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow-x: hidden;
    border: none;
}