/* add a class selector and font*/
*.p1 {
  font-family: "Potta One", cursive;
}
p.active:active {
  background-color: green;
}
section {
  position: static;
  text-decoration: underline;
  color: navy;
}
/* all the color options left */
#side {
  color: rgb(0,0,255);
  color: rgba(0,0,255,0);
  color: #000;
  color: hsl(0,0,0),  hsla(0,0,0,0);
}
/*Selector List */
section, aside {
  position: relative;
  font-family = "Times New Roman", Times, serif;
}

h2 {
  color: #000080; 
}

/*This is an element selector
that will make all paragraphs font and color change*/
p {
  color: blue;
  font-family = "Times New Roman", Times, serif;
}
a[target="_blank"] {
  color: red;
}
a:active {
  background-color: green;
}
a:hover {
  background-color: yellow;
}
div p {
  background-color: yellow;
}
div > p {
  background-color: yellow;
}
aside + section {
  background-color: yellow;
}
aside ~ section {
  background-color: yellow;
}
p.highlight {
  background-color: yellow;
}

/*------------CSS TOPICS-----------*/
/*Borders*/
p.dotted {
  border-style: solid;
  border-color: blue;
  border-width: thick;
}
#rounded {
  border: 2px solid blue;
  border-radius: 10px;
}
/* Use of three absolute and one relative*/
p.absolute {
  font-size: 16px;
  font-size: 10cm;
  font-size: 0.2in;
  line-height: 1em;
}
/*use of two relatives for a total of three*/
p.relative {
  font-size: 2ex;
  font-size: 2ch;
}
/*Use of Box Model, padding long*/
caption {
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  caption-side: bottom;
}
table {
  border-collapse: collapse;
  border: 2px solid rgb(100,100,100);
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: .7rem;
}
/*padding short*/
td, th {
  border: 3px solid rgb(100,100,100);
  padding: 10px 10px 10px 10px;
}
td {
  text-align: center;
}
/*long hand margins*/
h2.margin {
  margin-top: 10px;
  margin-bottom: 5px;
  magin-left: 10px;
  margin-right: 1250px;
  background-color: lightblue;
}
/*short hand margins*/
p.margin {
  margin: 10px 1250px 10px 10px;
  background-color: lightgreen;
}
/*use of auto margin*/
#margin {
  margin: auto;
  border: 1px solid red;
}
div.htwd {
  height: 50px;
  width: 200px;
  background-color: red;
}
/*Quick use of block and hidden display*/
a {
  display: block;
}
p.hidden {
  display: none;
}
/*playing with max and min width as percentages*/
div.maxmin{
  min-width: 10%;
  max-width: 25%;
  height: 25px;
  background-color: green;
}
/*Media Query based off screen width whole screen will just be light green
if bigger than than the min-width size*/
@media screen and (min-width: 500px) {
  body {
    background-color: lightgreen;
  }
}
/*FlexBox Section*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: navy;
}
.flex-container > div {
  background-color: teal;
  width: 110px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
div.navy {
  color: navy;
}
/*Grid Section*/
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: blue;
  padding: 10px;
}
.grid-container > div {
  background-color: yellow;
  border: 1px solid blue;
  padding: 80px;
  font-size: 30px;
  text-align: center;
  color: blue;
}