@property --t {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
}

@keyframes time {
    0% {
        --t: 0
    }
    100% {
        --t: 86400
    }
}

@font-face {
    font-family: 'Nexa Bold Backup';
    src: url('Nexa Bold.otf');
}

:root {
    font-family: "Nexa Bold", "Nexa Bold Backup", "Trebuchet MS";
    animation: time 86400s linear infinite;
    --fogEcolor: #eddbff;
    --fogEimage: url('FogE1.png');
    background-color: color-mix(in srgb-linear, var(--fogEcolor) 80%, #ffffff 20%);
    --tileEntityAtlasWidthPixels: 1440;
    --tileEntityAtlasHeightPixels: 1440;
    --tileEntityAtlasWidthTiles: 4;
    --tileEntityAtlasHeightTiles: 4;
    --tileEntityCoordinateX: 0;
    --tileEntityCoordinateY: 0;
    --tileEntityMultipleTileWidth: 1;
    --tileEntityMultipleTileHeight: 1;
    --fogADisplay: initial; 
    --fogBDisplay: initial; 
    --fogCDisplay: initial; 
    --fogDDisplay: initial; 
    --fogEDisplay: initial; 
}        

.float {
    rotate: calc(sin(var(--t)) * 1deg);
}

.fog {
    /* mask-image: url('webassets/Fog.png'); */
    /* background-color: #e68fe6; */
    /* background-blend-mode: multiply; */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -15;
}

/*
.fogA {
    mask-image: url('webassets/Fog.png');
    background-color: #e68fe6
}
*/


.fogA {
    z-index: -15;
    background-image: url('FogA.png');
    background-position: calc(rem(sin(var(--t) * 0.0562) * 4 + sin(var(--t) * 0.00067) * 392, 250) * 60.0px)
                            calc(rem(sin((var(--t) + 0.96) * 0.02012) * 2.4 + sin(var(--t) * 0.000906) * 163.05, 250) * 60.0px);
    display: var(--fogADisplay);
}
.fogB {
    z-index: -14;
    opacity: 50%;
    background-image: url('FogB.png');
    background-position: calc(rem(sin(var(--t) * 0.0472) * 6 + sin(var(--t) * 0.00017) * 532, 250) * 60.0px)
                            calc(rem(sin((var(--t) + 0.96) * -0.14) * 1.5 + sin(var(--t) * 0.0017) * 243, 250) * 60.0px);
    background-size: 750px;
    display: var(--fogBDisplay);
}
.fogC {
    z-index: -13;
    opacity: 15%;
    background-image: url('FogC.png');
    background-position: calc(rem(sin(var(--t) * 0.07483) * -0.8 + sin(var(--t) * 0.00098003) * 160, 250) * 60.0px)
                            calc(rem(sin((var(--t) + 5610.96) * -0.065) * 5.2 + sin(var(--t) * 0.0003) * -630, 250) * 60.0px);
    background-size: 200px;
    display: var(--fogCDisplay);
}
.fogD {
    z-index: -12;
    opacity: 50%;
    background-image: url('FogD.png');
    background-position: calc(rem(sin(var(--t) * 0.08455) * -1.6 + sin(var(--t) * 0.00028) * 136, 250) * 60.0px)
                            calc(rem(sin((var(--t) - 1521.1) * 0.00905) * 8 + sin(var(--t) * -0.0004747) * 364, 250) * 60.0px);
    background-size: 1274px;
    display: var(--fogDDisplay);
}
.fogE {
    z-index: -11;
    background-image: var(--fogEimage);
    background-position: calc(rem(sin(var(--t) * 0.0702) * 4 + sin(var(--t) * 0.00048) * 200, 250) * 60.0px)
                            calc(rem(sin((var(--t) + 0.96) * 0.06622) * 4 + sin(var(--t) * 0.00043) * 200, 250) * 60.0px);
    background-size: 230px;
    display: var(--fogEDisplay);
}


.timedisplay::after {
    content: counter(t);
    counter-reset: t calc(var(--t) * 1000);
}

.TimeSymbol {
    position: absolute;
}

.centerOfScreen {
    position: fixed;
    left: 50%;
    top: 50%;
}
.topLeftOfSCreen {
    position: fixed;
    left: 0%;
    top: 0%;
}
.bottomRightOfScreen {
    position: fixed;
    left: 100%;
    top: 100%;
}

.ParticleContainer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -8;
}

@keyframes swivel {
    from {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    to {
        transform: rotate3d(0, 1, 0, 3600deg);
    }
}

.Swivel {
    animation: swivel 4s linear infinite;
}

@keyframes tileFloat {
    
}

.TileEntity {
    position: fixed;
    background-image: url('08\ Float.png');
    width: calc(var(--tileEntityAtlasWidthPixels) * 1px / var(--tileEntityAtlasWidthTiles) * var(--tileEntityMultipleTileWidth));
    height: calc(var(--tileEntityAtlasHeightPixels) * 1px / var(--tileEntityAtlasHeightTiles) * var(--tileEntityMultipleTileHeight));
    background-position-x: calc(var(--tileEntityAtlasWidthPixels) * 1px / var(--tileEntityAtlasWidthTiles) * var(--tileEntityCoordinateX));
    background-position-y: calc(var(--tileEntityAtlasHeightPixels) * 1px / var(--tileEntityAtlasHeightTiles) * var(--tileEntityCoordinateY));
}

.TileEntityContainer {
    scale: 50%;
    position: fixed;
    top: 0px;
    left: 0px;
}

.AvatarContainer {
    width: 200px;
    height: 200px;
    /*
    overflow: hidden;
    background-color: white; */
}

.AvatarBackground {
    width: inherit;
    height: inherit;
    overflow: hidden;
    background-color: white;
    position: absolute; /* must be absolute to clip characters with overflow: hidden! */
}

.AvatarCharacter {
    position: absolute;
    left: 0px;
    top: 0px;
    color: grey;
    font-size: 80px;
    margin: 0;
    width: min-content;
}

@keyframes avatarCharacterSelectedBlink {
    from {
        border-style: solid;
    }
    to {
        border-style: dashed;
    }
}

.AvatarCharacterSelected {
    border: 10px;
    margin: -10px;
    animation: avatarCharacterSelectedBlink 1.2s linear infinite;
}

.WideInput {
    width: 400px;
}