@import url('https://fonts.googleapis.com/css2?family=Modak&family=Barlow+Semi+Condensed:wght@500&family=Rubik:ital,wght@0,400;0,700;1,40&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

body {
    background: #06083d;
    background-image: linear-gradient(0deg, rgba(6,8,61,1) 0%, rgba(6,8,61,0) 100%), url('assets/print10.svg')/*, url('assets/ssscribble.svg'); */;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom, center bottom;
    display: block;
    font-family: 'Rubik', sans-serif;
    font-size: 1.2em;
    color: #0c001f;
    position: relative;
    transition: background-size 0.3s linear;
}

:root {
    --plyr-color-main: #5b2c8c;
    --main-color: #5b2c8c;
    --shaw-yellow: #FBCB0A;
    --shaw-yellow-alpha: rgba(251,203,10, 0.0);
    --shaw-light-blue: #63C7C5;
}

a {
    color: var(--shaw-yellow);
    text-decoration: none;
    border-bottom: 2px solid var(--shaw-yellow);
    text-shadow: rgba(255, 255, 255, 0.0) 0 0.05em 0;
    transition: all 0.25s ease-in;
    display: inline-block;
    position: relative;
    z-index: 100;
}

a:hover {
    border-bottom: 2px solid var(--shaw-yellow-alpha);
    text-shadow: rgba(99,199,197, 0.2) 0 2px 0;
}

a::after {
    position: absolute;
    content: '';
    bottom: -5px;
    margin: 0 auto;
    left: 5%;
    width: 90%;
    border-bottom: 2px solid #fafafa;
    z-index: 90;
    opacity: 0;
    transition: all 0.4s ease-out;
    /* text-shadow: rgba(255, 255, 255, 0.1) 0 0.05em 0; */
    /* transform: translateY(-0.05em); */
}

a:hover::after {
    /* left: 2px; */
    width: 100%;
    left: 0;
    opacity: 1;
}

#nav a {
    border: none;
    color: #fafafa;
    text-shadow: var(--shaw-light-blue) 0 1px 0;
    text-align: center;
}

#nav a:hover {
    text-shadow: rgba(99,199,197, 0.8) 0 2px 0;
}

#nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: var(--main-color);
    z-index: 300;
}

#nav ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2em;
    padding: 0;
    margin: 0;
}

#nav ul li {
    padding: 1em 0.5em;
    display: inline-block;
    margin: 0 0.5em;
    text-align: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease-in;
}

#nav ul li:hover {
    background: rgba(0, 0, 0, 0.1);
}

#nav ul li a i {
    margin-right: 0.5em;
}

#nav ul li:first-child {
    text-align: left;
}


h2 {
    font-size: 3em;
    margin: 0.25em 0.6rem;
}

h3 {
    font-size: 1.77em;
    margin: 0.25em 0.7rem;
}

h4 {
    font-size: 1.5em;
    margin-bottom: 0.3em;
    font-weight: normal;
}

article {
    margin: 3em 0;
}

.live {
    background-color: #910101;
    color: #fafafa;
    font-family: 'Barlow Semi Condensed';
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    padding: 0.2em 0.4em;
    border-radius: 0.2em;
    text-shadow: rgba(0,0,0,0.4) 0 0.1em 0;
    animation: text-pulse 2s infinite;
}

.no-select {
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; 
}

#theshaw {
    font-family: 'Modak';
    font-size: 40vh;
    width: 100%;
    text-align: center;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
    transform: rotate(-45deg);
    color: rgba(255, 255, 255, 0.03);
}

#body {
    /* background: rgba(6, 8, 61, 0.98); */
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    -ms-backdrop-filter: blur(16px);
    color: #fafafa;
    border-radius: 0.2em;
    max-width: 1024px;
    margin: 0 auto;
    margin-top: 4em;
    padding: 1em;
    box-shadow: rgba(0,0,0,0.1) 0 0.25em 0.1em, rgba(0, 0, 61, 0.5) 0 0 2em;
    position: relative;
    z-index: 100;
    /* box-shadow: rgba(0, 0, 0, 0.2) 0 4px 2px,  rgba(255, 255, 255, 0.6) 0 0 2em; */
}

#body p {
    font-size: 1.4em;
    line-height: 1.6em;
    margin: 0.7em 0.7rem;
}

#live .status {
    text-align: center;
}

#clip {
    width: 1000px;
    height: auto;
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: #FBCB0A 0.2em 0.2em 0;
    transition: box-shadow 0.2s ease-out, height 0.2s linear;
}

#unmute {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    text-shadow: rgba(0,0,0,0.3) 0 0.2em 0;
    color: #fafafa;
    z-index: 200;
    cursor: pointer;
}

#unmute span {
    font-size: 1.5em;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 1em;
    background: rgba(0,0,0,0.6);
    border-radius: 1em;
    box-shadow: rgba(0,0,0,1) 0 0 0.5em;
}

#clip:hover {
    box-shadow: rgba(251,203,10, 0.5) 0.4em 0.4em 0;
}

#clip .plyr {
    /* max-height: 720px;
    min-height: 720px; */
    aspect-ratio: 16/9;
    min-height: auto;
    z-index: 150;
    transition: height 0.2s linear;
}

#clip #player-title {
    position: absolute;
    font-family: 'Barlow Semi Condensed';
    top: 0;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 4px;
    background: linear-gradient(180deg, rgba(0,0,0, 0.4) 0%, rgba(0,0,0, 0.4) 80%, rgba(0,0,0,0) 100%);
    padding: 8px;
    z-index: 160;
    opacity: 0.9;
    width: 100%;
    text-align: left;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    font-size: 1.5em;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    -ms-backdrop-filter: blur(3px);
}

#clip #player-title span {
    padding-right: 64px;
    display: block;
}

#clip #player-title.showing {
    animation: showingtitle 1s;
}

#clip:hover #player-title {
    opacity: 1;
    padding-top: 1em;
    padding-bottom: 1em;;
    background: linear-gradient(180deg, rgba(0,0,0, 0.6) 0%, rgba(0,0,0, 0.6) 90%, rgba(0,0,0,0) 100%);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    -ms-backdrop-filter: blur(0px);
}

#clip #player-next {
    position: absolute;
    z-index: 200;
    right: 0;
    top: 0;
    padding: 0.5em;
    font-size: 1.5em;
    cursor: pointer;
    text-shadow: rgba(0,0,0,0.75) 0 0 0.8em;
    transition: all 0.3s ease-in-out;
}

#clip:hover #player-next {
    padding-top: 1em;
    padding-bottom: 1em;
}

#clip #loading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    text-align: center;
    vertical-align: middle;
    background: rgba(0,0,0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    -ms-backdrop-filter: blur(4px);
    opacity: 1;
    transition: all 0.2s ease-out;
}

#clip #loading.hidden {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    -ms-backdrop-filter: blur(0);
    opacity: 0;
}

#clip #loading span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    font-size: 2em;
    text-align: center;
}

#twitch-embed {
    position: relative;
    margin: 0 auto;
    height: 720px;
    width: 100%;
    aspect-ratio: 16/9;
    text-align: center;
}

#twitch-embed iframe {
    display: inline-block;
    aspect-ratio: 16/9;
}

#twitch-goto {
    color: #fff;
    position: absolute;
    border: none;
    padding: 1em;
    opacity: 0.3;
    background: rgba(0, 0, 0, 0.7);
    transition: all 0.2s linear;
}

#twitch-goto i {
    margin-right: 0.3em;
}

#twitch-goto:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.9);
}

#siteerror {
    color: #fafafa;
    margin: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 2.5em;
}

#shaw {
    color: #5B2C8C;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.1) 0 2px 1px;
    font-size: 1.2em;
    margin-right: 0.075em;
}

#surprise {
    position: fixed;
    margin: 0;
    right: 3rem;
    bottom: 0rem;
    background: #fff;
    font-size: 1.6em;
    padding: 1em;
    transform: rotate(90deg);
    transform-origin: 100% 0%;
    border-radius: 2em;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

#surprise i {
    transition: all 0.5s linear;
}

#surprise.target i {
    transform: rotate(90deg);
}

#foot {
    position: relative;
    z-index: 30;
    width: 100%;
    text-align: center;
    opacity: 0.8;
    transition: opacity 0.3s ease-in;
}

#foot:hover {
    opacity: 1;
}

#foot ul {
    list-style: none;
}

#foot ul li {
    display: inline-block;
    padding: 1em;
    color: var(--shaw-yellow);
    font-size: 0.8em;
}

#foot ul li a {
    border-bottom: none;
}

#head {
    position: fixed;
    z-index: 40;
    bottom: 0;
    right: 0;
    --shake-amplitude: 15px;
    transition: all 0.4s ease-out;
    text-align: right;
}

#head img {
    vertical-align: middle;
    width: 290px;
    aspect-ratio: 290/337;
}

#head.shaken {
    animation: shake 0.5s infinite;
}

#head.tiltshaken {
    animation: tiltshake 0.5s infinite;
}

#head-messages {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

#head-messages li {
    text-align: right;
}

.head-message {
    background: #fafafa;
    border-radius: 1.5em;
    display: inline-block;
    position: relative;
    padding: 1em;
    margin-right: -3em;
    box-shadow: rgba(0,0,0,0.5) 0 0 1em;
    vertical-align: middle;
}

.head-message::after {
    content: '';
    display: block;
    width: 40px;
    height: 26px;
    position: absolute;
    background-image: url(assets/speech-bubble-arrow.svg);
    background-repeat: no-repeat;
    background-size: 40px 26px;
    bottom: -20px;
    right: 10px;
}

#hello-message {
    transition: opacity 0.3s ease-out;
    z-index: 90;
}

#head-message {
    z-index: 100;
}

.hidden {
    display: none;
    opacity: 0;
}

@keyframes text-pulse {
    0% {
        color: rgba(250, 250, 250, 1);
    }

    50% {
        color: rgba(250, 250, 250, 0.7);
    }
}

@keyframes shake {
    0% { transform: translateX(0) }
    25% { transform: translateX(var(--shake-amplitude)) }
    50% { transform: translateX(calc(-1 * var(--shake-amplitude))) }
    75% { transform: translateX(var(--shake-amplitude)) }
    100% { transform: translateX(0) }
}

@keyframes tiltshake {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(var(--shake-amplitude), var(--shake-amplitude)) rotate(5deg); }
    50% { transform: translate(0, 0) rotate(0eg); }
    75% { transform: translate(calc(-1 * var(--shake-amplitude)), var(--shake-amplitude)) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes showingtitle {
    0% {
        transform: translateX(-2em);
    }
    100% {
        transform: translateX(0);
    }
}

.is-live #head img {
    width: 300px;
}

/* Responsive */

@media screen and (max-width: 2240px) {
    body {
        background-size: 150%;
    }
}

@media screen and (max-width: 2048px) {
    body {
        background-size: 165%;
    }

    #foot {
        margin-bottom: 400px;
    }

    #head {
        position: absolute;
        right: 10em;
        bottom: -400px;
    }

    #surprise:hover, #surprise.target, #hello-message {
        opacity: 1;
    }

    #surprise {
        opacity: 0.1;
    }

}

@media screen and (max-width: 1800px) {
    body {
        background-size: 185%;
    }

    #surprise {
        right: 1rem;
    }
}

@media screen and (max-width: 1550px) {
    body {
        background-size: 220%;
    }

    #head {
        right: 1em;
    }
    
}

@media screen and (max-width: 1320px) {
    body {
        background-size: 250%;
    }

    #clip {
        width: 720px;
    }

    #clip .plyr {
        max-width: 720px;
        min-width: 720px;
    }

    #twitch-embed iframe {
        max-width: 720px;
    }

    #surprise, #surprise.target {
        opacity: 0;
    }

    #clip #player-title {
        font-size: 1em;
    }
}

@media screen and (max-width: 1100px) {
    #twitch-embed iframe {
        max-width: 720px;
    }
}

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

    body {
        background-size: 400%;
    }

    #head {
        right: 0;
    }

    #nav ul {
        gap: 0.2em;
    }

    #nav li a {
        font-size: 0.75em;
    }
    

    #clip {
        width: 480px;
    }

    #clip .plyr {
        /* max-width: 480px; */
        min-width: 480px;
    }
}

@media screen and (max-width: 620px) {
    body {
        background-size: 600%;
    }

    #foot {
        margin-bottom: 0px;
    }

    #head {
        bottom: -240px;
    }

    #head img, .is-live #head img {
        width: 200px;
    }

    #head-messages {
        transform: scale(0.8);
    }

    #nav {
        overflow-x: hidden;
    }

    #nav ul {
        gap: 0em;
    }

    #nav li a {
        font-size: 0.55em;
    }

    #clip {
        height: auto;
        width: auto;
    }

    #clip .plyr {
        max-height: auto;
        min-height: auto;
        max-width: auto;
        min-width: auto;
    }
}

@media screen and (max-width: 480px) {
    #head {
        bottom: -160px;
    }

    #head img, .is-live #head img {
        width: 128px;
    }
}