:root {
    --body: #000;
    --dark: hsla(0, 0%, 0%, 0.7);
    --accentdark: hsl(160, 100%, 30%);
    --accentlight: hsl(160, 90%, 60%);
    --accentfaint: hsl(200, 80%, 70%);
    --extra1: #f53d3d;
    --extra2: #f5993d;
    --bg: hsl(200, 90%, 30%);
    --highlight: hsla(0, 0%, 100%, 0.8);
    --lowlight: hsla(160, 100%, 20%, 0.6);
    --light: #fff;
    --imgTT: 0.8s;
    --textTT: 0.6s;
}

html, body {
    overflow: hidden;
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100%;
    background-color: var(--body);
    box-sizing: border-box;
    font-size: 22px;
}

@font-face {
  font-family: 'main';
  src: url('fonts/Coders-Crux-2.ttf');
}
@font-face {
  font-family: 'fantasy';
  src: url('fonts/Ancient-Modern-Tales.otf');
}
@font-face {
  font-family: 'bold';
  src: url('fonts/Perfect\ DOS\ VGA\ 437.ttf');
}
@font-face {
  font-family: 'italic';
  src: url('fonts/Italipixel.ttf');
}
@font-face {
  font-family: 'casual';
  src: url('fonts/PixelifySans-Regular.ttf');
}
.fantasy {
    font-family: 'fantasy';
    text-align: center;
    font-size: 1.2em;
}
.bold {
    font-family: 'bold';
    text-align: left;
    text-indent: 1em;
    font-size: .77em;
}
.smaller {
    font-size: .9rem;
    text-align: justify;
}


#container {  
    display: grid;
    transform-origin: top left;
    grid-template-columns: 
        minmax(1rem,1fr) 
        600px
        minmax(1rem,1fr)
    ;
    grid-template-rows:
        minmax(1rem,2fr)
        275px
        275px
        275px
        minmax(0.5rem,1fr)
    ;
    gap: 0px 0px;
    width: 100%; 
    height: 100%;
    font-family: 'main';
    text-align: center;
}


a {
    color: var(--accentlight);
    cursor: pointer;
}
#sext > p > a {
    color: var(--accentdark);
    &.clicked {
        color: inherit;
    }
}
a.clicked {
    cursor: text;
    color: inherit;
}
a.obscure {
    color: inherit;
    text-decoration: none;
    cursor: text;
}
a.obscure:focus {
    outline: none;
    text-decoration: underline var(--lowlight);
}
a.revealed { 
    color: inherit;
    text-decoration: underline wavy;
    cursor: text;
}
a:focus {
    outline: none;
    border-radius: .25em;
    background-color: var(--lowlight);
}



#chat {
    grid-row-start: 2;
    grid-column-start: 2; 
    background-color: var(--body);
    z-index: 2;
    margin: -1rem 1rem 0.75rem -0.75rem;
    border: 0.5rem double var(--light);
    padding: 0.75rem;
    height: max-content;
    color: var(--light);
    font-family: 'casual';
    font-size: .8rem;
    text-align: left;
}
#bottom {
    grid-area: 3 / 2 / 3 / 2;
    z-index: 1;
    align-self: end;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    padding: 0.75rem;
    height: fit-content;
    display: flex;
    color: var(--light);
    > p {
        border-radius: 0.25rem;
        background-color: var(--dark);
        padding: 0.5rem;
    };
}
#scene {
    grid-area: 2 / 2 / 4 / 2; 
    border: 0.5rem double var(--light);
    background-size: cover;
    position: relative;
    overflow: hidden;
}
#sext {
    grid-area: 3 / 2 / 4 / 2;
    margin: -1rem 0.5rem 0 0.5rem;
    z-index: 1;
    /* align-self: end; */
    background-color: var(--highlight);
    padding: 1rem 0.5rem 1rem 0.5rem;
    height: fit-content;
    font-family: 'italic';
    font-size: 1.2rem;
    text-align: center;
    color: var(--body);
    a:link, a:visited {
        color: var(--accentdark);
    }
}
#text {
    grid-area: 4 / 2 / 5 / 2; 
    margin-top: -0.2rem;
    border: 0.5rem double var(--light);
    /* border-radius: 10px; */
    padding: .65rem;
    color: var(--light);

    background-image: url('images/tbg/buttons.png');
    background-size: cover; 
}

img {
    position: absolute;
    opacity: 1;
    transition: all var(--imgTT);
}
img.out {
    opacity: 0;
}
img.act {
    cursor: pointer;
}
p {
    margin: 0;
    font-family: inherit;
    color: inherit;
    opacity: 0;
    transition: all var(--textTT);
}
p.in {
    opacity: 1;
    transition: all var(--textTT);
}

.hidden {
    display: none;
}
#sext.hidden {
    display: none;
}