html,
body {
     padding: 0;
     margin: 0;
     overflow: hidden;
     background-color: #eeeeee;
     color: #000000;
     max-width: 100%;
     height: 100%;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 16px;
     font-weight: 400;
}

* {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

a {
     text-decoration: none;
     color: inherit;
}

a.upper {
     position: fixed;
     right: 6vw;
     bottom: 12vh;
     font-size: 25px;
     color: darkgreen;
}

a.upper:hover {
     color: limegreen;
}

a.lower {
     position: fixed;
     right: 6vw;
     bottom: 5vh;
     font-size: 25px;
     color: darkblue;
}

a.lower:hover {
     color: dodgerblue;
}

header {
     width: 70vw;
     height: 27vh;
     margin: 2vh 15vw 0 15vw;
     background-color: #eeeeee;
}

header > .container {
     width: 70vw;
     height: 25vh;
     position: relative;
}

header > .container > img.vignette {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
}

header .container img.logo {
     height: 80px;
     position: absolute;
     top: 8vh;
     left: 2vw;
}

header .container h1 {
     font-size: 60px;
     font-weight: 700;
     letter-spacing: 2px;
     color: #ff9900;
     margin: 0;
     padding: 0;
     position: absolute;
     top: 7vh;
     right: 2vw;
}

main.main {
     width: 70vw;
     height: 63vh;
     margin: 0 15vw;
     background-color: #eeeeee;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}

main.cell {
     display: none;
}

nav.main {
     width: 24vw;
     max-height: 63vh;
     overflow: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
     overflow: -moz-scrollbars-none;
     background-color: #eeeeee;
}

nav.main::-webkit-scrollbar {
     display: none;
}

nav.main::-webkit-scrollbar {
     width: 0 !important;
}

.title {
     width: 100%;
     padding: 1vw;
     margin-bottom: 2vh;
     background-color: #ffffff;
}

.title h3 {
     font-size: 17px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #ff9900;
     margin: 0;
     padding: 0;
}

.logging {
     width: 100%;
     padding: 1vw;
     margin-bottom: 2vh;
     background-color: #ffffff;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}

.logging button {
     padding: 0.5vw 1vw;
     border: none;
     background-color: #ff9900;
     color: #ffffff;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-right: 2vw;
     cursor: pointer;
}

button#reg:hover {
     background-color: dodgerblue;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

button#log:hover {
     background-color: forestgreen;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

button#logout:hover {
     background-color: maroon;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.archive {
     width: 100%;
     padding: 1vw;
     margin-bottom: 2vh;
     background-color: #ffffff;
}

.archive h3 {
     font-size: 17px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #ff9900;
     margin: 0;
     padding: 0;
}

.dropbtn {
     background-color: #ffffff;
     color: #000000;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 16px;
     font-weight: 400;
     border: none;
     margin-right: 1.75vw;
     margin-left: 0;
     padding-left: 0;
     cursor: pointer;
}

.dropdown {
     position: relative;
     display: inline-block;
     margin-top: 2vh;
     margin-left: 0;
     padding-left: 0;
}

.dropdown-content {
     display: none;
     position: absolute;
     background-color: #ffffff;
     min-width: 120px;
     z-index: 10000;
}

.dropdown-content button {
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 16px;
     font-weight: 400;
     color: black;
     background-color: #ffffff;
     border: none;
     text-decoration: none;
     display: block;
     cursor: pointer;
}

.dropdown-content button:hover {
     color: #ff8000;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.dropdown:hover .dropdown-content {
     display: block;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.dropdown:hover .dropbtn {
     color: #ff8000;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.links {
     width: 100%;
     padding: 1vw;
     background-color: #ffffff;
}

.links h3 {
     font-size: 17px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #ff9900;
     margin: 0;
     padding: 0;
}

.links a:hover {
     color: #ff8000;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

section.main {
     width: 45vw;
     max-height: 63vh;
     overflow: auto;
     scroll-behavior: smooth;
     -ms-overflow-style: none;
     scrollbar-width: none;
     overflow: -moz-scrollbars-none;
}

section.main::-webkit-scrollbar {
     display: none;
}

section.main::-webkit-scrollbar {
     width: 0 !important;
}

section.main .content {
     width: 45vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     background-color: aquamarine;
}

section.main .ghost {
     background-color: transparent;
     padding-top: 27vh;
     margin-top: -27vh;
}

section.main .box {
     width: 100%;
     margin-bottom: 1vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     background-color: #ffffff;
}

section.main .box a {
     width: 50%;
     min-height: 5vw;
     padding: 1vw;
     position: relative;
     cursor: default;
}

section.main .box .image i {
     position: absolute;
     top: 1.5vw;
     right: 1.5vw;
     z-index: 50;
     font-size: 40px;
     color: #ff8000;
     opacity: 0.7;
}




.image.adult {
     position: relative;
     display: inline-block;
}

.image.adult img {
     -webkit-filter: blur(15px);
     filter: blur(15px);
     -webkit-transition: -webkit-filter 0.4s ease;
     transition: -webkit-filter 0.4s ease;
     transition: filter 0.4s ease;
     transition: filter 0.4s ease, -webkit-filter 0.4s ease;
}

.image.adult.revealed img {
     -webkit-filter: none;
     filter: none;
}

.image.adult .blur-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     color: #fff;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     z-index: 10;
     text-align: center;
     padding: 1em;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     pointer-events: auto;
}

.image.adult.revealed .blur-overlay {
     display: none;
}

.blur-overlay button {
     padding: 10px 20px;
     font-size: 16px;
     background-color: #ff0884;
     color: white;
     border: none;
     margin-top: 10px;
     cursor: pointer;
}

.blur-overlay button:hover {
     background-color: hotpink;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}





.popup-image {
     -webkit-transition: -webkit-filter 0.3s ease;
     transition: -webkit-filter 0.3s ease;
     transition: filter 0.3s ease;
     transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.popup-blur-active .popup-image {
     -webkit-filter: blur(10px);
     filter: blur(10px);
}

.popup-blur {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.6);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     color: white;
     z-index: 10;
     text-align: center;
     padding: 1rem;
}

.unlock-button {
     margin-top: 10px;
     padding: 10px 20px;
     font-size: 1rem;
     cursor: pointer;
     background-color: #ff6b6b;
     border: none;
     border-radius: 5px;
     color: white;
}






section.main .box .logo {
     position: absolute;
     top: 1.5vw;
     left: 1.5vw;
     width: 2vw;
     opacity: 0.7;
     z-index: 50;
}

section.main .box .subscript {
     position: absolute;
     bottom: 2vh;
     left: 0;
     opacity: 0.5;
     z-index: 150;
     color: #000000;
     background-color: #ffffff;
     font-size: 18px;
     font-weight: 600;
     padding: 1vh 1vw;
     display: none;
}

.descript {
     width: 50%;
     padding: 1vw 1vw 1vw 0;
}

.date {
     width: 100%;
     margin-bottom: 1vh;
     font-size: 14px;
     letter-spacing: 2px;
     color: #ff9900;
}

.text {
     width: 100%;
     margin-bottom: 1vh;
     font-size: 20px;
     font-weight: 600;
}

.hyperlink {
     width: 100%;
     margin-bottom: 1vh;
     font-size: 16px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: red;
}

.hyperlink a:hover {
     color: darkorange;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

section.main .box .descript .hyperlink a {
     cursor: pointer;
}

.score {
     width: 100%;
     margin-bottom: 1vh;
     font-size: 18px;
     font-weight: 500;
     text-align: left;
}

.score span:nth-child(1) {
     margin-right: 1vw;
     color: green;
}

.score span:nth-child(2) {
     color: dodgerblue;
}

.comment {
     width: 100%;
     margin-bottom: 1vh;
     font-size: 15px;
}

.comment > p {
     margin: 0;
     padding: 0;
     margin-bottom: 0.5vh;
     padding-left: 20px;
     text-indent: -10px;
}

section.main .score_put {
     width: 100%;
     margin-top: 8vh;
     margin-bottom: 2vh;
     font-size: 15px;
     font-weight: 500;
}

.score_put div {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
     margin-bottom: 0.5vh;
}

.score_put div:nth-child(1) button {
     font-size: 15px;
     font-weight: 700;
     background-color: green;
     color: #ffffff;
     padding: 0.6vh;
     border: none;
     cursor: pointer;
}

.score_put div:nth-child(1) button:hover {
     background-color: #04ad04;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.score_put div:nth-child(2) button {
     font-size: 15px;
     font-weight: 700;
     background-color: dodgerblue;
     color: #ffffff;
     padding: 0.6vh;
     border: none;
     cursor: pointer;
}

.score_put div:nth-child(2) button:hover {
     background-color: #60affc;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.comment_put {
     width: 100%;
     font-size: 15px;
     font-weight: 700;
}

.comment_put form {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-align: baseline;
     -ms-flex-align: baseline;
     align-items: baseline;
}

.comment_put input {
     width: 16vw;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 15px;
     font-weight: 500;
     text-align: right;
     background-color: transparent;
     color: #000000;
     padding: 0.4vh 0;
     border: none;
     border-bottom: 1px solid #dddddd;
}

.comment_put button {
     font-size: 15px;
     font-weight: 700;
     background-color: #6a5acd;
     color: #ffffff;
     padding: 0.6vh;
     border: none;
     cursor: pointer;
}

.comment_put button:hover {
     background-color: #9d8de2;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

footer {
     width: 70vw;
     height: 4vh;
     padding: 0 1vw;
     margin: 2vh 15vw;
     background-color: #ffffff;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     font-size: 14px;
}

footer a:hover {
     color: darkorange;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.popup {
     display: none;
     position: fixed;
     z-index: 999;
     padding-top: 5vh;
     left: 0;
     top: 0;
     width: 100%;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.9);
     text-align: center;
}

.popup-image {
     max-width: 80%;
     height: 90vh;
     margin: auto;
     display: block;
}

.close {
     position: absolute;
     top: 2.5vh;
     right: 2vw;
     font-size: 45px;
     cursor: pointer;
     color: white;
}

.prev,
.next {
     position: absolute;
     top: 50%;
     font-size: 50px;
     cursor: pointer;
     color: white;
     padding: 2vw;
}

.prev {
     left: 2vw;
}

.next {
     right: 2vw;
}

.close:hover,
.prev:hover,
.next:hover {
     color: forestgreen;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.gallery {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}

.gallery-image {
     max-width: 100%;
     max-height: 60vh;
     cursor: -webkit-zoom-in;
     cursor: zoom-in;
}

.content-logging {
     width: 20vw;
     padding: 1vw;
     background-color: #ffffff;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     position: relative;
}

#exit {
     position: absolute;
     top: 0.85vw;
     right: 1vw;
     font-size: 20px;
     color: gray;
}

#exit:hover {
     color: forestgreen;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.content-logging h3 {
     font-size: 17px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     text-align: center;
     color: #ff9900;
     margin: 0;
     padding: 0;
}

.log_line {
     width: 100%;
     margin-top: 1vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}

.log_left {
     width: 30%;
     text-align: right;
}

.log_right {
     width: 65%;
}

input[type=email],
input[type=password],
input[type=text] {
     width: 100%;
     border: none;
     outline: none;
     border-bottom: 1px solid #acacac;
     padding-bottom: 0;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 16px;
     font-weight: 400;
     letter-spacing: 1px;
}

select.kword {
     width: 100%;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 20px;
     font-weight: 400;
     background-color: transparent;
     border: 0px;
     outline: 0px;
     padding: 1vh 0;
     border-bottom: 1px solid #cccccc;
     margin-bottom: 4vh;
}

.log_right a {
     font-weight: 600;
     color: dodgerblue;
}

.log_right a:hover {
     color: #8dc7ff;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.log_right button {
     width: 100%;
     padding: 0.5vw 1vw;
     border: none;
     background-color: #ff9900;
     color: #ffffff;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-right: 2vw;
     cursor: pointer;
}

button#login:hover {
     background-color: forestgreen;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

button#register:hover {
     background-color: dodgerblue;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

button#restore:hover {
     background-color: #02a2a2;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}











.corpus_left {
     width: 40vw;
     height: 90vh;
     position: fixed;
     top: 5vh;
     left: 5vw;
     border: 0px;
     outline: 0px;
}

.corpus_left > img {
     width: 100%;
     height: 100%;
     -o-object-fit: contain;
     object-fit: contain;
     border: 0px;
     outline: 0px;
}

.corpus_right {
     width: 40vw;
     position: fixed;
     top: 5vh;
     right: 5vw;
     padding: 1vw;
     background-color: #ffffff;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
}

.corpus_right > img {
     width: 50px;
     margin: 0 auto;
     margin-bottom: 2vh;
}

label {
     width: 100%;
}

input[type=file] {
     width: 100%;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 20px;
     font-weight: 400;
     background-color: transparent;
     border: 0px;
     outline: 0px;
     padding: 1vh 0;
     border-bottom: 1px solid #cccccc;
     margin-bottom: 4vh;
}

input[type=file]::-webkit-file-upload-button,
input[type=file]::file-selector-button {
     width: 25%;
     display: inline-block;
     background-color: orange;
     border: 0;
     outline: 0;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #000000;
     padding: 1.5vh 0;
     cursor: pointer;
}

input[type=file]::-webkit-file-upload-button:hover,
input[type=file]::file-selector-button:hover {
     background-color: #ffce00;
}

input[type=text].loading {
     width: 100%;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 20px;
     font-weight: 400;
     background-color: transparent;
     border: 0px;
     outline: 0px;
     padding: 1vh 0;
     border-bottom: 1px solid #cccccc;
     margin-bottom: 4vh;
}

.corpus_right > form > button[type=submit] {
     width: 100%;
     font-family: 'Archivo Narrow', sans-serif;
     font-size: 20px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 3px;
     text-align: center;
     background-color: orange;
     color: #000000;
     border: 0px;
     outline: 0px;
     padding: 2vh 0;
     cursor: pointer;
}

.corpus_right > form > button[type=submit]:hover {
     background-color: #ffce00;
}









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

     a.upper,
     a.lower,
     a#lowest,
     .title,
     .logging,
     .links,
     .archive h3,
     footer,
     .popup,
     .descript {
          display: none;
     }

     header {
          width: 90vw;
          height: 13vh;
          margin: 2vh 5vw 0 5vw
     }

     header > .container {
          width: 90vw;
          height: 11vh;
     }

     header .container img.logo {
          height: 45px;
          top: 2.5vh;
     }

     header .container h1 {
          font-size: 28px;
          top: 2.5vh;
     }

     main.main {
          width: 90vw;
          margin: 0 5vw;
          display: block;
     }

     nav.main {
          width: 100%;
          margin-bottom: 1vh;
          overflow: visible;
     }

     .dropdown {
          margin-top: 0;
     }

     section.main {
          width: 100%;
          max-height: 72vh;
     }

     section.main .box .logo {
          top: 3vw;
          left: 3vw;
          width: 6vw;
     }

     section.main .box {
          margin-bottom: 2vh;
     }

     section.main .box a {
          width: 100%;
          pointer-events: none;
          display: inline-block;
          margin: 0;
          padding: 0;
     }

     section.main .box a img {
          position: relative;
          display: block;
          margin: 0;
          padding: 0;
          border: none;
     }

     section.main .box .subscript {
          color: #000000;
          background-color: #ffffff;
          font-size: 18px;
          font-weight: 600;
          padding: 1vh 1vw;
          display: block;
     }

     .corpus_left {
          display: none;
     }

     .corpus_right {
          top: 20px;
          right: 4vw;
          width: 92vw;
     }
}