.everything {
--maincol: #FFFFFF;
--col1: #FFC0D7;
--col2: #F791B6;
--col3:#fff;
--col4:#012424;
--maincollight: #012424;
font-family: Hugh Is Life;
}

.overall {
zoom: 110%;
height: 400px;
width: 500px;
transition: all 1s;
}

.overall:hover {
transform:scale(calc(11/10));
}

.container {
width: 200px;
height: 128px;
margin: 100px auto;
perspective: 768px;
letter-spacing: 1px;
}

.cube {
width: 200px;
transform-style: preserve-3d;
animation: rotate 20s linear infinite;
}

.cube:hover {
animation-play-state: paused;
}

.face {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 200px;
height: 200px;
opacity: .8;
background-color: var(--maincol);
border: 2px solid var(--maincol);
box-shadow: 0px 0px 10px var(--maincol), 0px 0px 5px var(--maincol), 0px 0px 5px var(--maincol), inset 0 0 10px 3px var(--col2);
border-radius: 10px;
transition: all .3s;
}

.face:hover {
opacity: .99;
text-shadow: 0px 0px 2px var(--col1);
margin-top: -8px;
}

.face:hover .usernameface img {
filter: drop-shadow(0px 0px 1px var(--col3)) drop-shadow(0px 0px 15px var(--col1));
pointer-events: none;
}

.cube div p {
margin: 0;
text-align: center;
color: var(--maincol);
text-shadow: -1px -1px 0 var(--col2), 1px -1px 0 var(--col2), -1px 1px 0 var(--col2), 1px 1px 0 var(--col2);
font-family:'Bahnschrift', 'Arial';
letter-spacing: 1px;
font-size: 9px;
line-height: .9em;
padding-left: 10px;
padding-right: 10px;
}

.front {
transform: translateZ(160px);
background-position: center;
background-repeat: no-repeat;
}

.back {
transform: rotateY(180deg) translateZ(160px);
background-position: center;
background-repeat: no-repeat;
}

.backcontainer {
position: relative;
}

.backcontainer .backimage {
height: 150px;
position: absolute;
top: -50px;
left: -35px;
transition: all .3s;
}

.back:hover .backimage {
opacity: 0;
}

.left {
transform: rotateY(-90deg) translateX(-100px) translateZ(60px);
transform-origin: left;
background-position: center;
background-repeat: no-repeat;
}

.right {
transform: rotateY(90deg) translateX(100px) translateZ(60px);
transform-origin: right;
background-position: center;
background-repeat: no-repeat;
font-size: 9px;
}

.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top;
background-position: center;
background-repeat: no-repeat;
}

.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom;
background-position: center;
background-repeat: no-repeat;
}

@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}

.shadow {
width: 200px;
height: 200px;
box-shadow: 0 0 35px 35px #ffffff50, inset 0 0 35px 35px #ffffff50;
transform: rotateX(90deg) translateZ(-250px) rotateY(180deg) translateX(0px);
}

.usernameface {
color: var(--col2);
zoom: .47;
text-align: center;
padding-top: 20px;
margin-left: -40px;
}

.usernameface img {
width: 400px;
image-rendering: crisp-edges;
filter: drop-shadow(0px 0px 5px var(--col3)) drop-shadow(0px 0px 15px var(--col2));
pointer-events: none;
}

.usernamefaceimg2 {
width: 400px;
image-rendering: crisp-edges;
filter: drop-shadow(0px 0px 5px var(--col1)) drop-shadow(0px 0px 15px var(--col1));
pointer-events: none;
position:absolute;
top:180px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}

mark{
-webkit-background-clip: text;
}

a {
color: var(--maincol);
text-decoration: none;
}

a:hover {
font-weight: 900;
}

img {
pointer-events: none;
user-select: none
}

img::selection {
background-color: transparent;
}

::selection {
background-color: var(--col1);
}

@font-face {
font-family: Hugh Is Life;
src: url(https://l005l6ll06.neocities.org/fonts/HughIsLife.ttf);
}

@media only screen and (max-width: 768px) {
  .everything {
--maincol: #FFFFFF;
--col1: #FFC0D7;
--col2: #F791B6;
--col3:#fff;
--col4:#012424;
--maincollight: #012424;
font-family: Hugh Is Life;
}

.overall {
zoom: 105%;
height: 400px;
width: 500px;
transition: all 1s;
}

.overall:hover {
transform:scale(calc(11/10));
}

.container {
width: 200px;
height: 128px;
margin: 100px auto;
perspective: 768px;
letter-spacing: 1px;
}

.cube {
width: 200px;
transform-style: preserve-3d;
animation: rotate 20s linear infinite;
}

.cube:hover {
animation-play-state: paused;
}

.face {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 200px;
height: 200px;
opacity: .8;
background-color: var(--maincol);
border: 2px solid var(--maincol);
box-shadow: 0px 0px 10px var(--maincol), 0px 0px 5px var(--maincol), 0px 0px 5px var(--maincol), inset 0 0 10px 3px var(--col2);
border-radius: 10px;
transition: all .3s;
}

.face:hover {
opacity: .99;
text-shadow: 0px 0px 2px var(--col1);
margin-top: -8px;
}

.face:hover .usernameface img {
filter: drop-shadow(0px 0px 1px var(--col3)) drop-shadow(0px 0px 15px var(--col1));
pointer-events: none;
}

.cube div p {
margin: 0;
text-align: center;
color: var(--maincol);
text-shadow: -1px -1px 0 var(--col2), 1px -1px 0 var(--col2), -1px 1px 0 var(--col2), 1px 1px 0 var(--col2);
font-family:'Bahnschrift', 'Arial';
letter-spacing: 1px;
font-size: 10px;
line-height: .8em;
padding-left: 10px;
padding-right: 10px;
}

.front {
transform: translateZ(160px);
background-position: center;
background-repeat: no-repeat;
}

.back {
transform: rotateY(180deg) translateZ(160px);
background-position: center;
background-repeat: no-repeat;
}

.backcontainer {
position: relative;
}

.backcontainer .backimage {
height: 150px;
position: absolute;
top: -50px;
left: -35px;
transition: all .3s;
}

.back:hover .backimage {
opacity: 0;
}

.left {
transform: rotateY(-90deg) translateX(-100px) translateZ(60px);
transform-origin: left;
background-position: center;
background-repeat: no-repeat;
}

.right {
transform: rotateY(90deg) translateX(100px) translateZ(60px);
transform-origin: right;
background-position: center;
background-repeat: no-repeat;
}

.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top;
background-position: center;
background-repeat: no-repeat;
}

.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom;
background-position: center;
background-repeat: no-repeat;
}

@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}

.shadow {
width: 200px;
height: 200px;
box-shadow: 0 0 35px 35px #ffffff50, inset 0 0 35px 35px #ffffff50;
transform: rotateX(90deg) translateZ(-250px) rotateY(180deg) translateX(0px);
}

.usernameface {
color: var(--col2);
zoom: .47;
text-align: center;
padding-top: 20px;
margin-left: -40px;
}

.usernameface img {
width: 400px;
image-rendering: crisp-edges;
filter: drop-shadow(0px 0px 5px var(--col3)) drop-shadow(0px 0px 15px var(--col2));
pointer-events: none;
}

.usernamefaceimg2 {
width: 400px;
image-rendering: crisp-edges;
filter: drop-shadow(0px 0px 5px var(--col1)) drop-shadow(0px 0px 15px var(--col1));
pointer-events: none;
position:absolute;
top:180px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}

mark{
-webkit-background-clip: text;
}

a {
color: var(--maincol);
text-decoration: none;
}

a:hover {
font-weight: 900;
}

img {
pointer-events: none;
user-select: none
}

img::selection {
background-color: transparent;
}

::selection {
background-color: var(--col1);
}

@font-face {
font-family: Hugh Is Life;
src: url(https://l005l6ll06.neocities.org/fonts/HughIsLife.ttf);
}
}
}

* {cursor: url(https://cdn.glitch.global/7eefa97e-e9ba-47ff-9a9a-ad662be1fc2f/cur88_00000.cur?v=1667665922409), url(https://cdn.glitch.global/7eefa97e-e9ba-47ff-9a9a-ad662be1fc2f/cur88_00000.png?v=1667595849754), auto !important;}