/* CSS Document */

body {
	background-color: lightgray;
	padding: 0.5vw;
	font-family: serif;
}

.colorlist {
	text-align: center;
}

	.colorlist h1 {
		font-size: 5vw;
		color: white;
	}

	.colorlist p {
		font-size: 3vw;
		color: white;
		padding: 1vw;
		margin: 1.3vw;
		font-family: "Verdana";
	}

		.colorlist .tomato p {
			background-color: tomato;
		}

		.colorlist .orange p {
			background-color: orange;
		}

		.colorlist .blue p {
			background-color: dodgerblue;
		}

		.colorlist .green p {
			background-color: mediumseagreen;
		}

		.colorlist .gray p {
			background-color: gray;
		}

		.colorlist .slateblue p {
			background-color: slateblue;
		}

		.colorlist .violet p {
			background-color: violet;
		}

.fonts {
	background-color: whitesmoke;
}

	.fonts h1{
		font-size: 4vw;
	}

	.fonts p{
		font-size: 2vw;
	}

.links {
	margin-top: 5vw;
	background-color: black;
	color: white;
	
}

.links ul {
	font-family: 'Google Icons: LINK';
}

.links li{
	list-style-type: none;
	font-size: 200%;
}

.links h1{
	font-size: 5vw;
}

.links p{
	font-size: 1.5vw;
}

@media screen and (max-width: 500px) {
  .links li {
	  font-size: 7vw;
	}
}

.links li::before{
	font-family: "material symbols outlined";
	content: "link";
	margin-left: 3vw;
	margin-right: 1vw;
}

.links a{
	color: yellow;
}

	.links a:visited{
		color: orange;
	}

	.links a:hover{
		color: green;
	}

	.links a:active{
	color: red;
	}

.boxmodel{
	margin-top: 5vw;
	background-color: rebeccapurple;
	font-family: "serif";
	margin-bottom: 5vw;
	padding-bottom: 0.3vw;
}

.boxmodel p{
	color: greenyellow;
	text-align: left;
	font-size: 1.7vw;
}

.boxmodel h1{
	color: whitesmoke;
	text-align: center;
	font-size: 4vw;
}

.boxmodel .blackbox{
	font-size: 2vw;
	text-align: left; 
	background-color: black;
	width: 300px;
	border: 15px solid green;
	padding: 50px;
	margin: 20px;
	color: yellowgreen;
}

.boxmodel .redbox{
	text-align: left;
	background-color: darkred;
	width: 35vw;
	border: 5px dashed white;
	padding: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 28vw;
	margin-right: 30vw;
	color: greenyellow;
}

@media screen and (max-width: 1200px) {
  .boxmodel .blackbox {
	  width: 40vw;
	  padding: 3vw;
	  margin: 3vw;
	  border: 1.5vw solid green;
	}
}

@media screen and (min-width: 1201px) {
  .boxmodel .blackbox {
	  width: 30vw;
	  height: 10vw;
	  padding: 3vw;
	  margin: 3vw;
	}
}

@media screen and (max-width: 500px) {
.boxmodel .redbox{
		margin-right: 50vw;
		margin-left: 30vw;
		width: 25vw;
		border: 0.7vw dashed white;
		padding: 2vw;
		padding-top: 1vw;
		padding-bottom: 1vw;
	}
}