*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main{
  width: 50%;
  background-color: #cccccc;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body main div{
    background-color: lightblue;
}
 
main div{
  background-color: #4ea958;
  height: 100px;
  border: 1px solid black;
  width: 100%;
}

#small{
    font-size: smaller;
    font-weight: lighter;
}

.italic{
    font-style: italic;
    color: black;
}

.big{
    font-size: larger;
    text-decoration: none;
}

.bold{
    font-weight: bold;
}

.big.bold{
    text-decoration: underline;
}

main div p{
    color: white;
}

/* Del 2 */

.important{
    color: red;   
}

.box{
    color: blue;
}

#special-box{
    color: green;
}

body #special-box{
    color: orange;
}

.box2{
    color: red;
}

.box2#special-box2{
    color: blue;
}

body #special-box2{
    color: green;
}

#special-box2{
    color: orange;
}

.text{
    color: red;
}

body p.text{
    color: blue;
}

p.text{
    color: green;
}

body .text{
    color: orange;
}

body .box3{
    color: red;
}

#special-box3{
    color: blue;
}

.box3#special-box3{
    color: green;
}

.box3{
    color: orange;
}

.text2{
    color: red;
}

.important2.text2{
    color: green;
}

body p.important2{
    color: green;
}

body .text2{
    color: orange;
}

.box4{
    color: red;
}

#special-box4.box4{
    color: blue;
}

body #special-box4{
    color: green;
}

body .box4{
    color: orange;
}