@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	text-rendering: geometricPrecision;
	font-family: 'Roboto Mono', monospace;
}
body{
	background-color: #1f1e1e;
	background-image: url("images/bg.jpg");
	background-position: 0% 30%;
}
.main{
	
	max-width: 1000px;
}
.bg{
	position: fixed;
	height: 100vh;
	width: 100vw;
}
.bg img{
	object-fit: cover;
	object-position: bottom right;
	filter: brightness(0.3);

}
.container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 9em 2em;
	position: relative;
}
.first{
	text-align: justify;
}
.first, .second, .third{
	position: relative;
}
.third{
	display: flex;
}
.third p{
	flex: 1;
}
.categoryone{
	position: absolute;
	left: -7em;
	bottom: 70%;
	
	transform: rotate(-90deg);		
	color: #525150;
	font-weight: bold;
	text-align: right !important;
}

.cards_container{
	display: flex;
	margin: 50px 0px;
	overflow: hidden;
}
.big{
	flex: 1;
	margin: 1em;
}

.small{
	flex: 2;
	display: flex;
	flex-direction: column;
	margin: 1em;
}
.second img{
	border-radius: 10px;
	filter: grayscale(90%);
	transition: .3s ease;
}
.second img:hover{
	filter: grayscale(0%);
}
.demo1 img{
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}
.demo2 img{
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}
.demo3 img{
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}
.demo2, .demo3{
	flex: 1;
}
.demo2{
	margin-bottom: 2em;
}
.playlist{
	color: #e0e0e0;
	border-bottom: 1px solid;
	padding-bottom: 2px;
	text-decoration: none;
}


hr{
	margin: 50px 0px;
	height:1px;
	border-width:0;
	color:#403e3e;
	background-color:#403e3e;
}
h1{
	font-size: 3em;
	color: #ebebeb;
}
h2{
	font-size: 3em;
}
p{

	letter-spacing: 1px;
	line-height: 2;
	font-size: 0.9em;
	color: #e0e0e0;
}


@keyframes grain {
  0%, 100% {transform: translate(0,0);}
  10% {transform: translate(-5%,-10%);}
  30% {transform: translate(3%,-15%);}
  50% {transform: translate(12%,9%);}
  70% {transform: translate(9%,4%);}
  90% {transform: translate(-1%,7%);}
}


@media only screen and (max-width: 800px) {
  *{
  	font-size: 13px;
  }
  h1{
  	font-size: 2em;
  }
  .cards_container{
  	flex-direction: column;
  }
  .demo1 img{
  	max-height: 300px;
  	min-height: 300px;
  	width: 100%;
  	object-position: 50% 20%;
  }
  .container{
  	padding: 4em 2.5em;
  }
}

@media only screen and (max-width: 1200px) {
	.third{
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}