@charset "utf-8";

:root {
    --theme-red-color: rgb(195, 70, 70);
    --theme-red-color-bright: rgb(216, 104, 104);
    --theme-red-color-transparent-1: rgb(195, 70, 70, 0.7);
    --theme-red-color-transparent-2: rgb(195, 70, 70, 0.3);
    --theme-black-color: rgb(49, 49, 49);
    --theme-white-color: cornsilk;
}

html {
    overflow-y: scroll;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--theme-black-color);
}

div#pagebody {
    background-color: var(--theme-red-color);
    text-align: center;
    display: flex;
    flex-direction: row;
}

.main {
    width: 70%;
    display: flex;
    flex-direction: column;
}

.header {
    width: 100%;
    position: sticky;
    z-index: 100;
    top: 0px;
    background-color: var(--theme-black-color);
}

img#lightBox {
    width: 20%;
    height: auto;
    position: sticky;
    z-index: 90;
    top: 0%;
    left: 80%;
    display: none;
}

#content_container {
    flex-grow: 1;
    background-color: var(--theme-black-color);
}

#content {
    padding: 10%;
}

.sidebar {
    background-color: var(--theme-red-color-bright);
    flex-grow: 1;
    filter: blur(30px);
    z-index: 150;
}

canvas#camera {
    position: relative;
    width: 80%;
}

canvas#menu {
    position: fixed;
    z-index: 1000;
    top: 0vh;
    right: 0vw;
    width: 15%;
}

canvas#config {
    position: fixed;
    z-index: 200;
    top: 15vh;
    left: 0vw;
    width: 23%;
}

.video {
    display: none;
}

#frame {
    position: relative;
}

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

@media screen and (max-width: 1000px) {
    canvas#sample {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {

    div#pagebody {
        background-color: var(--theme-red-color);
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    .main {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        background-color: var(--theme-red-color-bright);
        height: 10vh;
        flex-grow: 1;
        filter: blur(30px);
        z-index: 150;
    }

    canvas#camera {
        position: relative;
        width: 100%;
        margin-bottom: 10vh;
    }

    canvas#menu {
        position: fixed;
        z-index: 1000;
        top: 0vh;
        right: 0vw;
        width: 20%;
    }

    canvas#config {
        position: fixed;
        z-index: 200;
        top: auto;
        bottom: calc(-23vw * 2 / 3);
        left: calc(50vw - 23vw);
        width: 46%;
        rotate: -90deg;
    }

    img#lightBox {
        display: block;
    }
}

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

p {
    color: var(--theme-white-color);
}

ul {
    margin-top: 5%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li{
    padding-top: 1ex;
}

ul li {
    color: aliceblue;
    padding-top: 0.5ex;
    padding-bottom: 0.5ex;
}

ul li a {
    background-color: var(--theme-red-color-transparent-1);
    display: block;
    width: 80%;
    padding-top: 1ex;
    border: 5px solid var(--theme-red-color-bright);
    text-align: center;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
}

ul li a:hover {
    background-color: var(--theme-red-color-transparent-2);
}

ol{
    margin-top: 1ex;
    margin-bottom: 1ex;
}

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

#content {
    font-size: 2ex;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: var(--theme-white-color);
    text-align: start;
    margin: auto;
}

#content p {
    text-align: left;
    margin-bottom: 2.0em;
}

#content p.preface {
    text-align: center;
}

#content p.datetime {
    font-size: 1.8ex;
    border-top: 0.07em solid var(--theme-red-color);
    margin-bottom: 0em;
}

#content p.author {
    font-size: 1.8ex;
}

#content p.tags {
    margin-bottom: 0.3em;
    font-size: 1.8ex;
}

#content a.tag {
    margin: 0.3em;
    padding: 0.5em;
    line-height: 3em;
    background: var(--theme-red-color-transparent-1);
    border: 0.1em solid var(--theme-red-color-bright);
}

#content a.tag:hover {
    background: var(--theme-red-color-transparent-2);
}

#content h1 {
    font-size: 6ex;
    margin-bottom: 1.62em;
}

#content h1.category {
    text-align: center;
}

#content h2 {
    font-size: 5ex;
    background-color: var(--theme-red-color);
    padding-left: 0.3em;
    margin-top: 1.62em;
    margin-bottom: 1.62em;
}

#content h3 {
    font-size: 4.5ex;
    border-left: 0.4em solid var(--theme-red-color);
    border-right: 0.05em solid var(--theme-red-color);
    border-top: 0.05em solid var(--theme-red-color);
    border-bottom: 0.05em solid var(--theme-red-color);
    padding-left: 0.3em;
    margin-bottom: 1.62em;
}

#content h4 {
    font-size: 4ex;
    border-top: 0.1em solid var(--theme-red-color);
    border-bottom: 0.1em solid var(--theme-red-color);
    padding-left: 0.3em;
    margin-bottom: 1.62em;
}

#content h5 {
    font-size: 3ex;
    border-bottom: 0.1em solid var(--theme-red-color);
    padding-left: 0.3em;
    margin-bottom: 1.62em;
}

#content h6 {
    font-size: 2.5ex;
    border-bottom: 0.07em solid var(--theme-red-color);
    padding-left: 0.3em;
    margin-bottom: 1.62em;
}

#content .wp-block-pullquote {
    text-align: center;
    background-color: var(--theme-red-color-transparent-2);
    border: 0.1em solid var(--theme-red-color-transparent-1);
    padding: 0.7em;
    margin-bottom: 1.62em;
}

#content .has-text-align-center {
    text-align: center;
}

#content .information-box {
    text-align: center;
    background-color: var(--theme-red-color-transparent-2);
    border: 0.1em solid var(--theme-red-color-transparent-1);
    padding: 0.7em;
    margin-bottom: 1.62em;
}

#content ul {
    padding-left: 1em;
    margin-bottom: 1.62em;
}

#content ul li {
    color: var(--theme-white-color);
    list-style-type: none;
}

#content ul.dot-list li::marker {
    content: '・';
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: auto !important;
}

#content ol {
    padding-left: 1em;
    margin-bottom: 1.62em;
}

#content img {
    width: 100%;
}

#content figure {
    margin-bottom: 1.62em;
}

#content img.icon {
    width: 20%;
}

#content table {
    text-align: center;
    background: var(--theme-red-color-transparent-2);
}

#content table td {
    padding: 0.5em;
    background: var(--theme-red-color-transparent-2);
    border: 0.1em solid var(--theme-red-color-transparent-1);
}

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

@media screen and (max-width: 600px) {
    #content {
        font-size: 1.5ex;
    }

    #content p.datetime {
        font-size: 1.4ex;
    }

    #content p.author {
        font-size: 1.4ex;
    }

    #content p.tags {
        font-size: 1.4ex;
        margin-bottom: 15em;
    }

    #content h1 {
        font-size: 4ex;
    }
    
    #content h2 {
        font-size: 3.5ex;
    }
    
    #content h3 {
        font-size: 3ex;
    }
    
    #content h4 {
        font-size: 2.5ex;
    }

    #content h4 {
        font-size: 2ex;
    }
    
    #content h5 {
        font-size: 2ex;
    }
    
    #content h6 {
        font-size: 2ex;
    }
}