@font-face {
	font-family: "Roboto";
	src: url('fonts/Roboto-Medium.woff');
}

* {
  margin: 0;
  padding: 0;
}

body{
  background-image: url("../images/wax04.png");
  background-position; center center;
  background-attachment: fixed;
  background-size: cover;
  background-color: yellow;
  text-align:center;
  margin: 0;
  padding: 0;
  height: 100vh;
}



/*header {
  border: 3px;
  margin: 1rem;
  padding: 1rem;
}
header h1 {
  font-family: 'Roboto', sans-serif;;
  background-color: yellow;
  margin: 0;
  padding: 2rem;
  text-align: center;
  font-size: 80px;
  color: white;
}*/

/*ul {

}

ul li {
  list-style: none;
  display: inline-block;
  line-height: 100px;
}

}

ul li a {
  text-decoration: none;
  font-size: 20px;
  color: grey;
  font: arial;
  padding: 0 20px;

}*/

.rotating-box{
  width: 200px;
  height: 200px;
  margin: 35% auto;
  perspective: 2000px;
  position: center center;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -60%);
}
.single-rb{
  width: 400px;
  color: #ffffff;
  font-size: 50px;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  animation: rotate 10s linear infinite;
  transform-style: preserve-3d;
}
.single-rb div{
  position: absolute;
  width: 400px;
  height: 400px;
}
.front-side{
  transform: translateZ(200px);
  background: black;
}
.back-side{
  transform: rotateY(180deg) translateZ(200px);
  background:black;
}
.left-side{
  transform: rotateY(-90deg) translateX(-200px);
  background:black;
  transform-origin: left;
}
.right-side{
  transform: rotateY(90deg) translateX(200px);
  background: black;
  transform-origin: right;
}
.top-side{
  transform: rotateX(-90deg) translateY(-200px);
  background: black;
  transform-origin: top;
}
.bottom-side{
  transform: rotateX(90deg) translateY(200px);
  background: black;
  transform-origin: bottom;
}

@keyframes rotate{
  0%{transform: rotate3d(1, 1, 0, 0);}
  100%{transform: rotate3d(1, 1, 0, 360deg);}
}

.navbar {
  background-color: yellow;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
}
.navbar a:hover {
  background-color: blue;
  color: white;
}

h1{
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: blue;
padding: 5px;
}