@media screen and (orientation:portrait)
{
    :root
    {
        --tile-unit: 3.3vmin;
    }
}

@media screen and (orientation:landscape)
{
    :root
    {
        --tile-unit: calc(var(--size-default) * 1.2);
    }
}

main > form > figure
{
    font-size: calc(var(--size-default) * 4);
    width: calc(var(--size-default) * 6);
    height: calc(var(--size-default) * 6);
}

#logo
{
    display: flex;
    justify-content: center;
    margin-top: var(--size-default);
    margin-bottom: calc(var(--size-default) * 2);
}

.logo-tile
{
    position: relative;
    width: calc(var(--tile-unit) * 4);
    height: calc(var(--tile-unit) * 4);
    transform-style: preserve-3d;
    transition: transform 1s;
}

.logo-tile:nth-child(1)
{
    transform: translateZ(0rem) rotateY(-10deg) rotateX(20deg) rotateZ(-5deg);
}

.logo-tile:nth-child(2)
{
    transform: translateZ(0rem) rotateY(-10deg) rotateX(20deg) rotateZ(10deg);
}

.logo-tile:nth-child(3)
{
    transform: translateZ(0rem) rotateY(-15deg) rotateX(25deg) rotateZ(0deg);
}

.logo-tile:nth-child(4)
{
    transform: translateZ(0rem) rotateY(-5deg) rotateX(40deg) rotateZ(-10deg);
}

.logo-tile:nth-child(5)
{
    transform: translateZ(0rem) rotateY(-5deg) rotateX(10deg) rotateZ(5deg);
}

.logo-tile:nth-child(6)
{
    transform: translateZ(0rem) rotateY(-5deg) rotateX(35deg) rotateZ(15deg);
}

.logo-tile:nth-child(7)
{
    transform: translateZ(2rem) rotateY(-10deg) rotateX(30deg) rotateZ(0deg);
}

.logo-tile:hover
{
    transform: translateZ(0rem) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}

.logo-top
{
    width: calc(var(--tile-unit) * 4);
    height: calc(var(--tile-unit) * 4);
    background: var(--background-color-header);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: rotateY(0deg) translateZ(calc(var(--tile-unit) * 0.5));
    outline: 1px solid transparent;
    border-radius: calc(var(--tile-unit) * 0.2);
}

.logo-tile:nth-child(even) > .logo-top
{
    filter: brightness(90%);
}

.logo-top > span
{
    font-size: calc(var(--tile-unit) * 3);
    font-weight: 900;
    color: var(--color-header);
    top: calc(var(--tile-unit) * 0.6);
    position: absolute;
    text-shadow: -1px -1px 0px #000;
}

.logo-top > sup
{
    position: absolute;
    top: calc(var(--tile-unit) * 0.3);
    right: calc(var(--tile-unit) * 0.3);
    font-weight: 900;
    color: var(--color-header);
    font-size: var(--tile-unit);
}

.logo-right
{
    position: absolute;
    position: absolute;
    width: calc(var(--tile-unit) * 1);
    height: calc(var(--tile-unit) * 4);
    background: var(--color-header);
    left: calc(var(--tile-unit) * 1.5);
    transform: rotateY( 90deg) translateZ(calc(var(--tile-unit) * 2));
    outline: 1px solid transparent;
    border-radius: calc(var(--tile-unit) * 0.2);
}

.logo-bottom
{
    position: absolute;
    width: calc(var(--tile-unit) * 4);
    height: calc(var(--tile-unit) * 1);
    background: var(--color-header);
    top: calc(var(--tile-unit) * 1.5);
    transform: rotateX(-90deg) translateZ(calc(var(--tile-unit) * 2));
    outline: 1px solid transparent;
    border-radius: calc(var(--tile-unit) * 0.2);
}