:root {
    --body-margin: 140px;
    --box-width: 300px;
    --box-height: 200px;
}

@font-face {
    font-family: "OCR_A_Extended";
    src: url("fonts/OCR_A_Extended.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.OCR_EXT, .OCR_EXT_R > * {
    font-family: "OCR_A_Extended";
}

@font-face {
    font-family: "OCR_A_Std_Regular";
    src: url("fonts/OCR_A_Std_Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.OCR_STD, .OCR_STD_R > * {
    font-family: "OCR_A_Std_Regular";
}

/**/

html, body {
  margin: 0;
  padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
}

h1 {
    margin: 0px;
    padding-top: calc(var(--body-margin) / 2);
    font-size: 10em;
    line-height: 50%;
}

h2 {
    font-size: 8em;
}

h3 {
    font-size: 6em;
}

/**/

#mainContainer {
    padding: var(--body-margin);
}

.leftText {
    float: left;
    text-align: left;
}

.rightText {
    float: right;
    text-align: right;
}

.pushBottom {
    position: absolute;
    bottom: 0px;
    padding-bottom: var(--body-margin);
}

.breakOne::after {
    content: "\a";
    white-space: pre;
    text-transform: -10em;
}

.breakTwo::before {
    content: "\a";
    white-space: pre;
}

#mainPageMenu > ul {
    padding-left: 0px;
    text-emphasis: none;
    text-decoration: none;
    list-style-type: none;
}

#mainPageMenu > ul > li {
    padding: 10px;
    font-size: 5em;
}

#mainPageMenu > ul > li > a {
    color: black;
}

.transi {
    transition: transform 1s;
}

.transi_R > * {
    transition: transform 1s;
}

/*3d box*/

#btnOnOff {
    width: var(--box-width);
    height: var(--box-height);
    perspective: calc(var(--box-width) + var(--box-height));
    right: 0;
    padding-right: calc(var(--body-margin) + 100px);
    padding-bottom: calc(var(--body-margin) + 100px);
    /*transform: translateZ(-50px);*/
}

#box {
    width: var(--box-width);
    height: var(--box-height);
    position: relative;
    transform-style: preserve-3d;
}

#box > * {
    position: absolute;
    opacity: 0.8;
}

#box_face_front, #box_face_back {
    /*background-color: aquamarine;*/
    width: var(--box-width);
    height: var(--box-height);
}

#box_face_left, #box_face_right {
    /*background-color: rebeccapurple;*/
    height: var(--box-height);
    width: calc(var(--box-height) / 2);
    left: calc(var(--box-height) / 2);
}

#box_face_top, #box_face_bottom {
    /*background-color: green;*/
    width: var(--box-width);
    height: calc(var(--box-height) / 2);
    top: calc(var(--box-height) / 4);
}

#box_face_front {
    transform: rotateY(0deg) translateZ(calc(var(--box-height) / 4));
}

#box_face_back {
    transform: rotateY(180deg) translateZ(calc(var(--box-height) / 4));
}

#box_face_right {
    transform: rotateY(90deg) translateZ(calc(var(--box-width) / 2));
}

#box_face_left {
    transform: rotateY(-90deg) translateZ(calc(var(--box-width) / 2));
}

#box_face_top {
    transform: rotateX(90deg) translateZ(calc(var(--box-height) / 2));
}

#box_face_bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--box-height) / 2));
}

.box_face {
    border-radius: 5px;
    font-size: 5em;
    border: 5px black solid;
}