@import url(variables.css);

/* Large desktop */

.container {
	column-gap: 2%;
	row-gap: 10px;
    margin: 0px auto;
    padding-bottom: 20px;
    min-height: 500px;
    width: 90%;
    background-color: var(--dark-beige);
    border-radius: var(--bord-rad);
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    grid-template-areas:
    "headline headline headline"
    "sidebar content content"
    ". content content"
}

#headline {
    grid-area: headline;
    text-align: center;
    font-size: 20px;
}

aside {
    grid-area: sidebar;
}

main {
    grid-area: content;
    text-align: center;
    color: var(--dark-text);
    font-size: 20px;
    padding: 20px;
}


aside img {
    width: 400px;
    display: block;
    border-radius: 50%;
    margin-left: 50px;
    border: 4px solid var(--beige);
    outline: 7px solid var(--brown);
}

.image img{
    display: flex;
    justify-content: center;
    border-radius: var(--bord-rad);
    margin: 30px auto;
}

h3 {
    text-align: center;
    color:var(--dark-text);
}

#navbar {
    z-index: 1000; 
}

/* Small desktop */


@media (max-width:1200px) {

    #dog-icon,
    #coffee-icon {
        display: none;
    }

    #headline {
        font-size: 15px;
    }

    main {
        font-size: 15px;
    }
}

/* Tablet */

@media (max-width:960px) {

    .container {
        grid-template-columns: 1fr;

        grid-template-areas:
        "headline"
        "content"
        "sidebar"
    }

    #site-name {
        font-size: 40px;
    }

    aside img {
        width: 350px;
        object-fit: cover;
        margin: 50px auto;
    }

    .image img {
        width: 550px;
        height: 350px;
        object-fit: cover;
    }

    #footer-wrapper {
        flex-wrap: wrap;
    }

        footer > section {
            min-width: 45%;
        } 

    }

    /* Mobile */

@media (max-width:768px) {

    #site-name {
        font-size: 30px;
        letter-spacing: normal;
        text-shadow: 1px 1px 2px #000;
    }

    #navbar li {
       font-size: 9px;
    }

    #nav-list {
        padding: 10px;
    }

    aside img {
        width: 220px;
    }

    .image img {
        display: none;
    }

    #footer-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    footer > section {
        min-width: 75%;
    }
}