@font-face{

font-family: 'Magic Wix';

src: url('../img/magic.ttf');

font-weight: normal;

font-style: normal;

}


html, body {
	padding: 0;
	margin: 0;
    height: 100%;
    width: 100%;
}

body {
	text-align: center;
	background-color: black;
	color: white;
    font-family: 'Magic Wix';
}


ul {
	padding: 0;
	list-style-type: none;
    margin-left: -5%;
    margin-right: -5%;
}

li {
	padding: 3%;
	display: inline-table;
    vertical-align: middle;
}

h1 {
	margin: 0;
	padding: 0;
    font-size: 12vw;
    white-space: nowrap;
	text-shadow: 0 0 9px white;
    transition: all 0.2s ease-out;
    font-weight: lighter;
}

.main {
     z-index: 1000;
	 display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
}

.block {
    font-size: 100%;
}


@media screen and (max-width: 900px) {
  h1 {
     font-size: 18vw;
  }
    img {
	width: 11vw;
	height: auto;
}
    #button {
        font-size: 3vh;
    }
}

@media screen and (max-width: 500px) {
  h1 {
     font-size: 25vw;
  }
    img {
	width: 14vw;
	height: auto;
}
    #button {
        font-size: 2vh;
    }
}

.img-svg:hover {
    transform: scale(1.1);
}

.img-svg:active {
    transform: scale(0.95);
}

#canvas {
    z-index: -4;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
    
}

#button {
    border: none;
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease-out;
    font-size: 5vh;
    filter: drop-shadow(0 0 8px white);
    color: white;
    font-family: 'Magic Wix';
    font-weight: lighter;
    margin-top: 10%;
}

#button:hover {
transform: scale(1.1);
    }

#button:active {
transform: scale(0.95);
}

audio {
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: calc(100% - 20px);
}

#slider {
    position: absolute; 
    width: 1px; 
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.slider {
    position: absolute;
    left: 95%;
    opacity: 0.3;
    transition: all 0.5s ease-out;
}

.slider:hover {
    opacity: 1;
}

#output {
    display: none;
}

.volume-icon {
    margin-top: 20px;
	width: 40px;
    left: -10px;
    position: relative;
    filter: invert(100%) drop-shadow(0 0 3px white);
}