@charset "utf-8";
/* CSS Document */
root{
	color: #FF0000;
	color: #FFFFFF;
	color: black;
	color: #5D5D5D;
	color: #A77272;
	color: #D9D9D9;
	color: #696969;
	color: #FFADAD;
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

.navbar{
	display:flex;
	align-items:center;
	padding:20px;
	background-color:black;
	background-size: auto;
}

nav{
	flex:1;
	text-align:right;
}

nav ul{
	display:inline-block;
	list-style-type: none;
}

nav ul li{
	display:inline-block;
	margin-right: 20px;
}

.search {
	align-items: baseline;
	padding-top:20px;
}

input{
	border-radius:5px;
	border:none;
	padding:5px;
}

button{
	border-radius:5px;
	border:none;
	padding:5px;
}
.logo{
	font-family:Archivo;
	font-weight:1000;
	font-size:50px;
	color:white;
	transition: color 0.5s;
}

.logo:hover{
	color:darkgrey;
}

a{
	font-family:Roboto Condensed;
	text-decoration:none;
	color:white;
	transition:color 0.5s;
}

a:hover{
	color:darkgrey;
}

h1{
	font-family:Archivo;
	font-size:30px;
	font-weight:1000;
	text-align: center
}

h2{
	font-family:Archivo;
	font-size:35px;
	font-weight:1000;
	text-align:center;
}
p{
	font-family:Roboto Condensed;
	text-align:center;
	padding:10px;
	margin:10px;
}

.container{
	max-width: 1300px;
	margin:auto;
	background-color:#696969;
}

.header{
	background-color:#696969;
}

.row{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	justify-content: space-around;
}

.main-song{
	flex-basis:50%;
	min-width: 300px;
}

.main-song img{
	max-width:100%;
	padding:50px 0;
	width:500px;
}

.btn{
	display:inline-block;
	color:#D9D9D9;
	padding:1px 250px;
	margin:10px 0;
	transition:color 0.5s;
}

.btn:hover{
	color:darkgrey;
}

.header .row{
	margin-top:30px;	
}

.categories{
	background-color:black;
}

.song-2{
	flex-basis:30%;
	min-width:250px;
	margin-top:20px;
	margin-bottom:20px;
}

.song-2 img{
	width:100%;
}

.small-container{
	max-width:1080px;
	margin:auto;
	padding-left:25px;
	padding-right:25px;
}

.small-container h1{
	color:white;
	padding-top:40px;
	padding-bottom:30px;
	transition: color 0.5s;
}

.small-container h1:hover{
	color:darkgray;
}

.table{
	background-color:darkgrey;
}

.table h2{
	padding-top:40px;
	padding-bottom:30px;
	transition: color 0.5s;
}

.table h2:hover{
	color:whitesmoke;
}

.table_body{
	font-family:Roboto Condensed;
	font-size:20px;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:#A77272;
	height:40rem;
	border-radius:0.8rem;
}

.table,th,td{
	padding:3rem;
	text-align: left;
}

th{
	font-weight:700;
	text-decoration:underline;
	padding:1rem;
}

td{
	padding:1rem;
}

.table tbody tr{
	transition:color 0.5s;
}

.table tbody tr:hover{
	color:#FFADAD;
}

.row-2{
	justify-content:space-between;
	margin: 50px auto 50px;
}

.title{
	text-decoration: underline;
}

select{
	border:2px solid ;
	padding:5px;
}

body{
	background-color:darkgray;
}

select{
	font-family:Roboto Condensed;
	border:2px solid;
	padding:5px;
	text-align:end;
}

select:focus{
	outline:none;
}

input{
	font-family:Roboto Condensed;
}

button{
	font-family:Roboto Condensed;
}

.col-4{
	flex-basis:25%;
	padding:10px;
	min-width:200px;
	margin-bottom:50px;
	transition: transform 0.5s;
}

.col-4 img{
	width:100%;
}

h4{
	font-family:Archivo;
	font-weight:1000;
	font-size:20px;
	text-align: center;
}

.col-4 p{
	font-size:15px;
}

.col-4:hover{
	transform:translateY(-5px);
}

.contact{
	min-height: 100vh;
	padding:50px;
	text-align:center;
}

.title2{
	text-decoration:underline;
	padding-bottom: 30px;
}

.container{
	margin:0 auto;
}

.contact-wrapper{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	grid-gap:30px;
}

.contact-form{
	text-align:left;	
}

.contact-form h3{
	font-family:Roboto Condensed;
	font-size:24px;
	margin-bottom:20px;
	color:antiquewhite;
}

.form-group{
	margin-bottom:20px;
}

.form-group input,textarea{
	width:100%;
	padding:12px;
	border-radius:8px;
	border:none;
	background-color:#FFADAD;
	color:aliceblue
}

textarea{
	font-family:Roboto Condensed;
}
.form-group input:focus,
textarea:focus{
	outline:none;
	box-shadow:0 0 8px grey;
}

.contact-form button{
	display:inline-block;
	padding:12px 24px;
	background-color:antiquewhite;
	color:black;
	border:none;
	cursor:pointer;
	transition:0.3s ease;
}

.contact-form button:hover{
	background-color:pink;
}

.contact-info{
	text-align:center;
}

.contact-info h3{
	font-family:Roboto Condensed;
	font-size:24px;
	margin-bottom:20px;
	color:black;
}

.contact-info p{
	font-family:Roboto Condensed;
	margin-bottom:10px;
	text-align:center;
}