/* 
    ===============================
    Overall Design Concept/Thoughts
    ===============================

    Name: Madison Li
    Date: July 30th, 2026

    Admittedly, given how open-ended the project is---in that CSS Zen Garden can be styled to look like anything
    you choose---I was a bit lost on where to start.

    Ultimately, I decided to theme it after something I enjoy: aquariums. I wanted to try and capture the vibe
    of looking at a enormous fish tank in a large room, which inspired the darker color scheme and light glow
    for the box-shadow effect. 

    Additionally, I wanted to explore what I had learned about CSS and experiment with background images, grids,
    flexbox, and imported fonts. Most of all, I wanted to try animation again, especially given the use of it
    in existing CSS Zen Garden themes such as "A Robot Named Jimmy". The looping animation of the swimming fish
    is probably the part I'm most proud of, since it reinforces the theme the most by having fish idly swim by as 
    the viewer looks on.
*/

/* 
    To give the page a bit more customization/personal flair, I used imported fonts from Google Fonts;
    To follow the advice given in our textbook, I chose a sans-serif font for the majority of the text on the page.
*/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Fondamento:ital@0;1&display=swap');
body {
    margin: 0px;
    padding: 0px;
    font-family: 'Bricolage Grotesque', sans-serif;
    background: url(https://codecraftworks.dev/web/yOscGi9w0wj0ba2v5NDd/assets/ocean_kevin_clyde_berbano.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-size: 3.5rem;
}

h2 {
    margin-top: 0px;
}

/* 
    The style of a container with a lightly colored background and a single "accent" border to the left is a style 
    I've grown to like a lot, so I included it; it also helps provide some visual clarity for the layout, as the 
    headers are much easier to spot even while skimming.
*/
h3 {
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-family: 'Fondamento', serif;
    font-size: 1.5rem;
    background: rgba(0, 255, 255, 0.25);
    border-left: 3px solid rgb(48, 165, 186);    
}

/* 
    In addition to demonstrating my knowledge of the transition property, I wanted interaction with the page to
    feel smooth, so I added a transition ruleset in conjunction with an increase in font-size when a user hovers
    over a link.
*/
a {
    color: rgb(218, 248, 255);
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}

a:hover {
    color: rgb(80, 211, 207);
    text-decoration: underline;
    font-size: 1.1rem;
}

abbr {
    color: rgb(157, 230, 243)
}

/* 
    After looking at the other CSS Zen Garden themes, I wanted to try incorporating a fitting animation.
    I went with fish swimming; I edited the images to be white and to have two versions: one facing right and
    one facing left.
    The fish image was taken from https://www.publicdomainpictures.net/en/view-image.php?image=270044&picture=fish-silhouette-clipart 
    It was uploaded by Karen Arnold under a public domain license
*/
.page-wrapper {
    background: url(https://codecraftworks.dev/web/yOscGi9w0wj0ba2v5NDd/assets/fish_right_karen_arnold.png), url(https://codecraftworks.dev/web/yOscGi9w0wj0ba2v5NDd/assets/fish_left_karen_arnold.png);
    background-repeat: no-repeat;
    background-size: 20%, 10%;
    background-position: 15% 95%, 65% 80%;
    background-attachment: fixed;
    animation: 10s swimming infinite linear;
}

/* Need to specifically target background properties, otherwise the entire container will be animated */
@keyframes swimming {
    from {
        background-position: -10% 90%, 110% 75%;
        background-size: 20%, 10%;
    }
    to {
        background-position: 150% 90%, -10%, 70%;
        background-size: 20%, 5%;
    }
}

.intro header {
    background-image: url(https://codecraftworks.dev/web/yOscGi9w0wj0ba2v5NDd/assets/aquarium_pengxiao_xu.jpg);
    /* Learned from https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/filter */
    filter: saturate(50%) brightness(70%) hue-rotate(330deg); /* used to tint the image to fit the ocean floor image better */
    background-size: cover; /* ensures the image always covers the entirety of the background, even at different screen sizes */
    background-position: center center; /* "centers" the image without need for manual cropping */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    padding-bottom: 1rem;
    color: white;
    text-align: center;
    border-bottom: 2px solid rgba(108, 245, 255, 0.25);
    box-shadow: 0px 10px 40px -5px rgba(108, 245, 255, 0.445);
}

/* The combination of a transparent container with a lighter border was made to resemble glass */
.summary, .preamble, .main {
    width: 80%;
    margin: 1rem auto;
    padding: 1rem;
    color: white;
    background: rgb(11, 14, 15, 0.5);
    border: 2px solid rgba(108, 245, 255, 0.25);
    box-shadow: 0px 10px 40px -5px rgba(108, 245, 255, 0.445);
}

/* To make the paragraphs less packed, and to differentiate them from the headers slightly by pushing in their margins */
.summary > p, .preamble > p, .main div > p {
    margin-left: 2rem;
    margin-right: 2rem;
    line-height: 1.5rem;
}

/* Wanted the links to contrast a bit more with the other text, especially in the summary container */
.summary a, .preamble a, .main div a {
    padding: 0.1rem 0.25rem 0.1rem 0.25rem;
    background: rgba(40, 150, 172, 0.308);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Added margin since the header is fixed */
.summary {
    margin-top: 11rem;
}

/* Wanted to highlight the paragraph that shows users where to download the source files */
.summary p:nth-child(2) {
    width: 80%;
    margin: auto;
    padding: 1rem;
    text-align: center;
    background: rgba(2, 19, 19, 0.75);
    border: 1px solid rgba(117, 217, 245, 0.25);
    border-radius: 10px;
}

/* Setting up the grid template later */
.explanation {
    grid-area: explanation;
}

.participation {
    grid-area: participation;
}

.benefits {
    grid-area: benefits;
}

.requirements {
    grid-area: requirements;
}

/* Using flex to create a responsive "menu" of buttons at the bottom of the main container */
footer {
    width: 70%;
    margin: auto;
    margin-top: 1rem;
    padding: 1rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: rgba(2, 19, 19, 0.75);
    border: 1px solid rgba(117, 217, 245, 0.25);
    border-radius: 10px;

    grid-area: footer;
}

/* Styling to make the links resemble buttons */
footer a {
    padding: 0.5rem;
    background: rgb(11, 14, 15, 0.5);
    border: 2px solid rgba(108, 245, 255, 0.25);
    border-radius: 15px;
    box-shadow: 0px 0px 10px -5px rgba(108, 245, 255, 0.15);
}

/* 
    Used a workaround found here to edit the transparency on the background image:
    https://www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity 
*/
.wrapper::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background-image: url(https://codecraftworks.dev/web/yOscGi9w0wj0ba2v5NDd/assets/jellyfish_praveen_thotagamuwa.jpg);
  filter: brightness(30%) hue-rotate(330deg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  z-index: -1;
}

.sidebar {
    position: relative;
    width: 90%;
    margin: auto;
    padding: 1rem;
  	padding-bottom: 6rem;
    color: white;
    border: 2px solid rgba(108, 245, 255, 0.25);
    box-shadow: 0px 10px 40px -5px rgba(108, 245, 255, 0.445);
}

.sidebar a {
    text-decoration: none;
    color: rgb(213, 242, 240);
}

.sidebar a:hover {
    text-decoration: underline;
    color: rgb(80, 211, 207);
}

/* Resetting the padding so that the list items line with the headers */
.sidebar ul {
    margin: 0px;
    padding: 0px;
}

.sidebar li {
    list-style-type: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px solid aqua; /* Adding a border to make a clear distinction between list items */
}

.design-name {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    font-size: 1.75rem;
    display: block; /* Setting to block so that the name takes up its own row; looks more visually appealing */
}

.design-name:hover {
    font-size: 2rem;
}

/* Defines the grid formatting for the main container and the flex formatting for the aside/sidebar only for screens larger than 900px */
/* Otherwise, on smaller screens, these layouts are just stacked on top of each other */
/* Widths are also slightly adjusted to work better for whatever the screen size of the viewer is */
@media screen and (width >= 900px) {

    .preamble, .main {
        width: 60%;
    }

    .summary {
        width: 50%;
    }

    .summary p:nth-child(2) {
        width: 50%;
    }

    .main {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 
        "explanation explanation explanation"
        "participation participation benefits"
        "requirements requirements requirements"
        "footer footer footer";
        gap: 10px;
    }

    footer {
        width: 60%;
    }

    .wrapper {
        display: flex;
        justify-content: space-around;
        width: 80%;
        margin: auto;
    }
  	
  .sidebar {
  			margin-bottom: 3rem;
  }
}