:root{
    --bg-primary: #ccc;
    --color-primary: black;

    --bg-secondary: #222A;
    --bg-secondary-hover: #223038AA;
    --color-secondary: white;

    --border-radius: 0.3em;
    --divider-hard: white;
    --divider-soft: #7777;

    --bg-link: #1e90ff77;

    /* --header-bg: #f008;
    --content-bg: #fff2;
    --content-left-bg: #fa08;
    --content-right-bg: #0ff8;
    --footer-bg: #0f08; */
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Fira Code', 'Helvetica', sans-serif;
}

a{
    color: dodgerblue;
}

.clickable-container{
    padding: 0.5em;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: white;
}

.clickable-container:hover{
    background-color: var(--bg-link);
    cursor: pointer;
}

body, #app{
    width: 100vw;
    height: 100vh;
}

#app.globe_drag{
    cursor: grabbing !important;
}

#app.globe_drag *{
    pointer-events: none;
}

#app:not(.globe_drag).hovering_object{
    cursor: pointer !important;
}

.hide{
    display: none !important;
}

.abs{
    position: absolute;
}

.center_abs{
    translate: -50% -50%;
}

.row-center{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.row-vcenter{
    display: flex;
    align-items: center;
}

.column-center{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.globe_highlight{
    color: orange;
}

hr.spacer, hr.spacer-soft{
    flex-grow: 1;
    margin: 0 0.5em;
    background: var(--divider-hard);
    height: 1px;
    border:none;
}

hr.spacer-soft{
    background: var(--divider-soft);
}

.text-center{
    text-align: center;
}

#app{
    overflow: hidden;
    position: relative;
}

#app > .layer{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    pointer-events: none;
}

#loading-screen{
    color: white;
    z-index: 100;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;

    transition: opacity 0.5s ease-in;
    animation: loading-bg 3s infinite alternate ease-in-out;
}

@keyframes loading-bg{
    0%{background: rgb(0, 9, 17);}
    100%{background: rgb(0, 29, 54);}
}

#app.loaded #loading-screen{
    opacity: 0;
}

#renderer{
    pointer-events: all !important;
}

main{
    position: relative;
    transition: opacity 0.2s ease-out;
    
    display: flex;
    flex-direction: column;

    width: calc(100% - 2em);
    height: calc(100% - 2em);
    margin: 1em;
    gap: 1em;
}

#app.globe_drag main, #app.hide_ui main{
    opacity: 0;
}

main > header{
    display: flex;
    justify-content: center;
    gap: min(3vw, 2.5em);
    pointer-events: all;
    background: var(--header-bg);
}

#content-layouts{
    position: relative;
    flex-grow: 1;
}

.content-layout{
    position: absolute;
    width: 100%; height: 100%;

    display: flex;
    flex-direction: column;
}

.content-layout:not(.hidden){
    background: var(--content-bg);
}

.content-layout-middle{
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    gap: 2em;

    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: all;
}

.content-layout-middle.empty, .content-layout-middle.hidden{
    pointer-events: none !important;
}

.content-layout-middle.empty *, .content-layout-middle.hidden *{
    display: none;
}

.content-layout-part{
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-layout-part:nth-child(1){ background: var(--content-left-bg); }
.content-layout-part:nth-child(2){ background: var(--content-right-bg); }

.content-part{
    pointer-events: all;
}

@media (min-aspect-ratio: 1){
    .content-layout-middle{
        flex-direction: row;
        gap: 0;
        justify-content: space-between;
        overflow-y: hidden;
        pointer-events: none;
    }
    
    .content-layout-part{
        width: 37%;
        height: 100%;
    }

    .content-part{
        max-height: calc(100% - 1em);
        overflow-x: hidden;
        overflow-y: auto;
    }
}

footer{
    background: var(--footer-bg);
    color: var(--color-secondary);
    padding: 0.5em;
    margin-top: 0.5em;
}

.content-layout-part, footer{
    translate: 0 0;
    transition: translate 0.5s ease;
}

.content-layout.hidden *{
    pointer-events: none !important;
}

.content-layout.hidden .content-layout-middle{ overflow-y: hidden; }
.content-layout.hidden .content-layout-part:nth-child(1){ translate: -150% 0; }
.content-layout.hidden .content-layout-part:nth-child(2){ translate: 150% 0; }
.content-layout.hidden footer{ translate: 0 150%; }

.header_icon{
    position: relative;
    cursor: pointer;
    user-select: none;
}

.header_icon_bg{
    width: 3em; height: 3em;
    padding: 0.5em;
    
    position: relative;
    border-radius: var(--border-radius);

    background-color: var(--bg-secondary);
    overflow: hidden;
}

.header_icon_bg::before{
    content: '';
    position: absolute;

    translate: -50% -50%;
    top: 50%; left: 50%;

    border-radius: 50%;
    background: var(--bg-primary);
    
    width: 0%;
    height: 0%;
}

.header_icon_bg > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.header_icon_tag{
    padding: 0.5em 0;
    bottom: 0%; left: 50%;
    translate: -50% calc(100% + 1em);

    position: absolute;
    border-radius: var(--border-radius);
    
    display: flex;
    justify-content: center;
    overflow: hidden;

    pointer-events: none;
    
    color: var(--color-primary);
    background-color: var(--bg-primary);
    
    max-width: 0;
    z-index: 5;
}

.header_icon_bg::before, .header_icon_tag{
    transition: 0.25s ease-in-out;
}

.header_icon:hover > .header_icon_bg::before{
    width: 150%;
    height: 150%;
}

.header_icon:hover > .header_icon_tag{
    padding: 0.5em;
    max-width: 200%;
}

main article{
    background-color: var(--bg-secondary);
    color: var(--color-secondary);
    border-radius: var(--border-radius);
    padding: 0.5em;
    font-size: 0.85em;
}

main article:hover{
    background-color: var(--bg-secondary-hover);
}

.comment{
    opacity: 0.6;
}

.no-bg{
    background: transparent;
}

.flag-list{
    margin: 1em;
    gap: 1em;
}

.flag-element{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.flag-name{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5em;
    gap: 0.3em;
}

.flag-name > img{
    width: 3em;
}

ul > li{
    margin-left: 1.5em;
}

.experience-container{
    max-width: 40em;
}

.experience-element{
    position: relative;
    display: flex;
    gap: 1em;
    padding: 1em;
}

.experience-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 1em;
    width: 8em;

    flex-shrink: 0;
}

.experience-left > img{
    max-width: 100%;
    max-height: 3em;
    padding: 0.2em;
    margin: 0.2em;
    border-radius: var(--border-radius);
    background: #fff4;
}

.experience-right, .experience-description-list{
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.experience-right > *{
    margin-left: 1em;
}

.experience-title{
    font-weight: bold;
    margin-left: 0;
}

.experience-description-list{
    padding: 1em 0;
    font-size: 0.95em;
}

.experience-description-list > *{
    display: list-item;
    padding: 0.3em;
}

.experience-loc{
    display: flex;
    align-items: center;
    gap: 1em;
}

.experience-loc::before{
    content: '';
    width: 1em;
    height: 1em;
    background: url(images/loc.png) center center no-repeat;
    background-size: contain;
}

.skill-container{
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.skill-section{
    display: flex;
    flex-direction: column;
}

.skill-table{
    text-align: center;
    align-self: center;
    margin: 0.5em;
}

.skill-table td{
    padding: 0.2em 0.4em;
}

.skill-table img{
    max-width: 2.5em;
    max-height: 2.5em;
    transition: scale 0.15s ease-out;
}

.skill-table img:hover{
    scale: 1.5;
}

.contact-column{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

button{
    padding: 0.5em;
    min-width: 5em;

    border: solid 1px;
    border-radius: var(--border-radius);
    font-size: 0.9rem;

    background: transparent;
    border-color: #aaa;
    color: #aaa;
}

button:enabled{
    cursor: pointer;
}

button:disabled, input[type=text]:disabled, textarea:disabled{
    opacity: 0.6;
}

button:hover:enabled{
    border-color: white;
    color: white;
}

button:active:enabled{
    background-color: #fff4;
}

button.success{
    opacity: 1;
    background-color: #0A04;
    border-color: #0A0;
    color: #0A0;
}

button.no{
    opacity: 1;
    background-color: #A004;
    border-color: #A00;
    color: #A00;
}

input[type=text], textarea{
    outline: none;
    border: solid 1px #aaa;
    background: transparent;
    color: white;
    resize: none;
}

input[type=text]{
    padding: 0.2em;
    width: calc(100% - 0.4em);
}

.input-box{
    position: relative;
    margin-top: 1.5em;
    width: 100%;
}

.input-box > label{
    position: absolute;
    top: 0;
    translate: 0 -100%;
}

.project-icon-list{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 34em;
    gap: 0.5em;
}

.project-icon{
    position: relative;
    width: 4em;
    height: 4em;

    border: solid 1px #aaa;
    border-radius: var(--border-radius);
    cursor: pointer;

    display: grid;
    place-items: center;
    user-select: none;
}

.project-icon > img{
    max-width: 90%;
    max-height: 90%;
}

.project-icon:hover{
    border-color: white;
}

.project-icon.selected{
    border-color: #13f0f0;
}

.project-icon.selected::before{
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    border-radius: var(--border-radius);

    background: url(images/project-cursor.png) center center no-repeat;
    background-size: contain;

    animation: project-icon-cursor 0.2s ease-out both;
}

@keyframes project-icon-cursor{
    0%{scale: 0;}
    100%{scale: 1.1;}
}

.project-description{
    position: relative;
}

.project-description, .project-header{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-description > .eye{
    position: absolute;
    top: 0.8em; right: 0.8em;
}

.eye{
    width: 2em;
    height: 2em;
    padding: 0;
    min-width: auto;

    background: url(images/eye.png) center center no-repeat;
    background-size: 90%;
}

.project-description{
    padding: 1em;
    gap: 1em;
}

.project-description > hr{
    align-self: stretch;
}

.msg .error{color: red;}
.msg .success{color: green;}

#modal{
    z-index: 20;
    background-color: #0008;
}

#modal > *{
    pointer-events: all;
}

#image-modal{
    width: 100%; height: calc(100% - 4em);
    color: white;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    margin: 2em 0;
    gap: 1em;
}

.image-modal-container{
    position: relative;
    flex-grow: 1;
    margin: 0 1em;
}

.image-modal-subcontainer{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.image-modal-subcontainer > img{
    max-width: 100%;
    max-height: 100%;
}

.image-modal-bar{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

.image-modal-dots{
    display: flex;
    gap: 1em;
}

.image-modal-dots > span{
    border-radius: 50%;
    border: solid 1px #aaa;

    width: .7em;
    height: .7em;
    cursor: pointer;
}

.image-modal-dots > span:hover{
    background-color: #aaa8;
    border-color: white;
}

.image-modal-dots > span.selected{
    border-color: white;
    background-color: white;
}

[image-group]{
    display: none !important;
}

.modal-close{
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 21;
}