*, :after, :before {
    box-sizing:border-box
}
body, html, li, p, ul {
    margin: 0;
    padding:0;
    cursor: url('./contents/cursor-default.png'), auto;
}
ul {
    list-style:none
}
button {
    margin:0;
}
body {
    scroll-behavior: smooth;
    text-rendering:optimizeSpeed;
}
a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink:auto;
}
@font-face {
    font-family: VCR OSD Mono;
    src: url(./contents/VCROSDMono.woff2) format("woff2"), url(./contents/VCROSDMono.woff2) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display:swap;
}
@keyframes turn-on-transform {
    0% {
        transform:scaleY(.6) translate(0) skew(2deg)
    }

    6% {
        transform:scale(2) translateY(-20%) skew(2deg)
    }

    30% {
        transform:scale(1) translateY(-20%) skew(-2deg)
    }

    50% {
        transform:scaleY(.8) translateY(40%) skew(-2deg)
    }

    to {
        transform:scale(1) translate(0) skew(0)
    }
}
@keyframes turn-on-filter {
    0% {
        filter:brightness(1) invert(1) saturate(1.2)
    }

    3% {
        filter:brightness(4) invert(1) saturate(2)
    }

    15% {
        filter:brightness(4) invert(0) saturate(2)
    }

    30%, 50% {
        filter:brightness(10) invert(0) saturate(1)
    }

    70% {
        filter:contrast(1) brightness(1) invert(0) saturate(1)
    }
}
.header {
    position: relative;
    min-height: 300px;
    height: 50vh;
    margin-bottom: 2.07rem;
    text-transform:uppercase
}
.header__container {
    position: -webkit-sticky;
    position: sticky;
    top:100px
}
@media (min-width: 500px) {
    .header__container {
        display: flex;
        justify-content:space-between
    }

    .header__info {
        text-align:right
    }
}
.nav__breadcrumb {
    display: flex;
    align-items: center;
    min-height:28px
}
.nav__breadcrumb li:last-child {
    display: flex;
    align-items:center
}
.nav__breadcrumb li:last-child:after {
    margin-left: .5ch;
    content: "►";
    font-size:1.2em
}
@media (max-width: 480px) {
    .nav {
        margin-bottom:2rem
    }

    .nav__menu li {
        margin-top:.6rem
    }
}
.big-text {
    font-size: clamp(24px, 4.6vw, 63px);
    font-size: var(--font-size-secondary);
    text-transform:uppercase
}
.button-text {
    font-family: inherit;
    color: inherit;
    text-decoration: inherit;
    font-size: inherit;
    background: inherit;
    text-transform: inherit;
    text-shadow: inherit;
    all: inherit;
    padding: 0;
    border: none;
    display: inline;
    color: #fff;
    color: var(--text-secondary);
    line-height: .9;
    -webkit-appearance: none;
    appearance:none
}
.button-text, a {
    position: relative;
    text-decoration: none;
    color: #fff;
    color: var(--text-secondary);
    background-position: 50%;
    background-size: 90% 0;
    background-repeat:no-repeat
}
.bio_photo {
    position: relative;
    display: inline-block; 
    color: #fff;
    z-index: 9999;
}
.bio_photo::after {
    content: url("contents/me.jpg");
    position: absolute;
    z-index: 34;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 0; 
    height: 0; 
    opacity: 0;
    background-size: cover;
    transition: opacity 0.5s, width 0.5s, height 0.5s; 
    pointer-events: none; 
    transform: translateX(-50%); 
}
.bio_photo:hover::after {
    opacity: 1;
    width: 301px; 
    height: 300px; 
}
.main {
    position: relative;
    background-color: #000;
    overflow: hidden;
    margin:0 auto
}
.main-screen {
    animation:turn-on-transform .4s, turn-on-filter 1s
}
.main-effect {
    position: absolute;
    z-index: 8;
    z-index: var(--layer-tv-effects);
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}
.main-content {
    position: relative;
    z-index: 13;
    z-index: var(--layer-content);
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto;
    background-color:rgba(0, 0, 0, .4)
}
:root {
    --text-primary: #a0a0a0;
    --text-secondary: #fff;
    --font-primary: "VCR OSD Mono", monospace;
    --font-size-primary: clamp(16px, 1.8vw, 34px);
    --font-size-secondary: clamp(24px, 4.6vw, 63px);
    --line-height: 1.4;
    --layer-top: 55;
    --layer-me-hover: 34;
    --layer-content-hover: 21;
    --layer-content: 13;
    --layer-tv-effects: 8;
    --layer-channels: 5;
    --glitchy-blue: rgba(2, 183, 182, 0.4);
    --glitchy-red: rgba(183, 2, 2, 0.4);
    --container-width: 80%;
    --gui-side: calc(50% - var(--container-width) /2);
    --gui-bottom:2.94117647059rem
} 
::-webkit-scrollbar-track {
    background-color:transparent
}
::-webkit-scrollbar {
    width:3px
}
::-webkit-scrollbar-thumb {
    background-color:#28272a
}
html {
    font-family: VCR OSD Mono, monospace;
    font-family: var(--font-primary);
    font-weight: 400;
    font-style: normal;
    color: #a0a0a0;
    color: var(--text-primary);
    font-size: clamp(16px, 1.8vw, 34px);
    font-size: var(--font-size-primary);
    line-height: 1.4;
    line-height:var(--line-height)
}
body {
    background-color: #000;
    overflow:hidden
}
  .main, .main-content, .main-screen, body, html {
    height:100%
}
.page-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-width: 100%;
    min-height: 100vh;
    width: 80%;
    width: var(--container-width);
    margin:0 auto
}
.glitchy-text {
    --shadow-x-distance: 2px;
    --shadow-y-distance: 1px;
    text-shadow: var(--shadow-x-distance) var(--shadow-y-distance) 0 rgba(2, 183, 182, .4), calc(var(--shadow-x-distance) * -1) calc(var(--shadow-y-distance) * -1) 0 rgba(183, 2, 2, .4);
    text-shadow:var(--shadow-x-distance) var(--shadow-y-distance) 0 var(--glitchy-blue), calc(var(--shadow-x-distance) * -1) calc(var(--shadow-y-distance) * -1) 0 var(--glitchy-red)
}
.glitchy-image {
    --shadow-x-distance: 2px;
    --shadow-y-distance: 1px;
    filter: drop-shadow(var(--shadow-x-distance) var(--shadow-y-distance) 0 rgba(2, 183, 182, .4)) drop-shadow(calc(var(--shadow-x-distance) * -1) calc(var(--shadow-y-distance) * -1) 0 rgba(183, 2, 2, .4));
}
@media (min-width: 481px) {
    .glitchy-text {
        --shadow-x-distance: 3px;
        --shadow-y-distance:2px
    }
}
@media (min-width: 960px) {
    .glitchy-text {
        --shadow-x-distance: 4px;
        --shadow-y-distance:3px
    }
}
body::after {
    content: "";
    background: url('./contents/effect-artifacts.webp') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    opacity: 0.5;
    top: 5px;
    left: 3px;
    bottom: 5px;
    right: 3px;
    position: absolute;
    z-index: -1;  

}.secondary-text {
    position: relative;
    display: inline-block;
    color: var(--text-secondary); 
}
.secondary-text:hover {
    background-image: url("./contents/rainbow-static.gif"); 
    color: var(--text-secondary); 
    background-size: cover; 
}
.icon-container {
    margin-top: 100px;
    padding-bottom: 20px;
}
.icon-container ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0 10px; 
}
body.animate {
    animation: turn-on-transform 1s, turn-on-filter 1s;
}