/* Using external CSS here instead of internal CSS; see the note in the <head> of index.html. */

/* Gradients - Step 2: Create a CRAZY linear gradient for the body of your document. */
body {
    background: linear-gradient(white, rgb(0, 221, 255));
    
    font-family: "Kablammo", system-ui;
}

/* Create a div to contain examples of gradients */
div {
    width: 80%;
    height: 160px;
}

/* These are classes that define the styles for different gradients. */

.simple-linear {
    background: linear-gradient(rgb(243, 190, 97), rgba(255, 252, 192, 0.633));
}

.simple-radial {
    background: radial-gradient(white, rgb(255, 221, 0), rgb(244, 46, 224));
}

.horizontal-gradient {
    background: linear-gradient(to right, rgb(75, 126, 203), rgb(59, 65, 54));
}

.auto-spaced-linear-gradient {
    background: linear-gradient(black, rgb(217, 41, 41), white, black);
}

/* Pseudo Element Practice, Step 2: Use an element selector to set the h1 font size to 50px. */

h1 {font-size: 50px;}

/* Pseudo Element Practice, Step 4: Find the appropriate pseudo ELEMENT (not pseudo class) and use it to set the font of the first letter of this phrase to a font-size of 44px. */
header::first-letter {
    font-size: 44px;
}

header::second-letter {
    color: rgba(100, 42, 53);
}

/* Pseudo Element Practice, Step 5: Use another pseudo element to set the font color of the first line to red. NOTE: Comments are used to 'comment out' some of the styles. */

header::first-line {
    /* color: red; */
    /* Pseudo Element Practice, Step 5.1: In hexidecimal color */
    /* color: #ff0000; */
    /* Pseudo Element Practice, Step 5.2: In rgba */
    color: rgba(176, 118, 233, 0.966)
}

/* Rotation exercise */
h2.rotate {
    transform: rotate(-100deg);
}