@charset "utf-8";

.c-1,
.c-2 {
    flex-wrap: nowrap;
}

.i-2 {
    flex: auto;
}

.c-3,
.c-4 {
    flex-wrap: wrap;
}

.i-4 {
    flex: auto;
}

.c-5,
.c-6,
.c-7,
.c-8,
.c-9,
.c-10,
.c-11,
.c-12,
.c-13 {
    flex-wrap: nowrap;
}

.c-5 {
    justify-content: end;
}

.c-6 {
    justify-content: center;
}

.c-7 {
    justify-content: space-between;
}

.c-8 {
    justify-content: space-evenly;
}

.c-9 {
    justify-content: space-around;
}

.i-9 {
    width: max-content;
    display: inline-block;
}

.c-9 .justify-space-around {
    background-color: rgba(255, 255, 0, 0.6);
    width: 148px;
}

.c-10,
.c-11,
.c-12,
.c-13 {
    height: 80px;
}

.c-11 {
    align-items: center;
}

.c-12 {
    align-items: start;
}

.c-13 {
    align-items: end;
}

.c-14,
.c-15,
.c-16,
.c-17,
.c-18,
.c-19,
.c-20 {
    flex-wrap: wrap;
    width: 450px;
    height: 150px;
}

.i-14,
.i-15,
.i-16,
.i-17,
.i-18,
.i-19,
.i-20 {
    width: 150px;
}

.c-14 {
    align-content: stretch;
    height: 200px;
}

.c-15 {
    align-content: start;
}

.c-16 {
    align-content: end;
}

.c-17 {
    align-content: center;
}

.c-18 {
    align-content: space-between;
}

.c-19 {
    align-content: space-evenly;
}

.c-20 .align-space-around {
    background-color: rgba(255, 255, 0, 0.6);
    height: 63px;
}

.c-20 {
    align-content: space-around;
    height: 200px;
}

.i-20 {
    translate: 0 60%;
}

.c-21,
.c-22,
.c-23,
.c-24,
.c-25,
.c-26,
.c-27,
.c-28,
.c-29,
.c-30,
.c-31,
.c-32,
.c-33,
.c-34,
.c-35,
.c-36,
.c-37,
.c-38,
.c-39,
.c-40 {
    flex-direction: column;
}

.i-21 {
    width: max-content;
}

.i-22 {
    flex: auto;
}

.i-23 {
    width: max-content;
}

.c-23,
.c-24 {
    flex-wrap: wrap;
    height: 80px;
}

.c-25,
.c-26,
.c-27,
.c-28,
.c-29,
.c-30,
.c-31,
.c-32,
.c-33 {
    flex-wrap: nowrap;
    width: 300px;
    height: 120px;
}

.c-25 {
    justify-content: end;
}

.c-26 {
    justify-content: center;
}

.c-27 {
    justify-content: space-between;
}

.c-28 {
    justify-content: space-evenly;
}

.c-28 {
    justify-content: space-evenly;
}

.c-29 .justify-space-around {
    background-color: rgba(255, 255, 0, 0.6);
    height: 57px;
}

.c-29 {
    justify-content: space-around;
}

.i-29 {
    translate: 0 70%;
}

.c-30,
.c-31,
.c-32,
.c-33 {
    height: 70px;
}

.c-30 {
    align-items: stretch;
}

.c-31 {
    align-items: center;
}

.c-32 {
    align-items: start;
}

.c-33 {
    align-items: end;
}

.c-34,
.c-35,
.c-36,
.c-37,
.c-38,
.c-39,
.c-40 {
    flex-wrap: wrap;
    height: 110px;
}

.c-34 {
    align-content: stretch;
}

.c-35 {
    align-content: start;
}

.c-36 {
    align-content: end;
}

.c-37 {
    align-content: center;
}

.c-38 {
    align-content: space-between;
}

.c-39 {
    align-content: space-evenly;
}

.c-40 {
    align-content: space-around;
}

.c-40 .align-space-around {
    background-color: rgba(255, 255, 0, 0.6);
    width: 244px;
}

.i-40 {
    width: max-content;
    translate: 43% 0;
}

.item-example {
    background-color: salmon;
    border: 1px solid rgba(255, 0, 0, 0.3);
    padding: 8px;
    margin-bottom: 10px;
    width: 600px;
    border-radius: 10px;
}

.flex-items {
    padding: 3px 8px;
    margin: 5px 3px;
    background-color: lightblue;
    border: 1px solid black;
}

.f-i-1::first-letter {
    color: red;
    font-weight: bold;
}

.c-i-1,
.c-i-2 {
    flex-flow: row wrap;
}

.c-i-2 {
    justify-content: space-evenly;
    height: 120px;
}

.i-auto,
.i-start,
.i-end,
.i-center,
.i-stretch {
    font-weight: bold;
}

.i-auto {
    align-self: auto;
    padding-top: 45px;
}

.i-start {
    align-self: flex-start;
}

.i-end {
    align-self: flex-end;
}

.i-center {
    align-self: center;
}

.i-stretch {
    align-self: stretch;
    padding-top: 45px;
}