body {
    color: #000;
    background-color: #f4f4f4;
    font-family: "Chakra Petch", Sans-serif;;
    transition: background-color 1s ease;
}

/* panel styles */
.panel {
    min-height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
}

/* colours */
.color-grey {
    background-color: #c0c0c0;
}
.color-indigo {
    background-color: #4332CF;
}
.color-blue {
    background-color: #1AC6FF;
}
.color-green {
    background-color: #4DCF42;
}
.color-yellow {
    background-color: #FAEB33;
}
.color-orange {
    background-color: #F19031;
}
.color-red {
    background-color: #F2293A;
}

/* styling for demo, can ignore */
body {
    text-align: center;
    font-size: 120%;
    line-height: 1.618;
}
h1, h2 {
    font-size: 3em;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.1;
}
p {
    max-width: 30em;
    margin-bottom: 1.618em;
}
a {
    color: #4332CF;
}
a.custom_link {
    text-decoration-color: none;
}
a.custom_link:hover {
    color: #ffffff;
    text-decoration-color: underline;
    text-underline-offset: 0.25em !important;
}