@import url('/fonts/Danjo.css');

/***************************/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: 'OnulDanjo', 'Arial', 'Helvetica', 'sans-serif';
}

body {
    font-size: 16px;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,
nav,section {
  display: block;
}
body {
  line-height: 1;
  background-color: white;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input:focus {
  outline: none;
}
a {
  color: inherit;
  text-decoration: none;
}

/***************************/

html {
    scroll-behavior: smooth;
    hyphenate-character: '';
}

body {
    user-select: none;
    -webkit-user-select: none;
    word-break: keep-all;
    -ms-word-break: keep-all;
    background-color: #F3F3F3;
    color: #232323;
    font-size: max(16px, 1.3vw);
    word-spacing: -0.16em;
    position: relative;
}


p > a {
    color: #357899;
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: #CCC;
    transition: all 0.15s linear;
}

p > a:hover {
    text-decoration-color: #357899;
}


header {
    display: flex;
    justify-content: space-between;
    padding: 24px 1.5em;

    position: fixed;
    width: calc(100% - 3em);

    z-index: 9;
}

header .logo {
    max-width: 44vw;
}

.btn {
    font-weight: bold;
    opacity: 1;
    transition: opacity linear 0.15s;
}

.btn:hover {
    opacity: 0.5;
}

header > a {
    padding: 10px 16px 12px;
    background-color: #FF472F;
    
    /*font-size: 15px;*/
    font-size: min(1em, 18px);
}

.backToTop {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 3;
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    
    background-color: #232323;
    border-radius: 999px;
}

.backToTop img {
    width: 1.5em;
}

body > .title {
    position: relative;
    background-color: #F3F3F3;
    z-index: 5;
}

.title > .titleLogo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.title > .titleLogo > img {
    width: 85vw;
}

.title .info {
    position: absolute;
    bottom: 1em;
    left: 0;

    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.4;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    align-items: end;

    width: calc(100% - 3em);
    padding: 0 1.5em;
}

.title .info .r {
    text-align: right;
}

.title .info b {
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    font-size: 1.03em;
    vertical-align: -5%;
    letter-spacing: -0.03em;
    margin-right: 0.05em;
}

body > .section {
    position: relative;
    padding: 0 1.5em;
    margin-top: 15em;
}

.section > h1 {
    font-weight: bold;
    font-size: 3em;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -epub-writing-mode: vertical-rl;
    height: max-content;
    text-orientation: upright;
    font-feature-settings: "clig","vert","vrt2";
    padding-bottom: 0.33em;
    border-bottom: 0.5em solid #FF472F;
    margin-bottom: 2em;
}

.section > h1.r {
    margin-left: auto;
}

.section > h1.c {
    margin: 0 auto 2em;
}

.section > .column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
    margin-bottom: 3em;
}

.column p {
    line-height: 1.8;
    text-indent: 2em;
}

.column > .imgContainer {
    display: flex;
    flex-direction: column;
}

.column > .imgContainer > img {
    flex-grow: 1;
    background-color: #ddd;
    margin: 0.5em 0;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.column > .imgContainer > p {
    margin-top: 0.25em;
    font-size: 0.85em;
    text-indent: 0;
    vertical-align: middle;
}

.column > .imgContainer > p > span {
    margin-right: 0.5em;
    font-weight: bold;
}

.thisIsTable {
    position: relative;
}

.ttableWrapper {
    overflow-x: scroll;
    direction: rtl;

    width: calc(100vw - 1.5em);
    transform: translateX(-1.5em);

    background-color: #F3F3F3;
}

.ttable {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1em;
    
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -epub-writing-mode: vertical-rl;
    
    width: calc(100vw - 1.5em);
    min-width: 800px;

    height: 45em;
}

.ttable > .alert {
    min-width: 70px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;

    direction: ltr;
    font-size: 1em;
    font-weight: bold;
    color: #FF472F;

    display: none;
}

.ttable > .alertDevider {
    border-right: 0.2em solid #FF472F;

    display: none;
}

.ttable > .content {
    min-width: 70px;

    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1em;

    transition: all 0.1s linear;
}

.ttable > a:hover {
    color: #FF472F;
}

.ttable > .content h2 {
    font-size: max(1.5em, 2vw);
    font-weight: bold;
    margin-left: 0.25em;
}

.ttable > .content p {
    font-size: 1em;
}

.ttable > .content span {
    font-weight: bold;
    margin: 0.1em 0 0.5em;
}

.ttable > .devider {
    border-right: 0.2em solid #232323;
}

.ttable > .okItsJustASpacer {
    border-right: 0.2em solid #F3F3F3;
}

#discussion > .floatBtnWrapper {
    position: sticky;
    bottom: 1em;
    left: 0;
    text-align: center;
    padding-top: 5em;
}

.btn-round {
    display: inline-block;
    background-color: #FF472F;
    padding: 0.7em 1.7em 0.9em;
    border-radius: 999px;
}

.speaker {
    position: relative;
}

.scrollTo {
    position: absolute;
    top: calc(-80px - 3em);
    left: 0px;
}

.speaker > h2 {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 0.3em;
    line-height: 1.4;
}

.speaker > h3 {
    font-weight: bold;
    margin-bottom: 1.5em;
}

.speaker > .columnWrapper {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    gap: 2em;
}

.speaker p {
    line-height: 1.8;
}

.speaker ul {
    line-height: 1.8;
    list-style-type: square;
    margin: 0.5em 0 0.5em 2em;
    text-indent: 0em;
}

.speaker li {
    margin-bottom: 0.25em;
}

.speaker .content {
    column-count: 2;
    column-gap: 1.5em;
    text-indent: 2em;
}

.speaker .profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
    font-size: 0.8em;
}

.speaker .profile img {
    width: 100%;
    background-color: #ddd;
    margin-bottom: 1em;
}

.speaker .profile h3 {
    margin-bottom: 0.5em;
    font-weight: bold;
}

.devider-2 {
    border-top: 0.5em solid #232323;
    margin: 3em 0;
}

.devider-1 {
    border-top: 0.15em solid #232323;
    margin: 3em 0;
}

#gallery > .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 0.5em;
    align-items: center;
}

#gallery img {
    width: 100%;
}

#gallery img.imp {
    grid-column: auto / span 2;
}

#gallery img:last-child {
    grid-column: auto / span 3;
}

#credit > .content {
    text-align: center;
    line-height: 1.8;
}

#credit .hiut {
    font-weight: bold;
    margin-bottom: 4em;
}

#credit .hiut h2 {
    font-size: 1.5em;
    margin-bottom: 1em;
}

#credit .people li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-bottom: 0.5em;
}

#credit .people li p:nth-child(1) {
    text-align: right;
}

#credit .people li p:nth-child(2) {
    text-align: left;
}

footer {
    padding: 2em;
    margin-top: 10em;
    font-size: 0.8em;
    line-height: 1.5;
    text-align: center;
    color: rgb(127, 127, 127);
}

@media screen and (max-width: 1000px) {
    .speaker .content {
        column-count: 1;
    }

    .speaker .profile {
        display: block;
    }
}

@media screen and (max-width: 850px) {
    .ttable > .alert {
        display: flex;
    }
    
    .ttable > .alertDevider {
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .section > .column {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
        margin-bottom: 3em;
    }

    .section > .column.imgFirst {
        flex-direction: column-reverse;
    }

    .speaker .columnWrapper {
        display: flex;
        flex-direction: column;
    }

    .speaker .profile img {
        width: 40%;
        height: auto;
    }

    #gallery > .content {
        grid-template-columns: repeat(2, 1fr);
    }

    #gallery img.imp {
        grid-column: auto / span 1;
    }
    
    #gallery img:last-child {
        grid-column: auto / span 1;
    }
}