@font-face {
	font-family: 'Boxed';
	src: url('fonts/BoxedSemibold.eot');
	src: local('Boxed Semibold'), local('BoxedSemibold'),
		url('fonts/BoxedSemibold.eot?#iefix') format('embedded-opentype'),
		url('fonts/BoxedSemibold.woff') format('woff'),
		url('fonts/BoxedSemibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Boxed';
	src: url('fonts/BoxedThin.eot');
	src: local('Boxed Thin'), local('BoxedThin'),
		url('fonts/BoxedThin.eot?#iefix') format('embedded-opentype'),
		url('fonts/BoxedThin.woff') format('woff'),
		url('fonts/BoxedThin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}


@font-face {
	font-family: 'Boxed';
	src: url('fonts/BoxedLight.eot');
	src: local('Boxed Light'), local('BoxedLight'),
		url('fonts/BoxedLight.eot?#iefix') format('embedded-opentype'),
		url('fonts/BoxedLight.woff') format('woff'),
		url('fonts/BoxedLight.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Boxed';
	src: url('fonts/BoxedRegular-Bold.eot');
	src: local('Boxed Regular Bold'), local('BoxedRegular-Bold'),
		url('fonts/BoxedRegular-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/BoxedRegular-Bold.woff') format('woff'),
		url('fonts/BoxedRegular-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Boxed';
	src: url('fonts/BoxedHeavy.eot');
	src: local('Boxed Heavy'), local('BoxedHeavy'),
		url('fonts/BoxedHeavy.eot?#iefix') format('embedded-opentype'),
		url('fonts/BoxedHeavy.woff') format('woff'),
		url('fonts/BoxedHeavy.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Boxed';
	src: url('fonts/BoxedMedium.eot');
	src: local('Boxed Medium'), local('BoxedMedium'),
		url('fonts/BoxedMedium.eot?#iefix') format('embedded-opentype'),
		url('fonts/BoxedMedium.woff') format('woff'),
		url('fonts/BoxedMedium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Boxed';
	src: url('fonts/BoxedExtralight.eot');
	src: local('Boxed Extralight'), local('BoxedExtralight'),
		url('fonts/BoxedExtralight.eot?#iefix') format('embedded-opentype'),
		url('fonts/BoxedExtralight.woff') format('woff'),
		url('fonts/BoxedExtralight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Boxed';
	src: url('fonts/BoxedRegular.eot');
	src: local('Boxed Regular'), local('BoxedRegular'),
		url('fonts/BoxedRegular.eot?#iefix') format('embedded-opentype'),
		url('fonts/BoxedRegular.woff') format('woff'),
		url('fonts/BoxedRegular.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}


body {
    font-family: 'Boxed', Verdana;
}



nav {
    background: linear-gradient(0deg, #90f3, #000, #f004);
    box-shadow: 0 0 35px #90f5;
}

nav a {
    color: #fffa;
    font-weight: 200;
    text-decoration: none;
    border-bottom: solid 1px #90f5;
    padding-bottom: 3px;
    position: relative;
    text-shadow: 0 0 20px #f00,0 0 20px #90f,0 0 10px #90f,0 0 5px #90f;
    white-space: nowrap;
    font-size: 15px;
}

nav a::before,
nav a::after {
    content: '';
    display: block;
    position: absolute;
    top:0px;
    right:-5px;
    bottom:-5px;
    left:-5px;
    border-bottom:solid 1px #90f5;
    border-left:solid 1px #90f5;
    border-right:solid 1px #90f5;
    border-radius: 20px;
}

nav a::after {
    right:-9px;
    left:-9px;
    bottom:-9px;  
    border-bottom:solid 1px #90f5;
    border-left:solid 1px #90f5;
    border-right:solid 1px #90f5;
}

nav a:hover {
    color: #f00;
}


@media (max-width:998px){
    nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    nav a {
        font-size: 14px;
        margin: 10px 15px;
        text-align: center;
    } 

}


.cube.animation {
    animation: rotation 30s ease-in-out infinite;
}

.cube > article {
    padding: 40px;
    transition: all 0.5s ease;
}

.cube > article::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    box-shadow:
        0 0 1px #f00,
        0 0 1px #f00,
        0 0 5px #d0e5,
        0 0 10px #d0e5 inset;
    transition: inherit;
}

.cube > article::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    box-shadow:
        0 0 1px #f00,
        0 0 5px #d0e3,
        0 0 5px #d0e5 inset;
    transition: inherit;
}

.cube > article h2 {
    text-shadow: 0 0 0px #90f,  0 0 20px #90f9;
}
.cube > article p {
    text-shadow: 0 0 0px #90f,  0 0 20px #90f9;
}



.cube.distance {
    width: 240px;
    height: 240px;
    top:  calc(50% - 240px / 2);
    left: calc(50% - 240px / 2);
}

.cube.distance > article {
    border-radius: 25px;
    padding: 20px;
}
.cube.distance > article::before {
    border-radius: 20px;
    transform: rotateY(0deg) translateZ(-20px);
    background: linear-gradient(0deg, #000, #111b29);
}
.cube.distance > article::after {
    border-radius: 15px;
    background: linear-gradient(0deg, #0009, #111b2999);
    transform: rotateY(0deg) translateZ(-40px);
}
.cube.distance > article h2 {
    font-size: 18px;
}
.cube.distance > article p {
    font-size: 14px;
}


.distance .back   {transform: rotateX(-180deg) translateZ(180px);}
.distance .top    {transform: rotateX( 90deg)  translateZ(180px);}
.distance .front  {transform:                  translateZ(180px);}
.distance .bottom {transform: rotateX(-90deg)  translateZ(180px);}
.distance .left   {transform: rotateY(-90deg)  translateZ(180px);}
.distance .right  {transform: rotateY( 90deg)  translateZ(180px);}




@keyframes rotation {
    50% {transform:perspective(700px) rotateX(360deg) rotateY(720deg);}
}



.actions {
    border:solid 1px #90f9;
    border-top:none;
    border-bottom:solid 1px #f003;
    padding:20px;
    bottom:30px;
    width: 450px;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    left: calc(50% - 225px);
    border-radius: 20px;
    background: radial-gradient(#f009, #0000 0%, #0000 85%, #f009); 
}
.actions a {
    margin:0 20px;
    color: #fffa;
    text-decoration: none;
    font-weight: 200;
    text-shadow: 0 0 20px #f00,0 0 20px #90f,0 0 10px #90f,0 0 5px #90f;
    border-bottom: solid 1px #f003;
    padding-bottom: 5px;
    position: relative;
    z-index: 1;

}

.actions a:hover {
    color: #fff;
    border-bottom: solid 1px #f009;
}


.actions a.active {
    filter: grayscale(1);
    opacity: .5;
}

.actions a.active::before {
    content: '√';
    position: absolute;
    left: -20px;
}

.actions::before,
.actions::after {
    content: '';
    display: block;
    position: absolute;
    top:0px;
    right:-5px;
    bottom:-5px;
    left:-5px;
    border-bottom:solid 1px #f003;
    border-left:solid 1px #f0f5;
    border-right:solid 1px #f0f5;
    border-radius: 20px;
}
.actions::after {
    right:-9px;
    left:-9px;
    bottom:-9px;  
    border-bottom:solid 1px #f003;
    border-left:solid 1px #f055;
    border-right:solid 1px #f055;
}