style.css

.teamCrimson {
 color: crimson;
}
.teamTeal {
 color: teal;
}
.captain {
 font-weight: bold;
}


.photo {
 height: 100px;
 width: 200px;  
 border-radius: 30px;
}

.population {
 border: solid 5px plum;
}

.funFact {
 border: solid 5px green;
}

p {
 border-radius: 10px;
}

img {
 width: 100px;
 height: 100px;
 margin: 10px;
 border: solid olive;
 padding: 5px;
}

h2 {
 background-color: darkblue;
 margin: 10px;
 padding-top: 30px;
 padding-bottom: 10px;
 width: 250px;
 border: solid olive;
 text-align: center;
}


p {
 margin-top: 80px; 
 margin-left: 30px;
 margin-right: 30px;
 padding: 20px;


h3 {
 margin: 20px;
}
h1 {
  margin-top: 30px;
}

a {
 color: red;
}

img {
 margin: 40px;
 height: 40px;
 width: 150px;
}

body {
 
 color: white;
 text-align: center;
 font-family: "Verdana", sans-serif;
}

h2 {
 margin: 40px 30px 30px 30px;
}

p {
 margin: 30px 30px 0 30px;
}

button {
 font-size: 18px;
 color: white;
 border-radius: 30px;
 margin: 30px 0 0 0;
}

body {
 text-align: center;
}

img {
 border-radius: 10px;
}

body {
 text-align: center;
}

h2 {
 margin: 40px 30px 30px 30px;
 border-radius: 0 30px 30px 0;
}

img {
 width: 100px;
 padding: 10px;
 border-radius: 20px;
 margin: 10px 5px 0 5px; 
}

button {
 color:white;
 padding: 5px 15px 5px 15px;
 margin: 25px 0 0 0;
 border-radius: 0 30px 30px 0;
}

p {

 padding: 5px 10px 5px 10px;
 margin: 30px 30px 0 30px;
 border-radius: 15px 0 15px 0;
}


body {
 text-align: center;
 background-color: lightBlue;
}

h3 {
 font-family: Courier New;
 transform: rotate(-8deg);
 font-style: italic;
}

img {
 border-radius: 150px;
 transform: rotate(15deg);
}
body {
 text-align: center;
}

h3 {
 filter: blur(4px);
}

h4 {
 filter: blur(2px);
}

h5 {
 filter: blur(1px);
}

body {
 text-align: center;
}

img {
 width: 100px;
 height: 100px;
 margin: 20px;
 filter: blur(10px);
}

p{
 font-size: 9px;
 filter: blur(10px);
}


body {
 text-align: center;
 font-family: Monospace;
}

h2 {
 filter: blur(1px);
}

img {
 filter: grayscale(100%);
 margin: 20px 0 20px 0;
}

a {
 color:black;
 background-color: lightGray;
 filter: opacity(60%);
}

p {
 background-color: lightGray;
 filter: opacity(40%);
}


button {
 margin-top: 30px;
 background-color: gold;
 font-weight: bold;
 font-size: 20px;
 padding: 10px;
 border: solid 1px black;
 filter: grayscale(80%);
}

a {
 background-color: lightGray;
 padding: 10px;
 border: solid 1px black;
 filter: opacity(50%);
}


body {
 background-color: slateGray;
 color: white;
 text-align: center;
}

img {
 margin: 10px 0 20px 0;
 border: solid 2px aliceBlue;
 filter: saturate(130%) brightness(110%);
}

img {
 filter: brightness(80%) saturate (75%)
 contrast(150%);
 width: 200px;
 height: 300px;
 padding: 50px;
 border: solid 2px black;
 background-color: white;
}

body {
 text-align: center;
 font-family: monospace;
 background-color: beige;
}


h3 {
 height: 40px;
 padding: 15px;
 border-radius: 8px;
 background: linear-gradient(aliceblue, white);
}

img {
 height: 300px;
 padding: 20px;
 border-radius: 8px;
 background: linear-gradient(90deg, bisque, white, bisque);
}

body {
 text-align: center;
 background: linear-gradient(45deg, lightBlue, snow, white);
}


img {
 width: 50px;
 height: 50px;
}

body {
 background-color: azure;
}

div {
 text-align: center;
 background-color: lightcyan;
 padding: 15px;
}


h5 {
 color: gray;
 margin: 0px 0px 0px 30px;
}

body {
 background-color: aliceblue;
}

div {
 border-radius: 10px;
 background-color: lightblue;
 margin: 20px;
 padding: 10px;
}

body {
 background-color: bisque;
 text-align: center;
}

p {
 border: solid 1px bisque;
 margin: 0;
 padding: 10px;
}

div {
 border-radius: 10px;
 background-color: whitesmoke;
 font-size: 14px;
 text-align: left;
}

h4 {
 margin: 5px 0px 5px 0px;
 }

p {
 margin: 0px 0px 15px 0px;
 }

div {
 margin: 40px;
 color: gray;
 font-size: small;
}


img {
 width: 100px;
}

.title {
 background-color: coral;
}

.navigation {
 background-color: lightCoral;
 color: white;
}

.content {
 background-color: linen;
 text-align: center;
}

div {
 margin-bottom: 10px;
 border-radius: 5px;
 padding: 12px;
}

body {
 text-align: center;
}

.# {
 border: 2px solid indigo;
 padding: 10px;
}

.header {
 font-size: 30px;
 background-color: indigo;
 color: white;
 margin: 0px;
}

.price {
 font-size: 25px;
}



body {
 font-family: "Arial";
 text-align: center;
}
.product {
 border: 1px solid ;
 width: 120px;
 padding: 10px;
 margin: auto;
}
.price{
 color: darkGreen;
 font-size: 20px;
}
.oldPrice {
 color: gray;
 font-size: 12px;
}
button {
 background-color: gold;
 padding: 5px;
}

.trafficLight {
 background-color: #777777;
 height: 160px;
 padding: 10px;
}

div {
 border-radius: 25px;
 margin-bottom: 5px;
 height: 50px;
 width: 50px;
}

.red {
 background-color: #ff0000;
}

.yellow {
 background-color: #ffff00;
}

.green {
 background-color: #00ff00;
}

div {
 height: 50px;
 margin: 0 auto;
}
.red {
 background-color: #ff0000;
 width: 30px;
}
.orange {
 background-color: #ffa500;
 width: 60px;
}
.yellow {
 background-color: #ffff00;
 width: 90px;
}
.green {
 background-color: #00ff00;
 width: 120px;
}
.blue {
 background-color: #0000ff;
 width: 150px;
}
.indigo {
 background-color: #4b0082;
 width: 180px;
}
.violet {
 background-color: #ee82ee;
 width: 210px;
}

body {
 background-color: #cccccc;
 text-align: center;
}

p {
 width: 200px;
 height: 50px;
 margin: 0 auto;
}

.red {
 background-color: #ff0000;
}

.white {
 background-color: #ffffff;
}

.green {
 background-color: #00bb00;
}

.yellow {
 background-color: #ffff00;
}

.blue {
 background-color: #0000ff;
}

.black {
 background-color: #000000;
}


div {
 border: 2px solid black;
 margin: 5px;
}

p {
 height: 50px;
 margin: 0;
}

.full {
 width: 100%;
 background-color: green;
}

.half {
 width: 50%;
 background-color: orange;
}

.low {
 width: 10%;
 background-color: red;
}


div {
 font-size: 0;
 border: 2px ridge gray;
}
.gaming {
 width: 40%;
 background-color: skyblue;
}
.movies {
 width: 35%;
 background-color: wheat;
}
.music {
 width: 25%;
 background-color: pink;
}


div {
 border: 2px solid gray;
 font-size: 0;
}

button {
 width: 25%;
 height: 30px;
}

.clear {
 width: 50%;
 background-color: orange;
}

.submit {
 width: 50%;
 background-color: lightgreen;
}

p {
 text-align: right;
 font-size: 15px;
}
.blogPost {
 background-color: snow;
 padding: 10px;
 margin: 10px;
}

.featuredPost {
 border: 3px solid gold;
}

.blogTitle {
 font-family: 'Arial';
 font-size: 25px;
}

.featuredTitle{
 color: goldenrod;
}

.day {
 background-color: bisque;
 margin: 5px;
 padding: 10px;
 text-align: center;
}

.weekend {
 background-color: plum;
 font-style: italic;
}

.today {
 font-weight: bold;
 border: 2px solid gray;
}

.past {
 color: gray;
 background-color: lightgray;
}

.dark, .light {
 width: 100px;
 height: 100px;
 border: none;
}

.dark {
 background-color: black;
}

.light {
 background-color: lightgray;
}

body {
 text-align: center;
}

.item {
 text-align: right;
 border: 1px solid brown;
 margin: 10px;
}

.itemName, .quantity, button {
 font-size: 20px;
 margin: 5px;
}

h2, #checkout {
 background-color: brown;
 color: white;
 padding: 10px;
}
.container {
 display: flex;
 width: 100%;
 background-color: #DE9C51;
 color: #FFFFFF;
}

.item {
 padding: 8px;
}

h3 {
 text-align: center;
}

.container {
 display: flex;
 flex-direction: column;
}

.copyright {
 display: flex;
 flex-direction: column;
 text-align: center;
}

h3 {
 text-align: center;
}

.item {
 padding: 15px;
 margin: 2px;
 background-color: #F3EBFE;
}

.container {
 background-color: #DE9C51;
 color: #FFFFFF;
 display: flex;
 justify-content: flex-end;
}

.main {
 background-color: #FBF4F0;
 color: #994E21;
 height: 150px;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.item {
 padding: 8px;
}

.link.item {
 margin: auto;
}

h3 {
 text-align: center;
}

.footer {
 display: flex;
 flex-direction: row;
 justify-content: center;
 padding: 5px;
}

.container {
 display: flex;
 background-color: #F0F5FD;
 height: 260px;
 flex-direction: column;
 justify-content: space-around;
}

.item {
 background-color: #D9E8FB;
 padding: 10px;
 text-align: center;
}

a {
 margin-right: 10px;
}

h3 {
 text-align: center;
}