@font-face {
    font-family: "Fragment Mono";
    src: url("FragmentMono-Regular.ttf") format('truetype');
    font-style: normal;
}

@font-face {
    font-family: "Fragment Mono";
    src: url("FragmentMono-Italic.ttf") format('truetype');
    font-style: italic;
}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.korean {
    display: none;
}

html {
    font-family: "Fragment Mono";
    font-size: 16px;
    line-height: 24px;
}

a {
    color: red;
}

h3, h4 {
    font-size: 16px;
    line-height: 24px;    
}

p {
    margin-bottom: 18px;
}

#logo {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 100;

    font-style: normal;
    text-decoration: none;
    color: black;

    text-shadow: 0px 0px 1px black;
}

#page {
/*            display: flex;
    flex-direction: row;*/
}


#container {
    background: #ffff99;
    width: 100vw;
    height: 100vh;
    position: relative;
    transition: all 250ms ease;
    display: flex;
    align-items: center;
    justify-content: center;       
}

.nighttime #logo{
    color: #ddd;
}

.nighttime #container {
    background: #333;
}

nav {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 10;
    display: inline-flex;
    column-gap: 10px;
    padding: 0px 10px;            
}

nav * {
    cursor: pointer;
}

nav a {
    color: red;
}

nav a:hover {
    color: orange;
}


.nighttime nav a {
    color: #ddd;
}

.nighttime nav a:hover {
    color: color: yellow;
}


#map-controls {
    position: absolute;
    left: 15px;
    bottom: 15px;
    z-index: 10;
    display: inline-flex;
    column-gap: 10px;
    padding: 10px;    
}

#map-controls button {
    border: 1px solid black;
    padding: 12px 16px;
    background: white;
    border-radius: 30px;
    cursor: pointer;
    transition: all 500ms ease;
}

#map-controls button:hover {
    box-shadow: 0px 0px 4px black;
    transform: translateY(-2px);
}

#map {
    z-index: 0;
    margin: auto;
    top: calc(50% - 426px);
    left: calc(50% - 512px);
    width: 1024px;
    height: 852px;
    box-sizing: border-box;
    position: absolute;
    transform-origin: center;    
}

#map svg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    object-fit: contain;
    pointer-events: none;
}

#sidebar {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 500px;
    height: 100vh;
    overflow: scroll;
    opacity: 1;
    color: black;
    transition: all 500ms ease;
    padding: 30px;
    z-index: 100;
    background: white;
    transform: translateX(500px);         

    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    border-left: 1px solid #FF0000;
}

#sidebar.visible {
    transform: translateX(0px);            
}

#sidebar img, #sidebar h4 {
    margin-bottom: 20px;
}

#sidebar h3 {
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;    
}

#sidebar h4 {
    font-weight: normal;
    padding-bottom: 20px;
    border-bottom: 1px solid black;
}

#sidebar .caption {
    transform: translateY(-12px);
    font-family: "Fragment Mono";
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 10px;
}

#sidebar ul, #sidebar li {
    list-style-type: none;
    padding-left: 0px;
}

#sidebar ul{
    margin: 18px 10px;
    padding-left: 10px;
}

#sidebar li::before {
    content: '☯︎';
    position: absolute;
    transform: translateX(-18px);
}

#sidebar .links {
    border: 1px solid red;
    border-radius: 10px;
    padding: 10px;
    margin: 20px 0px;
}

#toc {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin-bottom: 20px;
}

#toc h3 {
    margin-top: 24px;
    margin-bottom: 10px;
}

#toc ul, #toc li {
    font-size: 20px;
    line-height: 30px;
    list-style-type: none;
    padding-left: 0px;
}

#toc li {
    padding-left: 25px;
}

#toc li::before {
    content: '→';
    position: absolute;
    transform: translateX(-25px);
}

#toc a {
    color: black;
    text-decoration: underline;
}

#toc a:hover {
    text-decoration: none;
}

#close-sidebar {
    color: red;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid red;
    background: white;
    border-radius: 3px;
    display: inline-block;
    padding: 3px 6px;
    margin-bottom: 20px;
    position: sticky;
    top: 10px;
    right: 10px;
}

#sidebar img {
    width: 100%;
    height: auto;
}

#sidebar .q {
    font-weight: 550;
    padding-left: 20px;
}

.marker {
    width: 22px;
    height: 22px;
    position: absolute;
    z-index: 1000;
    cursor: pointer;
    background-image: url(icons/star.png);
    background-repeat: no-repeat;
    background-size: contain;

    transition: all 200ms ease;
}

.marker.active {
    z-index: 10000;
}

.marker.cloud {
    background-image: url(icons/cloud.png);
    width: 46px;
    height: 46px;    
    animation: float 6s linear infinite alternate;
}

@keyframes float {
  0%   {transform: translateY(0px);}
  50%  {transform: translateY(10px);}
  100% {transform: translateY(0px);}
}


.marker.printer {
    background-image: url(icons/printer.png);
}

.marker.smiley {
    background-image: url(icons/smiley.png);
}

.marker.rainbow {
    background-image: url(icons/rainbow.png);
    width: 34px;
    height: 34px;    
}

.marker.workshop {
    background-image: url(icons/workshop.png);
}

.marker:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* place markers */

/* studios */


#suzin-kwon-marker {
    top: 38%;
    left: 46%;
}

#ordinary-people-marker {
    top: 48%;
    left: 33%;
}

#hezin-o-marker {
    top: 40%;
    left: 40%;
}

#sulki-min-marker {
    top: 33%;
    left: 42%;
}

#studio-frontdoor-marker {
    top: 35.5%;
    left: 44.5%;
}

#hezin-o-marker {
    top: 40%;
    left: 40%;
}

#headspace-marker {
    top: 20%;
    left: 11%;
}

#minsun-eo-marker {
    top: 76%;
    left: 38%;
}

/* interviews */

#alec-garnier-marker {
    top: 70%;
    left: 72%;
}

#aurg-marker {
    top: 47%;
    left: 30%; 
}

#chat-architect-marker {
    top: 15%;
    left: 24%; 
}

#choi-inho-marker {
    top: 55%;
    left: 62%; 
}

#jongwon-choi-marker {
    top: 48.5%;
    left: 31.5%;
}

#francois-chas-marker {
    top: 20%;
    left: 22%;
}

#hui-team-design-marker {
    top: 70%;
    left: 72%;
}

#leo-lau-marker {
    top: 77%;
    left: 12%;
}

#vincent-tsang-marker {
    top: 10%;
    left: 80%;
}

#mania-marker {
    top: 28%;
    left: 2%;
}

#nancy-skolos-marker {
    top: 80%;
    left: 30%;
}

#fhhh-marker {
    top: 50%;
    left: 46%;
}

#seyoung-kim-marker {
    top: 34%;
    left: 44%;
}

#sejin-kim-marker {
    top: 32%;
    left: 50%;
}

#stone-librande-marker {
    top: 34%;
    left: 54%;
}

#taeyoon-lee-marker {
    top: 74%;
    left: 36%;
}

#hanbin-kim-marker {
    top: 75%;
    left: 34%;
}

/* printers */

#pactory-marker {
    top: 49%;
    left: 34%;   
}

#top-process-marker {
    top: 40%;
    left: 44%;
}

#freemac-marker {
    top: 41%;
    left: 45%;
}


/* preview styles */

.preview-popup {
    position: absolute;
    width: 200px;
    background: rgba(0,0,0,.85);
    box-shadow: 2px 2px 8px black;
    color: white;
    display: none;
    z-index: 10000;
    padding: 10px;

    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    
    top: 20px;
    left: 20px;
    z-index: 10000000;
    border-radius: 3px;
}

.preview-popup , .preview-popup p, .preview-popup h3, .preview-popup h4 {
    font-size: 9px;
    line-height: 12px;
    margin-bottom: 6px;
}

.preview-popup h3 {
    margin-bottom: 0px;
}

.preview-popup img {
    width: 100%;
    height: auto;
}

.preview-popup.visible {
    display: block;
}

.preview-popup a {
    color: yellow;
    text-decoration: none;
}

@media only screen and (max-width: 500px) {
    
    #logo { 
        width: 50vw;
    }

    #sidebar {
        max-width: 100vw;
        border-left: none;
        padding: 10px;
    }

    #sidebar.visible {
        transform: translateX(0px);            
    }

/*    .marker {
        width: 8px;
        height: 8px;
    }
    
    .marker.rainbow, .marker.cloud { 
        width: 22px;
        height: 22px;    
    }

    .preview-popup {
        position: absolute;
        width: 120px;
        padding: 3px;
        top: 10px;
        left: 10px;
        border-radius: 2px;
    }

    .preview-popup , .preview-popup p, .preview-popup h3, .preview-popup h4 {
        font-size: 5px;
        line-height: 8px;
        margin-bottom: 3px;
    }*/
}