/*
    The importance:
    1. Transition values.
    2. The !important one.
    3. Animation.
    4. Everything else.

    The origin:
    1. The web, which we have the control over with.
    2. The user.
    3. The browser.

    Fun fact: The !important browser default is the winner, your website !important default is the looser.

    The specificity:
    1. Inline CSS.
    2. The layer. It's new and it's useful to define explicity "layers" of styles.
    3. ID selectors.
    4. Class | Attribute | Pseudo-class selectors.
    5. Type | Pseudo-elements selectors.
    NOTE: *, +, >, ~, _, || doesn't affect in specificity.
    NOTE 2: The number of hits on the highest-reached level matter.

    The position:
    
*/

/* Styling the body */
body {
    /* We are going to use linear-gradient and combines with "background" property. */
    /* linear-gradient is a function. */
    /* linear-gradient takes three arguments, one the degrees, two the color one, three the color two. */
    background: linear-gradient(145deg, #fff, #c2c2c2);
    /* Using font-family for our whole page (body) and it's Segoe UI. If I have to... */
    /* Use always your fall-back fonts! */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* font-size is using relative unit like "em". */
    /* Defines "em" relative for the parent content. */
    font-size: 1.1em;
}

.container {
    margin: 0 auto;
    max-width: 600px;
    min-width: 300px;
}

img {
    border: 2px solid #fff;
    box-shadow: 10px 5px 6px 5px whitesmoke;
    display: block;
    height: auto;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 450px;
}

.description {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 16px;
    text-align: justify;
}

.description-pro {
    font-family: monospace;
}

.description-pro:hover {
    border-style: dashed;
    border-width: 1mm;
    color: #c2c2c2;
    cursor: pointer;
    padding: 25px;
}

.description-pro:active {
    background-color: #c2c2c2;
    color: darkblue;
    cursor: crosshair;
}

#last-navigator {
    border-top: 3px dashed #fff;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding-top: 10px;
    text-align: center;
}

#last-navigator + a + a {
    display: block;
    text-align: center;
}

ul, ol {
    text-align: center;
    text-shadow: 5px 6px 5px #c2c2c2;
}

.main-title {
    font-size: 2rem;
    text-align: center;
    text-shadow: 5px 5px 10px hwb(0deg 38.73% 61.27%);
}