* {
    margin: 0; padding: 0;
}
body {
    font-family: "caveat", cursive;
    background-image: url(../pbb.png);
    background-position: center 40px;
    background-size: cover;
    padding: 15px;
    font-size: 25pt;
}
#container {
    border: 5px solid rgba(89, 232, 50, 0.959)
}
header {
    min-height: 800px;
}
h1 {
    color:rgba(131, 12, 6, 0.959);
    text-align: center;
}

h2 {
    color: blue;
}
p {
    color: yellow;
    text-align: center;
    background-color: rgb(8, 133, 175);
    opacity: 70%;
}
section.three_boxes {
    margin: 50px auto;
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
}
section.three_boxes div {
    flex: 0 0 20%;
    aspect-ratio: 1;
    border: 4px solid blue;
    border-radius: 0;
    transform: rotate(45deg);
    position: relative;
    overflow: hidden;
}
section.three_boxes div .image1 {
    background-image: url(/cis195/hobby-paddleboarding/images/pb3.jpg);
    background-size: 130%;
    width: 160%;
    height: 170%;
    aspect-ratio: 1;
    rotate: -45deg;
    position: absolute;
    top: -20%; left: -23%;
}
section.three_boxes div .image2 {
    background-image: url(/cis195/hobby-paddleboarding/images/pb4.jpg);
    background-size: 100%;
    width: 160%;
    height: 170%;
    aspect-ratio: 1;
    rotate: -45deg;
    position: absolute;
    top: -35%; left: -40%;
}
section.three_boxes div .image3 {
    background-image: url(/cis195/hobby-paddleboarding/images/pb5.jpg);
    background-size: 90%;
    width: 200%;
    height: 180%;
    aspect-ratio: 1;
    rotate: -45deg;
    position: absolute;
    top: -60%; left: -30%
}
a:hover {
    background-color: hotpink;
    transition: all 300ms linear;
}
.container {
    display: flex;
    justify-content: center;
    margin: 1em;
}
ul {
    list-style-type: disc;
    margin: -.5em;
    padding: 20px;
    display: flex;
    flex-direction: row;
}
li {
    margin-right: 2em;
}
html {
    scroll-behavior: smooth;
}