/* CSS Styles */
*{
        font-family: "Didact Gothic", sans-serif;
        font-weight: 400;
        font-style: normal;
        box-sizing: border-box;
      }
body{
    background-color: rgb(223, 251, 230); 
    background-image: url(images/y-so-serious-white.png);
margin: 0;
}
h1{
    font-size: 2.5rem;
    color: dimgray;
}
h2{
    font-size: 2rem;
    color: dimgray;
}
p, ul, ol{
    font-size: 1rem;
    color: rgb(49, 49, 49);
}
a:link{
    color: darkorange;
    text-decoration: none;
}
a:hover, a:visited{
color: darkorange;
text-decoration: none;
}
img{
    max-width: 100%;
}
/* Button Style */

.button a:link,
.button a:visited {
    color: rgb(0, 0, 0);
    border: rgb(105, 105, 105) thin solid;
    padding: 10px 0;
    display: block;
    text-align: center;
    text-decoration: none;
}

.button a:hover{
    color: white;
    border: rgb(0, 0, 0) thin solid; 
    background-color: rgb(0, 0, 0);
}

/* Header Style */
header {background-color: rgb(105, 105, 105);
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 10px;
padding: 0 5%;
text-transform: uppercase;
}
header h1{
    grid-column: 1 / span 6;
    margin-top: 15px;
}
header h1 a:link,
header h1 a:visited,
header h1 a:hover {
color: darkorange; 
text-decoration: none;
}
header nav{
    grid-column: 7 / span 6;
}
header nav ul{
    display: flex;
    justify-content: flex-end;
list-style-type: none;
padding: 0;
 margin: 30px;
}
header nav li a:link,
header li a:visited,
header li a:hover{
    color: darkorange; 
    text-decoration: none; 
    font-size: 1.5rem;
    padding: 0 2rem;
}

li{
    font-size: 1rem;
    color: rgb(151, 90, 0);
}
h3{
    font-size: 1.5rem;
    color: rgb(118, 0, 65);
}
.pic{
    width: 300px;
    height: 300px;
}
.container{ 
background-color: rgb(238, 238, 238);
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 35px 5% 0 5%;
}

/* Homepage Content Style */

.home{
    display: grid;
    grid-template-columns: repeat 12, 1fr;
    gap: 10px;
}
.about{
grid-column: 1 / span 8;
padding: 0 5% 2rem 0;
}
.photo{
    grid-column: 9 / span 4;
}

/* Footer Styles */

footer {
    text-align: center;
    padding: 1.5rem;
    margin: .5rem 3.5rem;
    border-top: solid thin; 
}
footer ul{

    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
footer ul a:link {
    display: block;
    padding: 0 .5rem;
}


/* Work Page Content Styles */

.work{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.work div{
    text-align: center;
    padding: 0 5% 5% 5%;
}