* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  font-family: 'Roboto Mono', monospace, sans-serif;
  font-weight: 300;
}

canvas {
  display: block;
  margin: 10px auto;
}

.r-canvas {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url(../img/logo.svg) no-repeat center center #fff;
	background-size: 5vw auto;
    width: 100vw;
    pointer-events: none;
}


@media only screen and (max-device-width : 768px)
and (orientation : portrait) {
    .r-canvas {
    	height: 70vh
    }
}


.r-content__btn {
  position: absolute;
  top: 20px;
  right: 20px;
  box-sizing: border-box;
}

.r-content {
  height: 100vh;
  width: 100vw;
  padding: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

.r-content__linklist {
	list-style: none;
	position: absolute;
	bottom: 2rem;
	left: 2rem;
}

.r-content__linklist ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.r-content__linklist__link {
	display: inline-block;
	font-size: 4vh;
	margin: .5rem 0;
	text-decoration: none;
	color: #0000cc;
	border-bottom: 2px solid #0000cc;
	pointer-events: initial;
}

h1 {
	font-size: 5vh;
	font-weight: 700;
	color: #0000cc;
	letter-spacing: .1rem;
}

.sound-button {
  position: relative;
  z-index: 10;
  color: #0000cc;
  top: 0;
  width: 30px;
  height: 30px;
  display: block;
  padding: 10px;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 100%;
  border: 1px solid transparent;
  outline: 0 none;
  transition: border .3s ease;
}


.sound-button:hover {
  border: 1px solid #0000cc;
  transition: border .3s ease;
}

.sound-button .lines {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 14px;
  height: 11px;
  display: block;
}

.sound-button.pause .lines .line {
  background-color: #ccc;
}

.sound-button .lines .line {
  position: absolute;
  height: 11px;
  background-color: #0000cc;
  width: 2px;
  top: 0;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -ms-transform-origin: left bottom;
  -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation: sound-bouncing 600ms infinite;
  animation: sound-bouncing 600ms infinite;
}

.sound-button .lines .line.line-one {
  left: 0px;
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

.sound-button .lines .line.line-two {
  left: 4px;
}

.sound-button .lines .line.line-three {
  left: 8px;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.sound-button .lines .line.line-four {
  left: 12px;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}

.sound-button.pause .line.line-one, .sound-button.pause .line.line-two, .sound-button.pause .line.line-three, .sound-button.pause .line.line-four {
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation: none;
  animation: none;
}

.sound-button.pause .line.line-one {
  -webkit-transform: scale3d(1, 0.33333, 1);
  transform: scale3d(1, 0.63333, 1);
}

.sound-button.pause .line.line-two {
  -webkit-transform: scale3d(1, 0.1, 1);
  transform: scale3d(1, 0.7, 1);
}

.sound-button.pause .line.line-three {
  -webkit-transform: scale3d(1, 0.11111, 1);
  transform: scale3d(1, 0.91111, 1);
}

.sound-button.pause .line.line-four {
  -webkit-transform: scale3d(1, 0.16667, 1);
  transform: scale3d(1, 0.66667, 1);
}

@-webkit-keyframes sound-bouncing {
  0% {
    -webkit-transform: scale3d(1, 1.1, 1);
    transform: scale3d(1, 1.1, 1);
  }
  60% {
    -webkit-transform: scale3d(1, 0.6, 1);
    transform: scale3d(1, 0.6, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 0.9, 1);
    transform: scale3d(1, 0.9, 1);
  }
}

@keyframes sound-bouncing {
  0% {
    -webkit-transform: scale3d(1, 1.1, 1);
    transform: scale3d(1, 1.1, 1);
  }
  60% {
    -webkit-transform: scale3d(1, 0.6, 1);
    transform: scale3d(1, 0.6, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 0.9, 1);
    transform: scale3d(1, 0.9, 1);
  }
}