html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; font-size: 10px; }

html, body {
    --side-panel-width: 45rem;
    touch-action: none;
}

* { -webkit-tap-highlight-color: transparent }

@font-face {
  font-family: 'Intro';

  src: url('fonts/Intro/Intro-Regular.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

#rotate_device {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    transition: opacity 0.3s;
    opacity: 0;
    background-image: url(images/rotate_device.svg);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

@media (max-height: 500px) AND (orientation: landscape) {
    #rotate_device { opacity: 1; }
    
    main,
    button#side_menu,
    button#side_menu_x { opacity: 0!important;}
}

.render_window {
    position: absolute;
    left: 10px; top: 10px;
}

#kr { display: none; }




main {
    display: block;
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    transition: left 0.5s, opacity 0.5s;
}

 

main section[scene] {
    position: absolute;
    left: 0; top: 0;
    width: calc(100% - var(--side-panel-width)); height: 100%;
    transition: width 0.5s;
}

main canvas {
    filter: contrast(1.2) brightness(1.1);
}

.lil-gui.autoPlace {
    left: 15px; top: 10px;
}

.color {
    color: #ad8b8c;
    color: #48653e;
}

button#side_menu,
button#side_menu_x {
    position: absolute;
    right: 2rem; top: 2rem;
    width: 5rem; height: 5rem;
    border-radius: 2.5rem;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 100;
    outline: 3.5px solid #be3d3d;
    overflow: hidden;
    border: 0;
    font-size: 3rem; line-height: 3rem;
    color: #ffffff;
    transition: opacity 0.5s;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
}

body:not(.aside) button#side_menu,
body.aside button#side_menu_x {
    opacity: 1;
    pointer-events: all;
}




@media (max-width: 800px) {
    body.aside main { left: -100%; }
    main section[scene] { width: 100%; height: 100%; }
}

@media (min-width: 800px) {
    button#side_menu,
    button#side_menu_x { display: none; }
}






section[scene_settings] {
    position: absolute;
    left: 2rem; top: 2rem;
    width: 15rem; height: 5rem;
    border-radius: 2.5rem;
    background-color: rgba(0,0,0,0.75);
    z-index: 100;
    outline: 3.5px solid #be3d3d;
    overflow: hidden;
}

section[scene_settings]:after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 5rem; height: 5rem;
    border-radius: 2.5rem;
    background-color: rgba(255,255,255,1);
    z-index: 0;
    transition: left 0.3s;
}

body.mode3d_ghost section[scene_settings]:after { left: 0; }
body.mode3d_transparent section[scene_settings]:after { left: 33.33%; }
body.mode3d_solid section[scene_settings]:after { left: 66.67%; }

section[scene_settings] button {
    position: absolute;
    left: 0; top: 0;
    width: 5rem; height: 5rem;
    padding: 0;
    margin: 0;
    border: 0;
    appearance: none;
    background: transparent;
    z-index: 100;
    cursor: pointer;
}

section[scene_settings] button svg {
    pointer-events: none;
}

section[scene_settings] button svg path {
    fill: #ffffff;
    transition: fill 0.3s;
}

section[scene_settings] button[mode='ghost'] { left: 0; }
section[scene_settings] button[mode='transparent'] { left: 33.33%; }
section[scene_settings] button[mode='solid'] { left: 66.67%; }

body.mode3d_ghost section[scene_settings] button[mode='ghost'] svg path { fill: #000; }
body.mode3d_transparent section[scene_settings] button[mode='transparent'] svg path { fill: #000; }
body.mode3d_solid section[scene_settings] button[mode='solid'] svg path { fill: #000; }












section[env_settings] {
    position: absolute;
    left: 2rem; top: 9rem;
    width: 15rem; height: 5rem;
    border-radius: 2.5rem;
    background-color: rgba(0,0,0,0.75);
    z-index: 100;
    outline: 3.5px solid #be3d3d;
    overflow: hidden;
}

section[env_settings]:after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 5rem; height: 5rem;
    border-radius: 2.5rem;
    background-color: rgba(255,255,255,1);
    z-index: 0;
    transition: left 0.3s;
}

body.env_indust section[env_settings]:after { left: 0; }
body.env_homes section[env_settings]:after { left: 33.33%; }
body.env_eltowers section[env_settings]:after { left: 66.67%; }

section[env_settings] button {
    position: absolute;
    left: 0; top: 0;
    width: 5rem; height: 5rem;
    padding: 0;
    margin: 0;
    border: 0;
    appearance: none;
    background: transparent;
    z-index: 100;
    cursor: pointer;
}

section[env_settings] button svg {
    pointer-events: none;
}

section[env_settings] button svg path {
    fill: #ffffff;
    transition: fill 0.3s;
}

section[env_settings] button[mode='indust'] { left: 0; }
section[env_settings] button[mode='homes'] { left: 33.33%; }
section[env_settings] button[mode='eltowers'] { left: 66.67%; }

body.env_indust section[env_settings] button[mode='indust'] svg path { fill: #000; }
body.env_homes section[env_settings] button[mode='homes'] svg path { fill: #000; }
body.env_eltowers section[env_settings] button[mode='eltowers'] svg path { fill: #000; }