@charset "utf-8";

p{
    color: #999;
}

p.blue{
    color: #0bd;
}

#orange{
    color: #fa2;
}

p .blue{
    color: #0bd;
}

#blue{
    color: #0bd;
}
.orange{
    color: #fa2;
}

.itme {
    background: #0bd;
    color: #fff;
    margin: 10px;
    padding: 10px;
}
.container{
    display: flex;
    width: 400px;
    border: 1px solid #000;
    height: 300px;
}
.fld-rr{
    flex-direction: row-reverse;
}
.fld-c{
    flex-direction: column;
}
.flw-w{
    flex-wrap: wrap;
}
.flw-wr{
    flex-wrap: wrap-reverse;
}
.flj-fs{
    justify-content: flex-start;
}
.flj-fe{
    justify-content: flex-end;
}
.flj-c{
    justify-content: center;
}
.flj-sb{
    justify-content: space-between;
}
.flj-sa{
    justify-content: space-around;
}

.flai-s{
    align-items: stretch;
}
.flai-fs{
    align-items: flex-start;
}
.flai-fe{
    align-items: flex-end;
}
.flai-c{
    align-items: center;
}
.flai-b{
    align-items: baseline;
}

.item1{
    font-size: 30px;
    height: 30px;
}
.item2{
    font-size: 10px;
    height: 50px;
}
.item3{
    font-size: 40px;
    height: 40px;
}
.item4{
    font-size: 20px;
    height: 30px;
}
.item5{
    font-size: 10px;
    height: 30px;
}
.item6{
    font-size: 20px;
    height: 40px;
}

.flac-s{
    flex-wrap: wrap;
    align-content: stretch;
}
.flac-fs{
    flex-wrap: wrap;
    align-content: flex-start;
}
.flac-fe{
    flex-wrap: wrap;
    align-content: flex-end;
}
.flac-c{
    flex-wrap: wrap;
    align-content: center;
}
.flac-sb{
    flex-wrap: wrap;
    align-content: space-between;
}
.flac-sa{
    flex-wrap: wrap;
    align-content: space-around;
}

.grd-container{
    display: grid;
    /* grid-template-columns: 200px 200px 200px ; */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    grid-template-rows: 200px 200px;
}

.float-container::after{
    content: '';
    display: block;
    clear: both;
}

.float-item{
    background: #0bd;
    color: #fff;
    padding: 10px;
    width: 200px;
    margin: 10px;
    float: left;
}