#welcome{
	width: 60em;
}
#fgc{
	width: 36em;
	height: 34em;
}
#gameRec{
	width: 30em;
	height: 47em;
}
#art{
	width: 60em; 
	height: 32em;
}
#notes{
	width: 35em; 
	height: 35em;
}
#aboutMe{
	width: 55em;
	height: 35em;
}
#eightCube{
	width: 42em;
	height: 42em;
}

/* ------------ PHONES ----------- */

@media only screen and (max-width: 711px){
	.icon{
		position: relative;
		left: 20px;
		width: 100px;
		height: 100px;
		font-size: 20px;
	}
	.move-it{
		left: 250px;
	}

	#welcome{
		width: 25em;
		height: 38em;
		z-index: 3;
	}
	
	#fgc{
		width: 325px;
		height: 550px;
		.fgc{
			img{
				width: 100%;
				height: auto;
			}
			.chris{
				width: 42%;
				height: 42%;
			}
			.zato{
				width: 50%;
			}
		}
	}

	#gameRec{
		width: 300px;
		height: 700px;
	}
	.article-window{
		width: 325px;
		height: 700px;
		.article-body{
			img{
				width: 90%;
			}
		}
	}
	
	#art{
		width: 325px;
		height: 600px;

		.art{
			.gallery{
			   flex-direction: column;
				justify-content: space-around;
				align-items: center;
				gap: 10px;
			}
			img{
				width: 70%;
			}
		}
	}
	.modal{
		.close{
			font-size: 70px;
		}
		.modal-content{
			width: 90%;
		}
	}
	
	#notes{
		width: 300px;
		.notes{
			h1{
				font-size: 20px;
			}
			grid-template-areas: 
			"heading heading heading"
			"note note note"
			"note note note"
			"btn btn btn"
			;

			.input-box{
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				width: 15em;
				height: auto;
				font-size: 16px;
			}
			.note-btn{
				position: relative;
				top: 26em;
				left: 15%;
			}
			button{
				font-size: 14px;
				border-radius: 5px;
			}

	   }
	 }

	 #aboutMe{
	 	width: 350px;
	 }

	 #eightCube{
	 	width: 28em;
	 	height: 42em;
	 }

	.music-player{
			display: none;
		}
  }





/* ----------- TABLETS -------- */

@media only screen and (min-width: 712px) and (max-width: 992px){
	h2{
		font-size: 32px;
	}
	h3{
		font-size: 28px;
	}
	p{
		font-size: 26px;
	}
	li{
		font-size: 28px;
	}

	.topbar-text{
		font-size: 24px;
	}
	.window-header{
		.close-button{
		width: 40px;
		height: 40px;
		font-size: 30px;
		}
	}
	
	.icon{
		width: 120px;
		p{
			font-size: 20px;
		}
		
		img{
			width: 110px;
			height: 110px;
		}
	}
	.move-it{
		left: 250px;
		bottom: 777px;
	}

	.app-heading{
		font-size: 50px;
	}
	#welcome{
		z-index: 3;
		width: 50em;
	}
	
	#fgc{
		width: 54em;
		height: 45em;
		img{
			width: 70%;
			height: 70%;
		}
		.chris{
			width: 32%;
			height: 32%;
		}
		.fgc{
			padding-right: 60px;
		}
	}
	
	#gameRec{
		width: 45em;
		height: 50em;
		padding-right: 20px;
		.game-rec{
			padding-bottom: 30px;
			li{
				margin-left: 30px;
			}
		}
	}

	.article-window{
		width: 700px;
		height: 500px;
		.article-body{
			h2{
				font-size: 32px;
			}
			h4{
				font-size: 25px;
			}
		}
	}

	#art{
		width: 54em;
		height: 60em;
		.art{
			a{
				width: 100%;
			}
			.gallery{
			   flex-direction: column;
				justify-content: space-around;
				align-items: center;
				gap: 30px;
			}
			img{
				width: 50%;
			}
			a{
				width: 100%;
				font-size: 30px;
			}
		}
	}
	.modal{
		.close{
			font-size: 80px;
		}
		.modal-content{
			width: 80%;
			height: auto;
		}
		.modal4-content{
		width: 80%;
		height: auto;
		}
	}

	#notes{
		width: 50em;
		height: 50em;

		.notes{
			grid-template-areas: 
			"heading heading heading"
			"note note note"
			"note note note"
			"btn btn btn"
			;

			.input-box{
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				width: 31em;
				height: auto;
				font-size: 20px;
			}
			.note-btn{
				position: relative;
				top: 33em;
				left: 26%;
			}
			button{
				font-size: 20px;
				border-radius: 5px;
			}

		}

	}

	#aboutMe{
		width: 54em;
		height: 58em;
		li{
			font-size: 28px;
		}
	}

	#eightCube{
		width: 52em;
		height: 52em;
		h3{
			font-size: 26px;
		}
		#roll{
			margin-top: 20px;
			font-size: 24px;
		}
	}

		.music-player{
		height: 150px;
		width: 100%;
		.now-playing, .track-name, .track-artist{
			font-size: 24px;
		}
		.buttons{
			.track-buttons{
				p{
					font-size: 24px;
				 }
			  }
			  .current-time, .total-duration{
			  	font-size: 18px;
			  }
			 .current-time{
			 	margin-bottom: 20px;
			 }
			 .total-duration{
			 	margin-top: 20px;
			 }
			 .seek_slider, .volume_slider{
			 	height: 20px;
			 }
			 .seek_slider::-webkit-slider-thumb,.volume_slider::-webkit-slider-thumb{
				width: 40px;
				height: 40px;
			}
			.seek_slider::-moz-range-thumb,.volume_slider::-moz-range-thumb{
				width: 40px;
				height: 40px;

			}
			.volume_slider{
					width: 100px;
				margin-right: 10px;
			}

		}

	}

}