/* defaults */
/* 
black #32302C
white #fffef4
grey #CCCBC2
pink #F5A9C0
light pink #FDE9E7
https://coolors.co/32302c-cccbc2-fffef4-fde9e7-f5a9c0
*/
    
    body {
        background-color: #fffef4;
    }

/* text styling */
    body {
        font-family: "Helvetica", sans-serif;
        color: #32302C;
    }

    h1 {
        font-size: 40px;
        font-weight: bold;
    }

    h2 {
        font-size: 28px;
        font-weight: bold;
        /* text-decoration: underline wavy 3px; */
    }

    h4 {
        font-size: 22px;
        margin-top: 20px;
    }

    h5 {
        font-size: 28px;
    }

    p {
        font-size: 18px;
    }

    a {
        color: #32302C;
        text-decoration: none;
    }

    h4 {
        /* color: #32302C; */
        text-decoration: underline;
        text-decoration-color: #CCCBC2;
    }

    h4:hover {
        font-weight: bold;
    }

/* images and blocks */
    .pic, .block {
        width: 100%;
        height:auto;
        border-radius: 5px;
    }

    .block {
        padding: 20px;
        /* background-color: #FDE9E7; */
        border: 2px solid #CCCBC2;
    }

    .logo {
        width: 100%;
        height:auto;
    }

    .logo:hover {
        filter: brightness(96%);
        transform: translateY(-4px);
    }

/* dropdowns */
    .dropdown-menu {
        background-color: #FFFEF4;
        /* border-radius: 5px; */
        /* border: 2px solid #CCCBC2; */
    }

    .dropdown-item:hover {
        font-weight: bold;
        background-color: #FFFEF4;
    }

/* specific bits */
    #homeBanner {
        width: 100%;
        height: 225px;
        object-fit: cover;
    }

    /* #iconList {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    } */

    #emojiIcon {
        font-size: 75px;
        color: #F5A9C0;
        position: absolute;
        top: 180px;
        left: 75px;
        z-index: 1;
    }

    #notepad {
        height:300px;
        background-color: #F5A9C0;
        padding: 20px;
    }

    .dateText {
        font-size: 75px;
        text-align: center;
        background-color: #FFFEF4;
        margin: 5px;
        padding: 20px;
        border-radius: 7px;
    }

    #calendar {
        height:180px;
        background-color: #F5A9C0;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* misc */
    .row {
        padding-bottom: 24px;
    }