/*
Hi! I'm a comment too! Let's explore how to style your website with CSS (cascade style sheets).
CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed by the browser
*/

body {
    /* 
    In here, we are telling the browser to align the text in the center of the page.
    The line "body { " is called a selector. It selects the HTML element you want to style.
    To select and element you can use the element name, class name (prefixed with . ) or id name (prefixed with #).
    Don't worry if you don't understand this yet, you will get the hang of it as you practice!
    
    You can also set the background colour to something different if you'd like -  just 
    replace #f0f0f0 with the colour you want, which you can find by searching for "hex colour picker" online.
     */
    text-align: center;
    background-color: #33cccc;
    background: linear-gradient(-90deg, #ff9696, #ffaaaa); /* comment here */ 
}

.main-section {
    /* 
    This selector is for the class "main-section" in index.html
    We are telling the browser to add a margin of 20px (20 pixels) to the top and bottom of the element with this class.
    max-width: 600px; is setting the maximum width of the inner to 600 pixels, so it doesn't stretch too wide on big screens.
    width: 100%; is setting the width of the element to 100% of the "parent" (outer) element, so it takes up the full width of the page.
    */
    margin: 20px 0;
    max-width: 600px;
    width: 100%;
    margin: auto;
}

a {
    /* 
    This selector is for the anchor tag (a) in index.html. Anchor tags are used for links. We'll make our links red and underlined, 
    but as usual you can change this to any colour you like!
    */
    color: #d83c0d;
    text-decoration: underline;
    
}

a:hover {
    /*
    This selector is for the anchor tag (a) in index.html when it is hovered over (an anchor is just a link). We'll make the link wavey!
    */
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
}

a:visited {
    /* Visited Links, colour hexcode is for when the links are clicked on*/
    color: #A020F0
}

a:active {
    /* Actively Hovered */
    color: #0000FF
}

.profile-pic {
    /*
    This selector is for the class "profile-pic" in index.html. We are setting the width of the image to 100px and the height to 100px.
    Images are assumed to be a square, so you should crop them as such before using one.
    We are also setting the border-radius to 50% to make the image a circle. Lower his to make it a rounded square
    */
    width: 200;
    height: 400px;
    /* border radius here */
    /* We'll add a margin to the top of the image to give it some space from the text below it */
    margin-top: 16px;
    transition: all 0.35s ease-in-out;
}

/* Now we'll add a hover animation on the profile picture to make it slightly larger when your mouse is over it. This animation will last 0.3seconds */
.profile-pic:hover {
    /* We'll use the transform property to scale the image up by 10% */
    transform: scale(1.2);
}