main,
header,
section,
aside,
footer {
    margin: 0;
    padding: 10px;
    border: 5px solid #ffffff;
    color: #ffffff;
}

main {
    background: #000000;
}

.header {
    background: #03a9f4;
    text-align: center;
}

.hero {
    display: flex;
    background: #d22b1f;

    /* Then we define how is distributed the remaining space */
    justify-content: space-around;

    padding: 5px;
}

.hero-item {
    background: #616161;
    padding: 5px;
    text-align: center;
    border: 2px solid black;
    border-radius: 10px;

    transform: scale();

    min-width: 100px
    
}

.hero-link{
    text-decoration: none;
    color: inherit;
}



.content {
    background: #129a22;
    flex: 1;
}

.sidebar {
    background: #673ab7;
    /* Minimum of 200px basis (width) */
    flex: 0 1 200px;
}

.footer {
    background: #616161;
}

.wrapper {
    margin: auto;
    max-width: 110rem;
}

/**************************************************/
.grow {
    transition: all .1s ease-out;
}

.grow:hover {
    transform: scale(1.1);
}




@media screen and (min-width: 640px) {
    .flex-container {
        display: flex;
    }
}