styles.css

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

h1 {
    text-align: left;
    font-family: 'Fredoka One', cursive;
    font-weight: 700;
    font-size: 26px;
}

h2 {
    text-align: left;
    font-family: 'Patrick Hand', cursive;
    font-weight: 500;
    font-size: 27px;
}

p,
ul {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 14px;
}

.pTitle {
    font-size: 18px;
    font-weight: bold;
}

.colors {
    display: inline-block;
    width: 200px;
}

.colorsArea {
    border: 1px solid black;
    padding: 10px;
}

.color1 {
    background-color: rgb(0, 131, 255);
    color: white;
    border: 1px solid black;
    height: 150px;
}

.color2 {
    background-color: rgb(248, 211, 112);
    border: 1px solid black;
    height: 150px;
}

.color3 {
    background-color: rgb(248, 70, 112);
    border: 1px solid black;
    height: 150px;
}

.color4 {
    background-color: rgb(122, 0, 0);
    color: white;
    border: 1px solid black;
    height: 150px;
}

.color5 {
    background-color: rgb(0, 157, 107);
    border: 1px solid black;
    height: 150px;
}

.fontsArea {
    border: 1px solid black;
    padding: 10px;
    margin-top: 7px;
}

.font1 {
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 22px;
}

.font2 {
    font-family: 'Indie Flower', cursive;
    font-size: 22px;
}

.font3 {
    font-family: 'Patrick Hand', cursive;
    font-size: 22px;
}

.font4 {
    font-family: 'Fredoka One', cursive;
    font-size: 22px;
}

.font5 {
    font-family: 'Open Sans', sans-serif;
    font-Size: 22px;
}

.headings {
    border: 1px solid black;
    padding: 10px;
    margin-top: 7px;
}