*{       /* step 2. Reset all margins */ 
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body{    
    /* step 3a. create custom property for body */
    --accent-color: #9b59b6;
    --accent-color-gray:  rgb(240, 240, 240);
    --accent-color-gray-font: gray;

    /* step 3b. 3 more custom properties*/
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;

    /* step 3c. */
    --padding-sm: 0.5rem;
    --padding-md: 1rem;
    --padding-lg: 3rem;   
    
    /* step 3d. */
    --margin-sm: 0.5rem;
    --margin-md: 1rem;
    --margin-lg: 3rem;
    --margin-top: 70px;   

    /* step 3f. */
    height: 100vh;              /* in percentages */
    width: auto;
    overflow: hidden;
 
    /* step 3g. */
    display: flex;              /* Row by default */
}

/* step 3e. Any forms within body element has the accent color(?) */
body forms{
    background: var(--accent-color);
}

/* step 4a. Only on the left side border to border-radius-medium.*/
main{
    /* border-radius starts from top-left, clockwise dir  */
    border-top-left-radius: var(--border-radius-md);
    border-bottom-left-radius:  var(--border-radius-md);

    /* step 4b. */
    /* padding: var(--padding-md) var(--padding-lg); */
    /* NOTE: This is the only changes made from the base for the calendar.
    Everything else remains intact. */

    /* step 4c. */
    flex-grow: 1;
    height: 100%;
}