/*
selector{
  property: propertyValue,
  property1: propertyValue,
  property2: propertyValue,
}
*/

/*  by the tagName */
body{
  background: #f5eeee;
}

/*  by the id name attribute*/
#app{
  /* position: relative; */
}

/*  by the class name attribute */
.card{
  background: white;
  width: 70vw;
  height: 60vh;
  position: relative;
}

.top-left{
  background: yellow;
}

.top-right{
  background: green;
  top: 0;
  right: 0;
}

.center{
  background: red;
}

.bottom-left{
  background: blue;
  bottom: 0px;
  left: 0px;
}

.bottom-right{
  background: orange;
  bottom: 0;
  right: 0;
}

/* dependent selector */
.card div{
  width: 60px;
  height: 60px;
  position: absolute;
}