:root {
 --cubeWidth: 300px;
 --translateZ: 150px
}

@font-face{
    font-family: grapesoda;
    src: url(assets/fonts/GrapeSoda.ttf);
}

@font-face {
    font-family: maduofmg;
    src: url(assets/fonts/madoufmg.ttf);
}

@font-face {
    font-family: riicookie;
    src: url(assets/fonts/RiiCookieL.otf);
}

:lang(en) {
    font-family: riicookie;
    color: rgb(255, 252, 236, 0.85);
}



body{
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #f4b2db;
    font-weight: lighter;
}

header{
    color: rgb(255, 252, 236, 0.85);
    backdrop-filter: blur(10px);
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    justify-content: space-evenly;
}

.container{
    max-width: 1000px;
    max-height: 200px;
    margin: 0 auto;
}

header h1{
    margin: 0;
    font-size: 100px;
}

header p {
    font-size: 24px;
}

.cubecontainer {
    perspective: 1000px;
    text-align: center;
}

.cubecontainer .cube {
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    margin: 150px;
    margin-bottom: 10%;
}

.cubecontainer .cubeface {
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 30px;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cubecontainer .a {
    background-color: rgb(255, 207, 134, 0.6);
    transform: translateZ(var(--translateZ));
}
.cubecontainer .b {
    background-color: rgb(194, 255, 142, 0.6);
    transform: rotateY(180deg) translateZ(var(--translateZ));
}
.cubecontainer .c {
    background-color: rgb(159, 239, 255, 0.6);
    transform: rotateY(-90deg) translateZ(var(--translateZ));
}
.cubecontainer .d {
    background-color: rgb(201, 135, 255, 0.6);
    transform: rotateY(90deg) translateZ(var(--translateZ));
}
.cubecontainer .e {
    background-color: rgb(255, 112, 112, 0.6);
    transform: rotateX(90deg) translateZ(var(--translateZ));
}
.cubecontainer .f {
    background-color: rgb(255, 251, 167, 0.6);
    transform: rotateX(-90deg) translateZ(var(--translateZ));
}

.textcontain {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.smallbox {
    display: inline-flex;
    width: 80vh;
    justify-content: space-evenly;
}

.smallbox .p {
    margin: 20%;
}

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

.textvert {
    writing-mode: vertical-lr;
    text-orientation: upright;
}

.textvert :lang(ja) {
    font-size: 30px;
    letter-spacing: 5px;
}
.textvert :lang(en) {
    font-size: 30px;
    letter-spacing: 3px;
    margin-top: 40px;
}