:root {
    color-scheme: light dark;
}

* {
    margin: 0;
    padding: 0;
    /* border: #4ea3f6 solid 1px; */
}

.link {
    float: right;
    margin-right: 1.2rem;
}

/*  parent for centering  */
.middle {
    margin-top: 1.2rem;
    margin-left: 1.2rem;
}

.container {
    height: 500px;
    width: 640px;
}

/*  small text at top  */
p {
    font-family: "Cascadia Code", monospace;
    color: light-dark(#00000050, #ffffff75);
    font-size: 18px;
    margin-bottom: 20px;
    padding-left: 3px;
    letter-spacing: -0.8px;
    font-weight: 400;
}

.straight {
    word-break: keep-all;
}

/*  big text  */
h1 {
    font-family: "Newsreader", serif;
    font-weight: 400;
    font-size: 4rem;
    margin-bottom: 22px;
    line-height: 58px;
    letter-spacing: -1px;
}

a > span:hover {
    animation: huecycle-link 5s linear infinite;
}

/*  triangle  */
h1 > a:after {
    content: '';
    display: inline-block;
    height: 2rem;
    width: 3rem;
    background: linear-gradient(0deg, #f986e7, #ff9a8f, #fdd268, #b0e94f, #4ea3f6, #f986e7, #ff9a8f, #fdd268, #b0e94f, #4ea3f6, #f986e7);
    background-size: 200% 200%;
    animation: huecycle 2s linear infinite, skew 30s linear infinite;
    margin-left: 10px;
}

iframe {
    transition: 1s;
    margin-left: -3px;
    margin-bottom: 3px;
}

#nobody:target iframe {
    aspect-ratio: 4/3;
    width: auto !important;
    height: 420px !important;
}

#nobody p  {
    opacity: 0;
    transition: 1s;
    color: light-dark(#00000050, #ffffff50);
    font-size: 15px;
    margin-left: -5px;
}

#nobody:target p {
    opacity: 1 !important;
    transition: 1s;
}

    @keyframes huecycle-link {
        0% {filter:hue-rotate(0deg);}
        100% {filter:hue-rotate(359.99deg);}
    }

    @keyframes huecycle {
        0% {background-position:0% 100%}
        100% {background-position:0% 0%}
    }

    @keyframes skew {
        0% {clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}
        25% {clip-path: polygon(80% 0%, 0% 100%, 100% 100%);}
        75% {clip-path: polygon(10% 0%, 0% 100%, 100% 100%);}
        100% {clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}
    }