@charset "UTF-8";
/* CSS Document for homework4
Author: Andrew Addens
Course: ITWP 1050
File: styles.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");
}

html {
    cursor: url(images/mouse.png), default;
}

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

table{ /* Table styling */
    table-layout: auto;
    border-spacing: 15px;
    border-collapse: separate;
}

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: 35%;
    padding:1px; /* Adds border to image */
    border:2px solid #000000; /* Adds border to image */
}

#left{ /* Id to position image left */
    float:left;
}
#right{ /* Id to position image right */
    float: right;
}

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

.list { /* List 1 style */
list-style: square;
list-style-position: outside;
text-align: center;

}

.list2{ /* List 2 style */
    font-size: larger;
    text-align: center;
    list-style-position: inside;
    list-style-image: url(images/bullet15x15.png) 
    
}

* { /* quote styling */
    quotes: '<' '>';   
}