/* Step 1: Define color variables using hex values or rgb values - done*/
/*:root { 
    /* 1a -  a primary color */
    /* 1b -  a secondary color */
    /* 1c -  a text color */
    /* 1d - the background color for the card */
/*}*/ 

/* colour variables */

:root {
--primary-colour: #dfd8dd9f;            /* page background colour */
--secondary-colour: hwb(185 33% 51%);   /* profile photo border, .bio text */
--text-colour: hwb(186 27% 62%);        /* h1 text for profile card */
--background-colour: #145558;           /* profile card background colour */
}

/* Step 2: Style the card */
body {
    /* set background-color to the theme primary color - done */ 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: var(--primary-colour);
}

.profile-card {
    /* 2a - add a background color using var( )  - done */
    /* 2b - add a background image - done */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    background-color: var(--background-colour);
    /* not actually visible though; the background image fills the profile card */
    
    /* background image: */
    background-image: url(images/profileCardBackgroundImage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
    /* added border to emphasize profile card */
    border: .05rem solid var(--secondary-colour);

    /* 2c - define the text color using  var( ) - done */
    color: var(--text-colour);
    /* 2d - add a box shadow using rgba - done */ 
    box-shadow: .5rem .5rem .5rem rgb(152, 181, 152);   /* length, length, length, colour */
  }
  
  /* Step 3: Add styles for the image and text */
    .avatar {
        border-radius: 50%;
        /*3a - set the border to 3px solid & secondary color - done */
        border: 3px solid var(--secondary-colour);
        width: 100px;
        height: 100px;
        display: inline-block;  /* added so the profile photo will adhere to .avatar width and height */
    }

    .bio {
        /* 3b -  set colour to secondary color - done */
        color: var(--secondary-colour);
    }