/* BASE STYLES */
:root {
    --clr-dark: #000000;
    --clr-light: #f1f5f9;
    --clr-accent: #c60b33;
}
*,
*::before,
*::after{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    line-height: 1.6;
    word-spacing: 1.4px;
    font-family: 'Roboto', sans-serif;
    color: var(--clr-dark);
    background-color: var(--clr-light);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    width: 80%;
    height: 500px;
    margin: auto;
    border: 10px solid var(--clr-dark);
    }
.item {
    width: 100px;
    min-height: 100px;
    background-color: #ff81a9;
    padding: 1em;
    font-weight: 700;
    color: var(-clr-light);
    text-align: center;
    border: 5px solid var(--clr-accent);
    border-radius: 18px;
    }
 /* END OF BASE STYLES  */

 .container {
    display: flex;
    
    flex-direction: row;
    /*flex-direction: column;*/
    
    justify-content: flex-start;
    /*justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;*/
    
    align-items: flex-start;
    /*align-items: flex-end;
    align-items: center;
    align-items: stretch;*/
    
    flex-wrap: nowrap;
    /*flex-wrap: wrap;*/
    
    align-content: flex-start;
    /*align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: space-evenly;*/
    
    /*gap: 1em;*/
 }

.item-3{
    /*flex-grow:1;
    flex-shrink:5;
    flex-basis:300px;
    
    flex: 1;
    flex: 0 0 300px;
    
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: stretch;
    
    order: -1;*/
}