header img {
    max-height: 150px;
    margin: 1rem 0;
}

header {
    display: flex;
    flex-direction: row;
}

main {
    justify-content: space-around;
}

.handle {
    cursor: move;
    cursor: -webkit-grabbing;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    /*
    border: groove;
    border-color: darkgoldenrod;
    background-color: midnightblue;
    I */
    padding: 0.2rem;

    /*
    backdrop-filter: blur(15px);
    border-image: url("../pics/gui/buttonzpurp.gif");
    border-style: solid;
    border-image-slice: 7 7 7 7;
    border-image-width: 7px 7px 7px 7px;
    background-color: hsla(275, 100%, 12%, 0.6);
    */

    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -3px 0px 0 #000,
        3px 0px 0 #000,
        0px -3px 0 #000,
        0px 3px 0 #000;
}

.handle:hover {
    scale: 1.05;
}

h2.handle {
    backdrop-filter: blur(15px) brightness(50%);
    border-radius: 25px;
    background-color: hsl(28th 0, 100%, 15%);
    box-shadow:
        inset -12px -12px 16px 0px hsla(0, 0%, 0%, 0.6),
        inset 0px 11px 28px 0px hsl(280, 100%, 50%);
}

.guestcount div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 1rem;
    white-space: nowrap;
}

.updates {
    padding: 7px;
    height: 100%;
    min-height: 12rem;
    iframe {
        border: 0;
        width: 100%;
        height: 100%;
    }
}

.shr-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ball {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    box-sizing: border-box;
    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
}

/* about me section mess */

.about-me {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    section {
        margin: 0.3rem;
        padding: 4px 4px 0px 4px;
        max-width: 128px;
        img {
            min-width: 64px;
        }
    }
    a img {
        border: solid;
    }
}

.dictionary {
    height: fit-content;
    max-width: 21rem;
    div {
        flex-wrap: wrap;
    }
}

.dictionary h3 {
    min-width: 5rem;
}

.dictionary div {
    display: flex;
}

.dictionary div button {
    scale: 60%;
    cursor: pointer;
    height: 4rem;
}

.model {
    /*margin-left: auto;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    /*width: 5rem;*/
    font-size: small;
    padding-bottom: 0;
    model-viewer {
        /*height: 5rem;*/
        /*width: 5rem;*/
    }
}

/* footer stuff */

.wrapper {
    margin-bottom: 3vw;
    display: flex;
    align-items: center;
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100vw;
}

.card img {
    width: 64px;
    z-index: 20;
}

/*cube*/

@media (max-width: 500px) {
    #cube-section {
        display: none;
    }
}

.debug {
    position: absolute;
    left: 0;
    top: 70px;
    transform: translate(calc(50vw - 50%));
    font: 4vmin arial;
}

#cube-section {
    min-height: 450px;
    min-width: 400px;
}

.cube,
.cube * {
    position: absolute;
    top: 50%;
    left: 50%;
}

.cube {
    user-select: none;
    cursor: move;
}
.cube div span {
    position: relative;
    top: 60px;
    left: -5px;
    font-size: 8em;
}

.face {
    box-sizing: border-box;
    border: solid 1px;
    margin: -8em;
    width: 16em;
    height: 16em;
    /*box-shadow: inset 0 0 15px rgba(0,0,255,0.6);*/
    text-align: center;
    backface-visibility: hidden;
}
.face:nth-child(1) {
    background: url("../pics/sadface.gif") black;
    background-size: cover;
}
.face:nth-child(2) {
    background: url("../pics/cheese.gif") black;
    background-size: cover;
}
.face:nth-child(3) {
    background: url("../pics/mouth.gif") black;
    background-size: cover;
}
.face:nth-child(4) {
    background: url("../pics/devil.gif") black;
    background-size: cover;
}
.face:nth-child(5) {
    background: url("../pics/robot.gif") black;
    background-size: cover;
}
.face:nth-child(6) {
    background: url("../pics/ohno.gif") black;
    background-size: cover;
}