@font-face {
    font-family: 'Ableton Sans Small';
    src: url('AbletonSansSmall-Bold.woff2') format('woff2'),
        url('AbletonSansSmall-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Necto Mono';
    src: url('NectoMono-Regular.woff2') format('woff2'),
        url('NectoMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Ableton Sans Small';
    src: url('AbletonSansSmall-Regular.woff2') format('woff2'),
        url('AbletonSansSmall-Regular.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


a{
    text-decoration: none;
    color: initial;	
	height: 0;
}

body{
	font-family: 'Necto Mono';
	font-size: 16px;
	background-color: whitesmoke;
}


img{
	display: inline;
	padding-right: 2px;
}

::selection {
	background-color: black;
	color: whitesmoke;
  }
  

.bottom-button1{
	transition-duration: 300ms;
	margin-bottom: 0;
}

.bottom-button2{
	transition-duration: 300ms;
	margin-bottom: 0;
}


button:enabled{
	margin: 0;
	background-size: 3%;
	background-position: left 55%;
	background-repeat: no-repeat; 
	height: 0;
	overflow: hidden;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(1.000, 0.010, 0.390, 0.985); /* custom */
}

button:hover{
	text-decoration: underline dotted;
	text-underline-offset: 1px;
}

button:focus {
	text-decoration: underline;
	text-underline-offset: 1px;

}

span{
	font-size: 0.75em;
	font-family: 'Ableton Sans Small';
	font-weight:normal;
	line-height: 1.2em;
}

.beegcontainer{
	display: flex;
	width: 100%;
	height: 100vh;
	flex-direction: column;
}

.circle{
	position: fixed;
	width: 100%;
	height: 100vh;

	background-image: url(../img/circle.svg);
	background-size: 100% 100%;
	background-position: 100% 70%;
	background-repeat:no-repeat;
	pointer-events: none;
	margin: auto;

	transform: rotate3d(1, 1, 1, 45deg);
	animation: rotation 8s infinite linear;
	animation-play-state: paused;
}



.rotate{
	animation-play-state: running;
}



@keyframes rotation {
	from {
	  transform: rotate3d(1, 1, 1, 0deg);
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate3d(1, 1, 1, 359deg);
	  transform: rotate(359deg);
	}
  }

.container{
	display: flex;
	width: 35vw;
	margin: auto;
	justify-content:center;
	flex-wrap: wrap;
	min-width: 540px;
}

.column{
	width: 250px;
	height: auto;
	margin: 10px;
}



.extracts{
	position:relative;
	height: auto;
	width: auto;
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
	font-size: 1em;
	padding-bottom: 12px;
}

.exp1{
	cursor: pointer;
}

.exp2{
	cursor: pointer;
}

.exp3{
	cursor: pointer;
}

.exp4{
	cursor: pointer;
}

.exp5{
	cursor: pointer;
}

.exp6{
	cursor: pointer;
}


.title{
	font-family: 'Ableton Sans Small';
	font-weight: bold;
	position:relative;
	height:auto;
	width: 100%;
	text-align: center;
	padding-bottom: 8px;
	cursor: pointer;
}

#one{
	transform: rotate(1.5deg);
	transition-duration: 300ms;
}

#two{
	transform: rotate(-1.5deg);
	transition-duration: 300ms;
}


#three{
	transform: rotate(1deg);
	transition-duration: 300ms;
}


#four{
	transform: rotate(-2deg);
	transition-duration: 300ms;
}


#five{
	transform: rotate(-1deg);
	transition-duration: 300ms;
}


#six{
	transform: rotate(2deg);
	transition-duration: 300ms;
}




.make{
	margin:auto;
	font-size: 3em;
	padding: 30px;
}

.music{
	margin:auto;
	font-size: 3em;
	padding:30px;
}



	@media screen and (max-width: 600px) {
		
body{
	font-size: 18px;
}

button{
	cursor: pointer;
}
button:enabled{
	padding: 0px;
	margin: 0;
	background-size: 4%;
	cursor:pointer;
	font-size: 0.9em;
}

.container{
	width: 90%;
	min-width: 275px;
}

.column{
	width: 100%;
}

span{
	font-size: 0.7em;
}

		}