:root {
    --level-1: #1E2A4F;
    --level-2: #1E2A4F;
    --level-3: #1E2A4F;
    --black: #9C9B9B;
}

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

ol {
    list-style: none;
}


.container {
    max-width: 1000px;
    padding: 0 10px;
    margin: 0 auto;
}

.rectangle {
    position: relative;
    text-align: center;
    padding: 20px;
    border-radius: 5%;
    color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.rectanglenivel {
    position: relative;
    text-align: center;
    padding: 20px;
    border-radius: 5%;
    top: -120px;
    color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.rectanglenivelaba {
    position: relative;
    text-align: center;
    padding: 10px;
    border-radius: 5%;
    top: -150px;
    right: -40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    color: white;
}

.rectanglede {
    position: relative;
    text-align: center;
    padding: 15px;
    border-radius: 5%;
    color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    right: 20%;
    top: -100px;
}

.rectangleiz {
    position: relative;
    text-align: center;
    padding: 15px;
    color: white;
    border-radius: 5%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    left: 12%;
    top: -60px;
}

.rectangleizabajo {
    position: relative;
    text-align: center;
    padding: 15px;
    color: white;
    border-radius: 5%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    right: 15%;
    top: -150px;
}

.level-1 {
    width: 16rem;
    margin: 0 auto 40px;
    background-color: #1E2A4F;
    font-size: 0.8rem;
}

.level-0 {
    width: 20%;
    margin: 0 auto 40px;
    background-color: #6A81A9;
    font-size: 0.8rem;
}

.level-1::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 20rem;
    background: var(--black);
}

.level-2-wrapper li {
    position: relative;
}

.level-2 {
    width: 20%;
    margin: 0 auto 40px;
    align-items: left;
    background: var(--level-2);
    font-size: 0.8rem;
}

.level-2-wrapper::before {
    content: "";
    position: absolute;
    top: 20%;
    transform: translateX(-100%);
    width: 119px;
    height: 4px;
    background: var(--black);
}

.level-3-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 5fr));
    grid-column-gap: 50px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.level-3-wrapper::before {
    content: "";
    position: absolute;
    top: -160px;
    left: 70px;
    right: 70px;
    height: 4px;
    background: var(--black);
}

.level-3-wrapper>li::before {
    content: "";
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 40px;
    background: var(--black);
    
}

.level-3 {
    margin-bottom: 20px;
    width: 10rem;
    font-size: 0.8rem;
    background: var(--level-3);
}

.level-4 {
    width: 90%;
    background-color: #6A81A9;
    font-size: 0.8rem;
}