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



@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");}
#header{ /* ID to format main page tile or h1*/
    text-transform: uppercase;
    /* font-family: "Rubik-Black"; */
    font-size: 74px;
    font-weight: bold;
    text-align: center;
    color: rgb(205, 226, 223);
    text-shadow: 2px 3px 5px rgb(77, 132, 199);
    letter-spacing: -.06em;
    /* color: #0b0c27; */}

.headerClass { /* Class to format headings with h2*/
    text-transform: uppercase;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    font-variant: small-caps; /* small caps effect for headings */
    color: rgb(205, 226, 223);
    text-shadow: 2px 3px 5px rgb(77, 132, 199);
    letter-spacing: .1px;
    /*color: #0b0c27; */}
    
h2 + p:first-letter {
    letter-spacing: -.05em; }
body {  /* sets font size, type, and background color */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1.2;
    color:rgb(0, 0, 0);
    background: #000000 url(images/2560x1440space.jpg) no-repeat fixed center 9.5em ;}

p {  /* Styles all paragraphs */ 
    word-spacing: .1em;
    text-align: justify;
    text-indent: 3em;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background: rgb(141, 233, 221);
    opacity: .5;}

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

.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;}

/* 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 */
    border-color: rgb(26, 53, 87);}

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

a:link { /* Default HyperLink */
    color: rgb(146, 93, 196);
    border-bottom: 1px solid rgb(20, 13, 13);}

a:visited{ /* HyperLink once visited */
    color: rgb(146, 93, 196);
    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);}

footer {
    text-align: center;}