@charset "UTF-8";
/* 

    FONTS


*/
@font-face {
  font-family: 'Times Now';
  src: url(../fonts/TimesNow-LightItalic.woff2) format("woff2"), url(../fonts/TimesNow-LightItalic.woff) format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'Times Now';
  src: url(../fonts/TimesNow-Light.woff2) format("woff2"), url(../fonts/TimesNow-Light.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Apercu Pro Mono';
  src: url(../fonts/ApercuPro-Mono.woff2) format("woff2"), url(../fonts/ApercuPro-Mono.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Alliance';
  src: url(../fonts/AllianceNo1-RegularItalic.woff2) format("woff2"), url(../fonts/AllianceNo1-RegularItalic.woff) format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'Alliance';
  src: url(../fonts/AllianceNo1-Regular.woff2) format("woff2"), url(../fonts/AllianceNo1-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

/* 

    SASS


*/
a {
  text-decoration: none; }

body {
  font-size: 1em;
  font-family: "Alliance"; }

#container {
  display: flex;
  height: 100vh;
  max-height: 100vh;
  align-items: flex-start;
  /*      border: 5px solid green;*/ }
  @media only screen and (max-width: 800px) {
    #container {
      max-height: none; } }

.container-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  max-height: 95vh;
  width: 100%;
  padding: 1em; }
  @media only screen and (max-width: 800px) {
    .container-wrapper {
      max-height: none; } }

.container-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  vertical-align: middle;
  align-content: middle; }

.container-row#news a {
  font-size: .8em;
  width: 100%;
  color: #eb80ff;
  padding: .15em;
  line-height: 20px; }

.container-row#news a:before {
  content: "✧･ﾟ: *✧･ﾟ:*"; }

.container-row#news a:after {
  content: "*:･ﾟ✧*:･ﾟ✧"; }

.container-row#intro {
  min-width: 95vw;
  padding: .5em 0; }
  .container-row#intro p {
    font-size: .8em; }
  .container-row#intro a._more {
    display: inline;
    color: #eb80ff;
    letter-spacing: -.25px; }
  .container-row#intro a._more:hover {
    cursor: pointer;
    color: #67686A; }
  .container-row#intro input {
    font-size: .8em; }

h5#opener {
  font-size: .6em;
  font-weight: normal;
  margin: 0;
  color: #67686A;
  width: 100%;
  display: block; }
  h5#opener strong {
    color: #eb80ff;
    font-weight: normal; }

.container-column {
  opacity: 0.9; }

.container-column ._this a {
  font-size: .7em;
  letter-spacing: -.25px;
  padding: .15em .25em;
  width: 100%;
  display: block;
  margin: .25em;
  color: #67686A; }

.container-column ._this a:hover {
  opacity: 1;
  cursor: ns-resize;
  color: #eb80ff; }

#index {
  height: auto; }
  #index .container-column ._this {
    max-height: calc(75vh - 6em);
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: "Alliance";
    color: #55585a;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear; }
  #index .container-column ._this a[href*="https://"],
  #index .container-column ._this a[href*="mailto:"],
  #index .container-column ._this a[href*="."],
  #index .container-column ._this a[onclick] {
    color: #eb80ff;
    text-decoration: none; }
  #index .container-column ._this a[href*="https://"]:hover,
  #index .container-column ._this a[href*="mailto:"]:hover,
  #index .container-column ._this a[href*="."]:hover,
  #index .container-column ._this a[onclick]:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    cursor: pointer !important; }
  #index .__sound {
    border-bottom: 1px solid #eaebeb;
    padding: 1em .5em;
    font-size: .8em; }
    #index .__sound u {
      font-family: "Apercu Pro Mono";
      text-transform: uppercase;
      font-size: .5em;
      text-decoration: none;
      border: 1px solid #eaebeb;
      padding: .25em 1em;
      border-radius: 20px; }
  @media only screen and (max-width: 800px) {
    #index {
      max-height: none; }
      #index .container-column {
        height: auto; }
      #index .container-column ._this {
        height: 300px;
        overflow-x: hidden; } }

.introduction p {
  display: inline-block;
  max-width: 450px;
  line-height: 120%;
  font-size: .8em;
  font-family: "Alliance";
  text-indent: 40px;
  color: #67686A; }

.newsletter {
  display: inline-block;
  text-align: left;
  font-size: .8em; }
  .newsletter input[type=text] {
    color: #67686A;
    font-family: "Apercu Pro Mono";
    letter-spacing: -.5px;
    background: #eaebeb;
    outline: 0;
    border: 1px transparent; }
  .newsletter input[type=submit] {
    color: #55585a;
    font-family: "Apercu Pro Mono" !important;
    border: 1px transparent;
    outline: 0;
    text-transform: uppercase; }
  .newsletter input[type=submit]:hover {
    color: #eb80ff;
    box-shadow: 0 0 10px #eb80ff;
    border: 1px solid #eb80ff; }
  .newsletter input[type=text]:focus {
    outline: none !important;
    box-shadow: 0 0 10px #eb80ff;
    border: 1px solid #eb80ff; }

@media only screen and (max-width: 800px) {
  .container-row {
    flex-wrap: wrap;
    justify-content: flex-start; }
  .introduction {
    padding: .5em 0; } }

.container-row#footer {
  display: block;
  color: #67686A;
  border-bottom: 1px solid #eaebeb;
  padding: .25em 0 .5em 0; }
  .container-row#footer h5 {
    display: inline-block;
    margin: 0;
    font-weight: normal;
    margin-right: 2.5em; }
  .container-row#footer .contact {
    font-size: .6em; }
    .container-row#footer .contact a {
      color: #eb80ff;
      text-decoration: none; }

.container-column {
  border-right: 1px solid #eaebeb;
  flex-basis: 0;
  flex-grow: 1;
  height: 100%;
  min-width: 200px;
  overflow-y: hidden;
  overflow-x: hidden; }

.container-column:last-of-type {
  border-right: 0;
  margin: 0; }

.container-column ._iam {
  padding: .25em 0;
  border-bottom: 1px solid #eaebeb; }

.container-column ._iam h1 {
  font-weight: normal;
  font-family: "Times Now";
  color: #67686A;
  font-size: 1.25em;
  text-transform: uppercase;
  padding: .15em .25em;
  margin-bottom: 0; }

.title {
  position: absolute;
  display: inline-block;
  padding: .25em;
  margin: 0;
  background: #fff;
  border: 1px solid #000; }

#wip {
  position: fixed;
  top: 50vh;
  left: -8vw;
  z-index: 9999;
  width: 150vw;
  background: #eb80ff;
  padding: .25em;
  transform: rotate(22deg);
  box-shadow: 0 0 50px #eb80ff;
  mix-blend-mode: exclusion;
  color: #fff; }

#no {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: #eb80ff;
  color: #fff;
  padding: 10vw;
  font-size: 4em;
  text-align: center;
  letter-spacing: -2px;
  z-index: 999;
  display: none; }

[draggable=true] {
  cursor: move; }

.pc {
  border: 1px solid #55585a;
  padding: 1em;
  object-fit: contain;
  position: fixed;
  z-index: 999;
  mix-blend-mode: exclusion;
  backdrop-filter: grayscale(80%) blur(50px);
  z-index: 99;
  display: none; }
  .pc img {
    padding: 1.5em 0 0 0; }
  .pc blockquote {
    max-width: 300px;
    margin: 0;
    padding: 0;
    padding-top: 1.5em;
    font-family: "Times Now";
    font-style: italic; }
  .pc a {
    position: absolute;
    padding: 1em;
    font-size: .5em;
    width: 100%;
    background: #000;
    color: #fff;
    height: 25px;
    right: 0;
    top: 0;
    font-family: "Apercu Pro Mono"; }
  .pc a:hover {
    cursor: pointer; }
  .pc p {
    padding-top: 2em;
    max-width: 400px;
    font-size: .8em;
    line-height: 150%; }

.pc._bg {
  background: #fff;
  box-shadow: 0 0 20px #eb80ff; }

/*


      OTHER PAGES


*/
#cover .inactive-links {
  display: inline-block;
  margin-left: 0;
  margin-right: auto;
  vertical-align: text-bottom; }

#cover .inactive-links:hover a:not(:hover) {
  opacity: 0.3; }

#cover .inactive-links a {
  font-family: "Times Now";
  font-size: 2em;
  display: inline-block;
  color: #7e8183;
  text-decoration: none;
  letter-spacing: -1px;
  margin: 0 .5em;
  vertical-align: -38px;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  cursor: pointer; }

#cover .inactive-links a._dead {
  cursor: not-allowed; }

#cover .social-links a {
  font-family: "Apercu Pro Mono";
  color: #7e8183;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: normal;
  font-size: .5em;
  display: inline-block;
  padding: .25em;
  line-height: 50px;
  vertical-align: middle; }

#cover .social-links a:hover {
  color: #eb80ff; }

@media only screen and (max-width: 800px) {
  #cover .inactive-links a {
    font-size: 1.5em;
    margin: 0 .25em; }
  #cover .social-links a {
    line-height: 100%; } }

.container-row#cover h1 {
  font-family: "Times Now";
  font-weight: normal;
  letter-spacing: -2.5px;
  font-size: 4em;
  display: inline-block;
  margin: 0; }

#page-projects .container-row#filter {
  display: flex;
  justify-content: flex-start;
  padding: 1em 0; }
  #page-projects .container-row#filter a {
    margin-right: 1em;
    padding: .25em; }
  #page-projects .container-row#filter a:hover {
    color: #eb80ff;
    cursor: pointer; }
  @media only screen and (max-width: 800px) {
    #page-projects .container-row#filter a {
      font-size: .8em;
      margin-right: .5em; } }

#page-projects #projects .project-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1em 0; }

#page-projects #projects ._project {
  padding: .5em;
  width: 30vw;
  max-width: 380px;
  object-fit: contain;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear; }
  @media only screen and (max-width: 700px) {
    #page-projects #projects ._project {
      width: 100%;
      max-width: 100%; } }
  #page-projects #projects ._project h2 {
    font-family: "Times Now";
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 80%;
    font-size: 2em;
    margin: 0;
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -ms-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear;
    color: #67686A; }
    #page-projects #projects ._project h2 sup {
      font-size: .3em !important;
      letter-spacing: .25px;
      font-family: "Apercu Pro Mono";
      color: #7e8183; }
  #page-projects #projects ._project p {
    color: #67686A;
    font-size: .8em; }
  #page-projects #projects ._project a {
    color: #eb80ff; }
  #page-projects #projects ._project img {
    padding: 0;
    max-width: 100%; }

#page-projects #projects ._project:hover {
  cursor: pointer;
  box-shadow: 0 0 20px #eb80ff; }
  #page-projects #projects ._project:hover h2 {
    color: #eb80ff; }

audio {
  border-radius: 50px;
  height: 20px;
  background: transparent;
  outline: none;
  border: none;
  font-size: .8em; }

audio::-webkit-media-controls-panel {
  margin-left: -1.5em;
  border: 0;
  background: #fff;
  outline: 0; }

.func-accordion {
  width: 100%; }
  .func-accordion h4 {
    text-transform: uppercase;
    font-family: "Apercu Pro Mono";
    font-weight: normal;
    font-size: .5em;
    border-bottom: 1px solid #eaebeb;
    color: #55585a;
    margin: .5em 0;
    text-align: right; }
  .func-accordion h4:hover {
    cursor: n-resize; }