*{
   margin: 0; 
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

.favColor-text{
    color: #fcb040;
}

.favColor-bg{
    background-color: #fcb040;
}

:root {
  --favColor: #fcb040;
}

.bg-red {
  background-color: red;
}

.bg-blue {
  background-color: blue;
}

.bg-green {
  background-color: green;
}

.bg-pink{
    background-color: pink;
}

.bg-purple{
    background-color: purple;
}
.bg-orange{
    background-color: orange;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.container{
    width: 100%;
    display: flex;
    flex-flow: wrap row;
}

.content{
    width: 100%;
    height: 100px;
}

p{
    font-size: 14px;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

.container{
    width: 100%;
    display: flex;
    flex-flow: wrap row;
}

.content{
    width: 100%;
    height: 100px;
}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
p{
    font-size: 2em;
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.content{
    width: 25%;
} 
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}

.picture{
    background-size: contain;
}