@charset "UTF-8";
/* CSS Document for homework6
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(292, 34%, 54%)
}

p { /* Styles all paragraphs to be bold font */
    font-weight: bold;
    margin-left: -80%;
    margin-right: -80%;

}

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

.paragraph {
    width: 300px;
    height: 300px;
    border: 2px solid #000000;
    border-radius: 15px;
    float:none;  /* adding another float didn't really make sense */
    opacity: .7;
    box-shadow: 5px 2px 10px #000000;
    
}

#p1 {
background-color: #9961e4;
padding-top: 2%; /* Custom padding was used for each box depending on amount of text */
padding-bottom: 5%;
padding-right: 30%;
padding-left: 30%;
max-width: fit-content;
max-height: fit-content;
margin:auto;
text-align: center;
overflow: visible; 
position: relative;
top: -10px;
left: 10px;
transform: rotate3d(2,-3,-3,.98turn); /*3d transformation*/
}

#p1:hover { /*color transition*/
    background-color: #2732ca;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
#p2 {
background-color: #ac39cf; 
padding-top: 2%; /* Custom padding was used for each box depending on amount of text */
padding-bottom: 25%;
padding-right: 30%;
padding-left: 30%;
max-width: fit-content;
max-height: fit-content;
margin:auto;   
text-align: center;
overflow: visible; 
position: relative;
top: -20px;
bottom:40px;
transform: scale(.95) rotate(-1deg); /*2d tranformation*/
}


#p2:hover { /*color transition*/
    background-color: #2732ca;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}


#p3 {
background-color: #6b32a0;    
padding-top: 2%; /* Custom padding was used for each box depending on amount of text */
padding-bottom: 20%;
padding-right: 30%;
padding-left: 30%;
max-width: fit-content;
max-height: fit-content;
margin:auto;
text-align: center;
overflow:visible; 
position: relative;
top: 15px;
bottom:1000px;
transform: scale(.95) rotate(1deg); /*2d tranformation*/
}


#p3:hover { /*color transition*/
    background-color: #2732ca;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

#p4 {
background-color: #9961e4;  
padding-top: 2%; /* Custom padding was used for each box depending on amount of text */
padding-bottom: 20%;
padding-right: 30%;
padding-left: 30%;
max-width: fit-content;
max-height: fit-content;
margin:auto; 
text-align: center;
overflow:visible; /*this overflow causes the text to spill out past the box */
position: relative;
bottom:10px;
transform: scale(.95) rotate(-1deg); /*2d tranformation*/
}
#p4:hover { /*color transition*/
    background-color: #2732ca;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}