body {background-color: rgb(255, 21, 21);}
a:link {color: rgb(0, 0, 0);background-color: rgb(255, 221, 0);}
a:visited { background-color: yellowgreen;}
a:hover {background-color: purple;}
a:active {background-color: white;}

ul li:nth-child(2) { background-color: rgb(8, 0, 255);}
ul li:first-child {background-color: rgb(233, 18, 211);}
ul li:last-child {background-color: rgb(0, 247, 255)}

h1 {color: red}
p:nth-of-type(1) {background-color:gold}
.container 
  {font-family: sans-serif;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;}
  .container body {background-color: rgb(255, 21, 21);}
  .container a:link {color: rgb(0, 0, 0);background-color: rgb(255, 221, 0);}
  .container a:visited { background-color: yellowgreen;}
  .container a:hover {background-color: purple;}
  .container a:active {background-color: white;}

header {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(143, 42, 244);
  color: whitesmoke;
  text-align: center;}
header
  {grid-column: 1 / 3;
  grid-row: 1;}
footer 
  {grid-column: 1 / 3;
  grid-row: 5;
  margin-bottom: 30px;}
main 
  {border-left: 5px solid black;
  padding: 10px;
  grid-column: 2;
  grid-row: 2;
  background: purple;
  padding-right: 50px;
  padding-left: 20px;
  margin-right: 10px;}

section{grid-column: 1 / 3;}

nav {padding: 10px;}

.flex-container {
  display: flex; 
  justify-content: space-around; 
  align-items: left; 
  height: 100px; 
  border: 1px solid #000000; }


.flex-item {
  background-color: #21ff1d;
  padding: 20px;
  border: 1px solid #ddd;
  text-align: center;
}

p {clear:left}