*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

nav{
    align-items: center;           
    padding: 16px 40px;
    background: linear-gradient(to right, #6a11cb, #2575fc);
}

.nav-link a{
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: large;
    margin-right: 10px;
    padding: 7px 7px 7px 7px;
}

.nav-link a:hover{
    background: #3c3939;
    padding: 7px 7px 7px 7px;
    border-radius: 10px;
}

h1{
    text-align: center;
    font-size: x-large;
    margin: 30px auto;
    width: 200px;
    color: white;
    padding: 15px 15px 15px 15px;
    border-radius: 50px;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    border: 3px solid #fff;
}

h2{
    width: 80%;
    margin: auto;
    padding-bottom: 10px;
}

/* Display */
.container-a{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
}

.container-a div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-b{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.container-b div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-c{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
}

.container-c div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-d{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    flex-direction: row; /* default */
}

.container-d div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-e{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    flex-direction: row-reverse; 
}

.container-e div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-f{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    flex-wrap: wrap; 
}

.container-f div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

/* justify */
.container-g{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    justify-content: flex-start;
}

.container-g div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-h{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    justify-content: flex-end;
}

.container-h div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-i{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    justify-content: center;
}

.container-i div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-j{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.container-j div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-k{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    justify-content: space-around;
}

.container-k div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-l{
    width: 80%;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
}

.container-l div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}


/* align */
.container-m{
    width: 80%;
    height: 300px;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    align-items: flex-start;
}

.container-m div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-n{
    width: 80%;
    height: 300px;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    align-items: flex-end;
}

.container-n div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-o{
    width: 80%;
    height: 300px;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    align-items: center;
}

.container-o div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-p{
    width: 80%;
    height: 300px;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    align-items: stretch;
}

.container-p div{
    width: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-q{
    width: 80%;
    height: 300px;
    border: 3px solid #000000;
    padding: 5px;
    margin: auto;
    display: flex;
    align-items: baseline;
}

.container-q div{
    width: 200px;
    height: 200px;
    background: rgb(19, 133, 255);
    text-align: center;
    padding-top: 90px;
    margin: 3px;
    color: #fff;
}

.container-q .flexbox3{
    font-size: 40px;
}

.container-q .flexbox4{
    font-size: 50px;
}