/* 
Claire Muller
ITWP 1050
Homework 4
*/


/* This block styles the header */
header {
    text-align: center;
    background-image: linear-gradient(to right, transparent 20%, rgb(36, 36, 36) 50%, transparent 80%);
    color:white;
    font-family: "Tenor Sans", Arial, sans-serif;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 5px 5px 5px #000000;
    letter-spacing: 3px;
    font-variant-caps: small-caps;
    white-space: nowrap;
    transform: perspective(400px) rotateX(30deg);
}

/* This sets up the web font */
@font-face {
    font-family: "Tenor Sans";
    src: url(TenorSans.woff2);
}

/* This styles the author class */
.author {
    text-align: center;
    font-family: "Tenor Sans", Arial, sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 30px;
    text-shadow: 5px 5px 5px #000000;
    background-image: linear-gradient(to right, transparent 30%, rgb(36, 36, 36) 50%, transparent 70%);
    margin-top: 20px;
    margin-bottom: 20px;
    letter-spacing: 3px;
}

/* This is the ID selector for the first name of author */
#first {
    transform: skewX(25deg);
    padding-right: 6px;
}

/* This is the ID selector for the last name of author */
#last {
    transform: skewX(-20deg);
    padding-left: 6px;
}


/* This selector styles the body */
body {
    background: url(insects.jpg) center / 400px 400px;
    margin-left: 70px;
    margin-right: 70px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 35px;
    color: white;
}

/* This block styles the footer */
footer {
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

/* This is the flex container class for the images at the top*/
.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* This next 2 blocks control the scaling animation for the images */
.effect img{
    transition: 1s ease;
}
    
.effect img:hover{
    transform: scale(1.2);
    transition: 1s ease;
}
    
/* This is the ID selector for the beetle image */
#beetle {
    transform: scale(.7) rotate(50deg);
    float: right;
}

/* The next 2 blocks control the button animation */
.button {
    text-align: center;
    background: #00000040;
    padding-right: 8px;
    padding-left: 8px;
    margin-top: 10px;
    border-radius: 8px;
    display: inline-block;
    transition-property: background-color, transform;
    transition-duration: 500ms, 500ms;
    transition-delay: 200ms, 200ms;
}
  
.button:hover {
    background-color: #00000080;
    transform: scale(1.1);
}


/* Creating pseudoclass for a:link */
a:link {
    text-decoration: underline;
    color: #b5c2e4;
}

/* Creating pseudoclass for a:visited */
a:visited {
    text-decoration: underline;
    color: #cebcea;
}

/* Creating pseudoclass for a:hover */
a:hover {
    text-decoration: none;
    color: #92b0f6;
}