@charset "UTF-8";
/* CSS Document for homework1
Author: Andrew Addens
Course: ITWP 1050
File: styles2.css */


@font-face {  /* Importing font family from https://www.fontsquirrel.com */
    font-family: "Rubik-Black";
    src: local("Rubik-Black"), local(Rubik-Black),
        url("Rubik-Black.ttf");
}

body {  /* sets font size, type, and background color */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    background-color: hsl(290, 10%, 54%)
}

p { /* Styles all paragraphs to be bold font */
    font-weight: bold;
}

p + P { /* Causes all sibling paragprahs to change font color to grey */
    color:rgb(85, 82, 82);
}

.p::first-letter {  /* Class that cause first letter of paragraph to look different */
    font-size: 27px;
    font-weight:bold;
}
.p::first-line { /* Class that cause first line of paragraph to look different. Kept these class names the same so that
    both adjustments would occur at the same time */
    font-size: 23px;
    font-style: oblique;
}

.headerClass { /* Class to format headings*/
    text-align: center;
    font-size: 40px;
    font-weight: normal;
    font-variant: small-caps; /* small caps effect for headings */
    color: #0b0c27;
}

#header{ /* ID to format main page tile*/
    font-family: "Rubik-Black";
    font-size: 74px;
    font-weight: normal;
    text-align: center;
    color: #0b0c27;
}

footer {
    text-align: center;
}

/* responsive and centered image class */
img.responsive {
    max-width: 100%; /* allows the image to scale down if it has to, but it will not scale up in size to be larger than its original size */
    height: auto;
    text-align: center;
    display: block; /* allows image to center itself */
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding:5px; /* Adds border to image */
    border:2px solid #000000; /* Adds border to image */
}

a { /* Hyper Link Size*/
    text-decoration: none;
    font-size: large;
}

a:link { /* Default HyperLink */
    color: rgb(53, 32, 68);
    border-bottom: 1px solid rgb(20, 13, 13);
}

a:visited{ /* HyperLink once visited */
    color: rgb(109, 69, 146);
    border-bottom: 1px solid rgb(20, 13, 13);
}

a:hover { /* HyperLink on hover*/
    color: pink;
    border-bottom: 1px solid pink;
}

a:active {
    color: rgb(109, 69, 146);
    border-bottom: 1px solid rgb(20, 13, 13);
}