*{       /* 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;
    --warning-font-color: #cb5348;
    --warning-accent-color: #f1cecc;
    --accent-color-gray:  rgb(240, 240, 240);

    /* 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-md-lg: 1.5rem;
    --padding-lg: 3rem;   
    
    /* step 3d. */
    --margin-sm: 0.5rem;
    --margin-md: 1rem;
    --margin-lg: 3rem;   

    /* 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);

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