@import url(https://fonts.googleapis.com/css?family=Montserrat:400,300,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Luckiest+Guy:400,300,600,700,800,500);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

:root{
	/** Global Colors **/
	--page_background:rgb(34, 44, 69);
}

html {
    font-family: 'Montserrat', 'Segoe UI',  sans-serif;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

html,
body {
    padding: 0;
    margin: 0;
    font-size: 16px;
    overflow: hidden;
	display: flex;
	flex-direction:row;
	align-items:flex-start;
	justify-content:flex-start;
	height:100%;
	width:100%;
	background: var(--page_background);
}

body ::-webkit-scrollbar {
	height: 10px;
	width: 10px;
	background:rgba(255, 255, 255,0.15);
	border-radius: 50px;
}

body ::-webkit-scrollbar-thumb {
	background:rgba(89, 155, 235,0.5);
	opacity:0.1;
	border-radius: 50px;
}
button{
	border:none;
	outline:none;
	background:transparent;
}

.voloron-wrapper{
	display:block;
	flex-direction:column;
	align-items:flex-start;
	justify-content:flex-start;
	height:100%;
	width:100%;
	overflow-y:auto;
	overflow-x:hidden;
}
.voloron-main{
	background: url('../../images/mc-bg.png') bottom center no-repeat;
	height:100%;
	width:100%;
	position:sticky;
	top: 0px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
}
.voloron-spacer{
	height:100%;
}
.voloron-main-dark{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	background-color: rgba(0, 0, 0, 0.75);
    background-image: none;
    background-position: center center;
    background-repeat: repeat;
    background-size: cover;
    border-radius: 0px;
    border-width: 0px;
    border-color: rgb(140, 140, 140);
    border-style: solid;
    color: rgba(255, 255, 255, 0.8);
    font-size: 72px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    font-variant: small-caps;
    height: 100%;
    width: 100%;
    transform: rotate(0deg) translate(0px, 0px);
    box-shadow: rgb(0, 0, 0) 20px 20px 80px 20px inset, rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
}
.voloron-main-header{
	font-family: "Luckiest Guy", Arial !important;
	font-size: 200px;
	color: rgb(202, 223, 244);
	margin-top:10%;
}
.voloron-main-header{
	font-family: "Luckiest Guy", Arial !important;
	font-size: 200px;
	color: rgb(202, 223, 244);
	margin-top:10%;
	line-height:100px;
}
.voloron-main-subtitle{
	font-family: "Luckiest Guy", Arial !important;
	font-size: 120px;
	display:flex;
}
.voloron-main-subtitle span{
	color:#057e9e;
	padding-right:1px;
}
.voloron-main-nav{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	height:100%;
}
.voloron-nav-item{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	box-shadow:rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
	color:#fff;
	padding:30px 60px;
	min-width: 25%;
	margin:0px 10px;
	animation: wiggle 2s linear 0s;
	font-variant: small-caps;
	cursor:pointer;
}
.voloron-nav-item:hover{
	animation: wiggle 2s linear infinite;
	box-shadow:rgba(255,255,255, 0.5) 0px 2px 10px 0px;
}
.voloron-nav-item.network{
	background-color: rgba(10, 172, 194, 0.6);
}
.voloron-nav-item.cobblemon{
	background-color: rgba(196, 55, 55, 0.6);
}
.voloron-nav-item.rust{
	background-color: rgba(196, 127, 55, 0.6);
}
.voloron-nav-item.modded{
	background-color: rgba(96, 186, 58, 0.6);
}
.voloron-nav-item-image{
	height: 125px;
	width: 125px;
	position:absolute;
	top:-95px;
	filter: drop-shadow(rgb(0, 0, 0) 0px 2px 3.5px);
}
.voloron-nav-item-image img{
	height: 125px;
	width: 125px;
}
.voloron-nav-item-title{
	font-family: "Luckiest Guy", Arial !important;
	color: #fff;
	font-size: 72px;
}
.voloron-nav-item-subtitle{
	font-family: 'Montserrat';
	font-size: 20px;
	font-weight:600;
}
.voloron-container{
	margin-top:-25px;
}
.voloron-container{
	transform: rotate(2deg);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 100px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
	padding:200px 10%;
	position:sticky;
	margin-left:-10%;
	width:100%;
	min-height:400px;
	margin-bottom:-100px;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	z-index:10;
}
.voloron-container:nth-child(odd){
	transform: rotate(-2deg);
}	
.voloron-container.network{
	background: rgb(10, 172, 194);
}
.voloron-container.cobblemon{
	background: rgb(196, 55, 55);
}
.voloron-container.rust{
	background: rgb(196, 127, 55);
}
.voloron-container.modded{
	background: rgb(96, 186, 58);
}
.voloron-container-row{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	transform: rotate(-2deg);
	width:100%;
}
.voloron-container:nth-child(odd) .voloron-container-row{
	transform: rotate(2deg);
}
.voloron-container-row button.voloron-row-button{
	min-height:40px;
	min-width:40px;
	font-family: 'Montserrat';
	font-size: 30px;
	font-weight:600;
	color:#fff;
	background:rgba(0,0,0,0.3);
	border-radius: 10px;
	padding:15px 25px;
	margin:10px;
	cursor:pointer;
}
.voloron-container-row button.voloron-row-button:hover{
	background:rgba(0,0,0,0.4);
}
.voloron-container.footer{
	transform: rotate(0deg)!important;
	background: #222C45;
	height:100px;
	z-index:5!important;
	padding:0px 10%;
	justify-content:flex-end;
}
.voloron-container.footer .voloron-container-row{
	transform: rotate(0deg)!important;
}
.voloron-container-row div:not('first-child'){
	padding-top:30px;
}
.voloron-container-icon{
	border-radius:100%;
	min-height:215px;
	min-width:215px;
	max-height:215px;
	max-width:215px;
	position:relative;
}
.voloron-container-icon img{
	height: 210px;
	width: 210px;
	position:absolute;
}
.voloron-container-header{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:0px 2%;
	font-variant: small-caps;
	min-width:250px;
}
.voloron-container-title{
	font-family: "Luckiest Guy", Arial !important;
	color: #fff;
	font-size: 100px;
	line-height:75px;
}
.voloron-container-subtitle{
	font-family: 'Montserrat';
	font-size: 20px;
	font-weight:600;
	color:#fff;
	font-variant: small-caps;
}
.voloron-container-image{
	position:relative;
	display:grid;
	grid-template-areas:
    'img1 img2 img2 img3'
    'img4 img4 img5 img3';
	gap: 10px;
	min-width:500px;
}
.voloron-container-image .voloron-image-1 { grid-area: img1; background-position: center!important; }
.voloron-container-image .voloron-image-2 { grid-area: img2; background-position: center!important; }
.voloron-container-image .voloron-image-3 { grid-area: img3; background-position: center!important;background-size: 294% 100%!important; }
.voloron-container-image .voloron-image-4 { grid-area: img4; background-position: center!important; }
.voloron-container-image .voloron-image-5 { grid-area: img5; background-position: center!important; }
.voloron-container-image div{
	background-size: 120% 120%!important;
}
.voloron-container-logo{
	position:absolute;
	height:125px;
	width:125px;
	top: calc(50% - 65px);
    left: calc(50% - 50px);
}
.voloron-container-image-block{
	background: #DADADA;
	border-radius:20px;
	min-height:120px;
	min-width:120px;
}
.voloron-container-description{
	font-family: 'Montserrat';
	font-size: 40px;
	font-style: italic;
    font-weight: normal;
	max-width: 1200px;
	text-align: center;
	color:#fff;
	font-weight:600;
	padding: 60px 0px !important;
}
.voloron-container.footer .voloron-container-row >*{
	padding:0px 30px;
}
.voloron-footer-social{
	border-radius:100%;
	padding:5px;
	cursor:pointer;
}
.voloron-container-copyright{
	font-family: 'Montserrat';
	color:#fff;
	font-weight:600;
	font-size: 20px;
	padding-bottom:40px!important;
}


/** Annimations **/
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-10deg);
  }
  20% {
    transform: rotateZ(8deg);
  }
  25% {
    transform: rotateZ(-8deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}