body {
  padding-bottom: 500px;
}
h4 {
  color: black;

  border-bottom: 2px solid #111;
  font-size: 2.5rem;
  padding: 20px;
}
h3 {
  color: green;
}
p {
  color: blueviolet;
}
/* comentario */
.paragraph {
  color: aqua;
  background-color: black;
  padding: 5px;
}

#exclusiveh1 {
  background-color: purple;
  color: yellow;
  padding: 10x;
}

h2 {
  border-bottom: 2px solid red;
}
.classh2 {
  border-bottom: 3px solid blue;
}
#exclusiveh2 {
  border-bottom: 4px solid green;
}

.colorname {
  color: rgb(164, 15, 45);
}
#colornameid {
  color: #176;
}
.bg {
  background-color: black;
  color: yellow;
}
.bg2 {
  background-color: green;
  color: gray;
}
.opacity-div {
  background-color: pink;
  opacity: 0.2;

  span {
    color: black;
  }
}
.rgbaopacidade {
  background-color: rgba(90, 120, 20, 0.2);
  color: black;
}
.backgroundimage {
  background-image: url(../img/valfend.jpg);
  h1 {
    color: blue;
    font-size: 2rem;
    padding: 10px;
  }
}
.backgroundimage,
.centered-bg {
  height: 400px;
  width: 400px;
  background-image: url(../img/valfend.jpg);
}
/* isso abaixo é muito importante, trabalhando com redimencionamento de imagens */
.centered-bg {
  background-position: center;
  background-size: cover;
}

.heith-width {
  height: 200px;
  width: 100px;
  background-color: red;
}

.heith-width2 {
  height: 200px;
  background-color: brown;
}

.without-padding {
  background-color: #111;
  color: #fff;
}

.with-padding {
  background-color: #111;
  color: #fff;
  padding: 20px;
}

.indivual-padding {
  background-color: #176;
  color: #fff;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
}

.shorthand-rules {
  padding: 6px 12px 18px 25px;
  /* padding: 10px 20px; */
}

.without-border-box {
  background-color: #444;
  color: #fff;
  width: 400px;
  padding: 50px;
}

.with-border-box {
  background-color: #666;
  color: #fff;
  width: 400px;
  padding: 50px;
  box-sizing: border-box;
}

.border {
  border: 5px solid red;
  padding: 10px;
}

.border2 {
  border: 2px dotted crimson;
  padding: 25px;
}
.border-individual {
  border-left: 3px solid red;
  padding: 25px;
}
.border-radius {
  border: 5px solid red;
  padding: 20px;
  border-radius: 20px;
}
.radius-without-border {
  background-color: blueviolet;
  padding: 20px;
  border-radius: 20px;
}
.margem {
  margin: 10px;
  background-color: #444;
  color: aliceblue;
}
.margem-top {
  margin-top: 50px;
  background-color: #222;
  color: aliceblue;
}
.margeshorthange {
  margin: 20px 30px;
  background-color: #333;
  color: aliceblue;
}
.class-31 {
  margin: 20px;
  padding: 15px 25 px;
  border: 3px solid green;
  border-radius: 8px;
  width: 200px;
  height: 200px;
  span {
    display: flex;
    align-self: center;
    text-align: center;
  }
}

#challenger-css {
  background-color: #777;
  padding: 40px;
  outline: 2px solid #2706ad;
  h2 {
    background-color: aqua;
    outline: 20px solid #fff;
  }
}
.text-aligment {
  color: #111;
}
.text-aligment-right {
  text-align: right;
}

.container-center {
  text-align: center;
  width: 300px;
  border: 1px solid red;
}

.underline {
  text-decoration: underline;
}

.linethrought {
  text-decoration: line-through;
}

.remove-underline {
  text-decoration: none;
  color: rebeccapurple;
}

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}

.letterspacing {
  letter-spacing: 5px;
}

.serif {
  font-family: serif;
}
.sans-serif {
  font-family: Arial, Helvetica, sans-serif;
}
.monospace {
  font-family: monospace;
}
.cursive {
  font-family: cursive;
}
.fantasy {
  font-family: fantasy;
}

.italic {
  font-style: italic;
}
.oblique {
  font-style: oblique;
}

.fontweightheavy {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
}
.fontweightmedium {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
}
.fontweightlight {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
}

.fontsizesmall {
  font-size: 6px;
}
.fontsizemedium {
  font-size: 20px;
}

.fontsizelarger {
  font-size: 50px;
}

.inlineblock {
  background-color: greenyellow;
  border: #111 solid 2px;
  display: inline-block;
}
.spandisplay {
  display: block;
}

#invisible {
  display: none;
}

.static {
  position: static;
  background-color: #390;
  color: #fff;
  width: 100px;
  height: 100px;
}

.relative {
  position: relative;
  background-color: #499;
  color: #fff;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
}

.absolute {
  position: absolute;
  background-color: #691;
  color: #fff;
  width: 75px;
  height: 75px;
  left: 20px;
}

.relative-container {
  position: relative;
  background-color: #691;
  color: #fff;
  width: 300px;
  height: 300px;
  border: 3px solid crimson;
  margin-top: 120px;
}

.pos-fixed {
  width: 100px;
  height: 100px;
  border: 1px solid #523;
  margin-top: 120px;
  position: fixed;
  top: 50px;
  right: 100px;
}

.pos-sticky {
  background-color: #505;
  width: 100px;
  height: 100px;
  border: 1px solid magenta;
  position: sticky;
  top: 10px;
  right: 20px;
}

.aboslut1,
.aboslut2,
.aboslut3 {
  position: absolute;
  background-color: #123;
  width: 50px;
  height: 50px;
}

.aboslut1 {
  top: 0px;
  left: 0px;
  z-index: 1;
}
.aboslut2 {
  top: 10px;
  left: 10px;
  bottom: 20px;
  background-color: green;
}
.aboslut3 {
  top: 40px;
  left: 40px;
  background-color: red;
}