/*
    Author: Philip Howard
    Date:   2026-04-09
    Course: ITWP 1050

    Stylesheet for Homework 3

    Note: assignment required items are marked 'assigned' at col 60
*/

/*Lobster 2 font setup*/                                   /*assigned*/
@font-face {
    font-family: 'Lobster 2';
    src: url(assets/lobster-two-normal-400.woff2) format(woff2);
    font-weight: 400;
}

/*Default font color*/
* {
    color:darkslategray;
}

/*Body style*/
body {
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    background-image: radial-gradient(circle,  white 40%, #2fa2fa 90%, darkblue 98%);
                                                           /*^assigned*/
}

/*Paragraph style*/
p{
    line-height: 150%;                                     /*assigned*/
    max-width: 70%;
    text-align: left;
    margin-left: 15%;
    text-indent: 50px;
}


/*Heading 1 style*/
h1{
    
    /*format background image*/                            /*assigned*/
    background-image: url(images/American_Falls_Niagara_Falls_USA.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /*format border*/
    border: 5px solid #000000;
    background-clip: border-box;
    /*Set size and position*/
    width: 30rem;
    height: 10rem;
    margin: auto;
    /*Set text*/
    align-content: center;
    font-family:'Lobster 2', Arial, sans-serif;            /*assigned*/
    font-size: 4em;
    text-shadow: .05em .05em 0 black;                      /*assigned*/
    letter-spacing: .15em;                                 /*assigned*/
    font-variant: small-caps;                              /*assigned*/
    white-space: nowrap;                                   /*assigned*/

}


/*Footer style*/
footer {
    margin-top: 25px;
    margin-bottom: 50px;
}
footer::before{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #000000;
    margin-bottom: 25px;

}
/*Footer paragraph style*/
footer > p {
    text-align: center;
    margin: auto;
}

/*Decorative image style*/                                 /*assigned (First Image)*/
.deco {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    border-radius: 15px;
    filter: contrast(130%);
}

/*Diagram image style */                                   /*assigned (Second Image)*/
.diag {
    border: 3px inset slateblue;
    background-color: slategray;
    opacity: 90%;
}
.diag:hover{
    box-shadow: 0px 5px 3px 3px black;
}
/*Diagram caption position*/
.container {
  position: relative;
  width: fit-content;
  margin: auto;
}

.caption {
  position: absolute;
  bottom: 4px;
  left: 12px;
  font-size: 12px;
  color: black;
}

/*Format source link*/
p.source{
    text-align: center;
    margin: auto;
    margin-top: 50px;
}
a.source::after {
    content: " (external)";
    color: red;
}

/*List style*/
ul{
    list-style-type: circle;
    list-style-position: outside;
    text-align: left;
    max-width: 20%;
    margin: auto;
    line-height: 200%;
}