/*

So, you are here to write some styles are you? Great. Remember, you can do anything you want here. Anything at all. The only limit is yourself. But you cannot change the HTML in anyway on the index.html. Target the tags, classes, and IDs in the HTML to make a mobile-first design that you feel best suits the content of the HTML. You can change the images, content, meaning, legibility, etc. but only with the CSS. Upload this folder to your website in a subdirectory called 'zen'. Paste a link to that folder into the assignment.

CSS Tutorials: https://www.htmldog.com/guides/css/
A Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Zen Garden: https://csszengarden.com/
Coding music: https://www.youtube.com/watch?v=8V71sATDTqs

*/

body{
    margin: 0;
    font-family: sans-serif;
    background: rgb(244, 167, 44);
}

.wrapper{
    width: 100%;
}

.photo1, .photo2, .photo3, .photo4, #photo5, #photo6 {
    width: 100%;
    
}

#photo5{
    margin-top: 10px;
    border-radius: 20px;
}

h1{
    color: rgb(153, 0, 0);
    font-size: 300%;
    text-shadow: 0 0 10px rgb(255, 255, 255); 
    margin: 0;
    line-height: 50px;
    padding: 20px;

}

h2{
     color: rgb(0, 10, 153);
    font-size: 100%;
    text-shadow: 0 0 10px rgb(255, 255, 255); 
    margin: 0;
    line-height: 30px;
    padding: 20px;
    padding-top: 0;
}

.main{
    padding-left: 20px;
    padding-right: 20px;
}

.part2{
    margin-bottom: 5px;
    border-radius: 20px;
}

.part3{
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 20px;
}

.main p:nth-child(3) {
    margin: 0;
    border-radius: 20px;

}

.main p:nth-child(5) {
    margin-top: 5px;
    border-radius: 20px;

}

.photo3 {
    margin-top: 5px;
    border-radius: 20px;
    filter: blur(5px);
}

#photo6 {
    margin-top: 5px;
    border-radius: 20px;
    
}

.footer {
    padding-left: 20px;
    font-size: 70%;
    margin-bottom: 20px;
}

ul li {
    list-style-type: none;
}

ul {
    padding: 0;
    margin-top: 10px;
    margin-bottom: 40px;
}

ul li a {
    text-decoration: none;
    color: rgb(13, 210, 224);
    background-color: rgb(0, 0, 0);
    padding: 20px;
    border-radius: 10px;
}

ul {
    display: flex;
    flex-direction: column;
    justify-content: content;
    align-items: center;
    gap: 50px;

}

@media only screen and (min-width: 430px) {
    ul{
        flex-direction: row;
    }

    .wrapper{
        max-width: 800px;
        margin: auto;
    }
}