Home page responsive.css

@media screen and (max-width: 1200px) {
	
	.favs {
		display: none !important;
	}
	/* reduced size of search bar */
	.search-bar {
		width: 30%;
	}
	input {
		font-size: 11px !important;
	}
}
@media screen and (max-width: 900px) {


	label[for="more"] {
		display: block;
	}
	/* hidden section 2 by default */
	.section-2 {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		width: 300px;
		height: 66vh;
		background-color: #050043;
		box-shadow: 0px 0px 2px 1px white;
		right: 0px;
		top: 23.5%;
		z-index: 5;
		overflow: scroll;
		padding-left:10px;
		transition: visibility ease-in-out 0.2s;
		transition: opacity ease-in-out 0.2s;
	}
	.playlist-content {
		overflow: visible;
	}
	

	.queue-options {
		position: absolute;
		height: auto;
		width: auto;
		top: 7%;
		right: 0%;
	}


	input[id="more"]:checked ~ .section-2 {
		visibility: visible;
		opacity: 1;
	}
	

	.section-2::-webkit-scrollbar {
		display: none;
	}
	
	.section-1 {
		width: 100%;
	}
	.card {
		min-width: 250px; 
	}
	/* carousel adjustment */
	.outer-carousel {
		height: 9%;
	}
	/* carousel image */
	.carousel img {
		height: 23vw;
		width: 34.5vw;
	}

	
	.carousel img:nth-child(1) {
		left: 56vw;
	}
	.carousel img:nth-child(3) {
		right: 56vw;
	} 
	
	.carousel img:hover {
		height: 27vw;
		width: 40.5vw;
	}
	/* music themes section */
	.music-themes {
		justify-content: space-around;
	}
	.theme-main {
		width: 50%;
	}
	/* theme content */
	/* increased theme content size */
	.theme-content {
		width: 12vw;
		height: 12vw;
	}
	.theme-content p {
		font-size: 3vw;
		top: -12.5vw;
	}
	/* increased music themes image size */
	.music-themes div img {
		width: 12vw;
		height: 12vw;
	}
}
@media screen and (max-width: 700px) {
	
	/* footer section */
	.extras > div:nth-child(3) {
		display: none;
	}
	.extras > div:nth-child(4) {
		display: none;
	}
	.outer-div {
		width: 36vw;
		height: 24vw;
		min-width: 123px;
		min-height: 82px;
	}
	.outer-div .inner-div span {
		font-size: 4vw;
	}
}
@media screen and (max-width: 550px) {


	.website-logo img {
		height: 30px;
		width: 30px;
	}
	/* website name */
	.website-name h1 {
		font-size: 3vw;
	}
	/* website name */
	.website-name h4 {
		font-size: 2vw;
	}
	/* notification bell */
	.notification-bell img {
		width: 20px;
		height: 20px;
	}
	/* profile picture */
	.profile-picture img {
		width: 30px;
		height: 30px;
	}

	
	.notification-bell,
	.profile-picture {
		margin-top: 8px;
	}
	
	
	#song-image {
		display: none;
	}

	.theme-main {
		width: 100%;
	}
	/* theme content */
	.theme-content {
		width: 18vw;
		height: 18vw;
	}
	.theme-content p {
		font-size: 4.5vw;
		top: -18.8vw;
	}
	.music-themes div img {
		width: 18vw;
		height: 18vw;
	}

	
	#div1 {
		width: 30vw;
		height: 20vw;
	}
	#div2 {
		width: 28vw;
		height: 24vw;
	}
	#div3 {
		width: 26vw;
		height: 26vw;
	}
	#div3 img {
		width: 12vw;
		height: 12vw;
	}
	
	#div3 p {
		font-size: 5vw;
	}
	.outer-div .inner-div span {
		font-size: 6vw;
	}
}