@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Outfit&display=swap);

html, body {
    /* height: 100vh; */
    width: 100vw;
    margin: 0;
    color: #fff;
    background-color: #000;
    font-family: Outfit, sans;
    overflow-x: hidden;
}
#container {
    display: flex;
    align-items: center;
    flex-direction: column;
    user-select: none;
}

/* @keyframes spin1 {
    from {--tlangle: 0deg}
    to {--tlangle: 359deg}
}
@property --tlangle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
} */



#tierlist {
    width: 90vw;
    height: 600px;
    border: 3px solid #fff;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    user-select: none;
}
/* #tierlist::after, #tierlist::before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: conic-gradient(from var(--tlangle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
    padding: 8px;
    border-radius: 24px;
    animation: 3s spin1 linear infinite;
} */

.tier {
    flex-grow: 1;
    border: 1px solid #fff;
}
.tiername {
    height: 100%;
    width: 60px;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #fff;
}
.t1 {background-color: #ff7f7f}
.t2 {background-color: #ffbf7f}
.t3 {background-color: #ffdf7f}
.t4 {background-color: #ffff7f}
.t5 {background-color: #7eff80}
.t6 {background-color: #ff7ffe}
.t7 {background-color: #807fff}
.t8 {background-color: #a3a3a3; font-size: 20px; text-align: center}

.picture {
    position: absolute;
    display: inline-block;
}
.pic {
    border: 2px solid white;
}
/* #pictures {
    border: 2px solid #f00;
    height: 100vh;
    width: 100vw;
} */

.spinny {
    animation: spinny 3s linear infinite;
}
@keyframes spinny {
    from {rotate: 0deg;}
    to {rotate: 359deg;}
}

@property --yayangle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.yaypic {
    z-index: 1;
}
.yaypicpic {
    border: 2px solid transparent;
    /* margin: 2px; */
}

.yaypic::after, .yaypic::before {
    content: '';
    width: 100%;
    height: 95%;
    background-image: conic-gradient(from var(--yayangle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
    /* background-image: conic-gradient(from 0deg,#ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #ff5722); */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-52.5%);
    z-index: -1;
    padding: 2px;
    animation: 3s yayspin linear infinite;
}
.yaypic::before {
    filter: blur(40px);
}

@keyframes yayspin {
    from {--yayangle: 0deg}
    to {--yayangle: 359deg}
}