/* CSS by Miko Bargas */
/* 
Mobile: Color Palette
off-white:#F2F2F2
shadow-blue:#68A0A6
olive-green:#98A668
dirty-brown:#736B53
deep black:#0D0D0D 

Color Palette for Desktop:
formal-green:#A6A6A6 
matted-green:#8C8C8C
darkforest-green:#595959
shadow-gray:#262626
piano-black:#0D0D0D
*/

/* Global (base) MOBILE FIRST */
@media screen and (min-width: 601px) {
header,footer {
    grid-column: 1/3;
    background-color:#595959;
    color:#F2F2F2;
    text-align: center;
    padding: 1em;
    border: solid 2px #262626;
    border-radius: 12px;
}
nav ul {
    display: flex;
    flex-direction: row;
    gap:80px;
    list-style: none;
    padding: 1.3rem;
}
nav {
    grid-column: 1/3;
    display:flex;
    justify-content: center;
}
nav a {
    justify-content: center;
    text-decoration: none;
    background-color:#262626;
    padding: 2rem 3rem;
    color: #F2F2F2;
    font-size: 1rem;
    text-align: none;
    text-transform: uppercase;
    border-radius: 12px;
}
nav a:hover {
    background-color:#F2F2F2;
    color:#262626;
    border: solid 2px #262626;
}
body{
    background-color:#98A668;
    min-width: 1928px;
    display:grid;
    grid-template-columns: 150px 1fr;
    gap:.8rem;
}
main {
    text-align: center;
    background-color: #F2F2F2;
    color:#262626;
    margin:auto;
    padding: 1em;
    border: 2px solid #0D0D0D;
    border-radius: 12px;
}
.hobby-row {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color: #98A668;
    color:#98A668;
    flex-wrap: wrap;
    padding:.3rem;
}
.hobby-row > section {
    background-color:#262626;
    padding:.5rem;
}
aside {
    text-align: center;
    text-size-adjust: 20px;
    background-color: #F2F2F2;
    border: 3px solid #262626;
    grid-column: 1/2; ;
    grid-row:3/4;
}
aside img {
    width: 600px;      
    height: 600px;
    object-fit: cover; 
    border-radius: 50%;
    border: 3px solid #262626;
}
}
@media screen and (max-width: 600px) {

header,footer {
        background-color:#0D0D0D;
        color:#F2F2F2;
        text-align: center;
        padding: 1em;
        border: solid 2px #0D0D0D;
        border-radius: 12px;
        grid-column: 1/-1;
    }

body {
        background-color: #68A0A6;
        display: flex;
        flex-direction: column;
        gap: 1rem;

    }

nav {
        display:flex;
        justify-content: space-around;
    }

nav ul{
        text-align:center;
        list-style: none;
        padding: 0;
    }

nav a{
        display: block;
        background-color:#736B53;
        color:#F2F2F2;
        padding: 1rem;
        text-decoration: none;
        border: 2px solid #0D0D0D;
        border-radius: 12px;
    }

nav a:hover {
        background-color:#F2F2F2;
        color:#262626;
        border: 2px solid #0D0D0D;
    }
main{
        text-align: center;
        background-color:#0D0D0D;
        color:#68A0A6;
        margin:auto;
        padding: 1em;
        border: 2px solid #0D0D0D;
        border-radius: 12px;
}
.hobby-row {
    flex-direction: row;
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color:#0D0D0D;
    color:#98A668;
    flex-wrap: wrap;
    padding:.3rem;
    }

.hobby-row > section {
    background-color:#262626;
    padding:.5rem;
}
aside{
    text-align: center;
    background-color:#0D0D0D;
    Color:#68A0A6;
    border: 3px solid none;
    margin:auto;
    padding:1em;
    border-radius: 12px;
}
image{
    width: 100%;
    height: auto;
    border-radius: 12px;
}
}