Brazil Flag Tutorial

This is what goes on HTML:

  <div class="green">
        <div class="yellow-top"></div>
        <div class="yellow-bottom"></div>
        <div class="azul-bg">
            <div class="white"></div>
            <div class="azul-bottom"></div>
            <ul class="stars">
                <li id="procion" class="star-1"></li>
                <li id="alphard" class="star-2"></li>
                <li id="muliphen" class="star-4"></li>
                <li id="sirio" class="star-1"></li>
                <li id="mirzam" class="star-2"></li>
                <li id="wezen" class="star-2"></li>
                <li id="adhara" class="star-3"></li>
                <li id="canopus" class="star-1"></li>
                <li id="gracus" class="star-2"></li>
                <li id="palida" class="star-3"></li>
                <li id="intrometida" class="star-4"></li>
                <li id="mimosa" class="star-2"></li>
                <li id="acrux" class="star-1"></li>
                <li id="polaris-australis" class="star-5"></li>
                <li id="tra-1" class="star-3"></li>
                <li id="atria" class="star-2"></li>
                <li id="tra-2" class="star-3"></li>
                <li id="apollyon" class="star-3"></li>
                <li id="sargas" class="star-2"></li>
                <li id="denebakrab" class="star-3"></li>
                <li id="girtab" class="star-3"></li>
                <li id="shaula" class="star-2"></li>
                <li id="wei" class="star-2"></li>
                <li id="antares" class="star-1"></li>
                <li id="graffias" class="star-3"></li>
                <li id="dhanab-al-shuja" class="star-3"></li>
                <li id="spica" class="star-1"></li>
            </ul>
        </div>
    </div>
    

This is what goes on CSS:

   .green {
        width: 300px;
        height: 210px;
        background: #009c3b;
        top: 0;
        left: 0;
        font-size: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .yellow-top {
        width: 1px;
        height: 1px;
        border: solid 130px transparent;
        border-bottom: solid 80px #ffdf00;
        border-top-width: 0;
    }

    .yellow-bottom {
        width: 1px;
        height: 1px;
        border: solid 130px transparent;
        border-top: solid 80px #ffdf00;
        border-bottom-width: 0;
    }

    .azul-bg {
        width: 105px;
        height: 105px;
        background: #002277;
        border-radius: 50%;
        position: absolute;
        overflow: hidden;
    }

    .white {
        width: 272px;
        height: 272px;
        background: #FFF;
        border-radius: 50%;
        position: absolute;
        top: 32px;
        left: -112px;
    }

    .azul-bottom {
        width: 217px;
        height: 162px;
        background: #002277;
        border-radius: 50%;
        position: absolute;
        top: 38px;
        left: -87px;
    }

    .stars li {
        margin: 0;
        padding: 0;
        list-style: none;
        color: #FFF;
        position: absolute;
    }

    .stars li:before {
        content: "★";
    }

    .star-1:before {
        font-size: 5px;
    }

    .star-2:before {
        font-size: 4px;
    }

    .star-3:before {
        font-size: 3px;
    }

    .star-4:before {
        font-size: 2px;
    }

    .star-5:before {
        font-size: 1.5px;
    }

    #procion {
        top: 19px;
        left: 8px;
    }

    #alphard {
        top: 32px;
        left: 36px;
    }

    #muliphen {
        top: 40px;
        left: 21px;
    }

    #sirio {
        top: 45px;
        left: 14px;
    }

    #mirzam {
        top: 49px;
        left: 9px;
    }

    #wezen {
        top: 49px;
        left: 25px;
    }

    #adhara {
        top: 54px;
        left: 22px;
    }

    #canopus {
        top: 60px;
        left: 29px;
    }

    #gracus {
        top: 39px;
        left: 53px;
    }

    #palida {
        top: 45px;
        left: 46px;
    }

    #intrometida {
        top: 47px;
        left: 51px;
    }

    #mimosa {
        top: 44px;
        left: 59px;
    }

    #acrux {
        top: 55px;
        left: 52px;
    }

    #polaris-australis {
        top: 68px;
        left: 53px;
    }

    #tra-1 {
        top: 56px;
        left: 65px;
    }

    #atria {
        top: 62px;
        left: 68px;
    }

    #tra-2 {
        top: 57px;
        left: 72px;
    }

    #apollyon {
        top: 67px;
        left: 76px;
    }

    #sargas {
        top: 61px;
        left: 77px;
    }

    #denebakrab {
        top: 55px;
        left: 78px;
    }

    #girtab {
        top: 55px;
        left: 83px;
    }

    #shaula {
        top: 53px;
        left: 88px;
    }

    #wei {
        top: 48px;
        left: 91px;
    }

    #antares {
        top: 43px;
        left: 88px
    }

    #graffias {
        top: 42px;
        left: 96px;
    }

    #dhanab-al-shuja {
        top: 23px;
        left: 67px;
    }

    #spica {
        top: 9px;
        left: 71px;
    }