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

.notas {
    padding: 10px;
    width: calc(100vw - 20px);
    font-size: 18px;
}

b {
    font-size: 20px;
}

.topo {
    font-size: 20px;
    background-color: #8a2be2;
    display: flex;
    justify-content: center;
    padding: 10px;
    margin: 0;
    width: calc(100vw - 20px);
}

.topo a {
    background-color: #fff;
    padding: 10px;
    border-radius: 50px;
}

.flex-div {
    padding: 5px;
    width: calc(100vw - 17px);
    display: flex;
    flex-flow: row wrap;
}

.conteudo h1 {
    margin: 10px;
}

.container {
    background-color: #7fffd4;
    margin: 10px;
    width: calc(100% / 2 - 20px);
}

.disp-flex {
    display: flex;
    flex-direction: column;
}

.div-row {
    display: flex;
}

.div-flex {
    background-color: #0000ff;
    height: 100px;
    width: 100px;
    margin: 10px;
    color: #ffffff;
}

.disp div {
    background-color: #0000ff;
    height: 100px;
    width: 100px;
    margin: 10px;
    color: #ffffff;
}

.reverse {
    flex-direction: row-reverse;
}

.wrap {
    flex-wrap: wrap;
}

.nowrap .div-flex, .div-flex-large {
    background-color: #0000ff;
    height: 100px;
    width: 300px;
    margin: 10px;
    color: #ffffff;
}

.nowrap {
    flex-wrap: nowrap;
}

.content {justify-content: flex-start;} .content-end {justify-content: flex-end;} .content-center {justify-content: center;}

.content-around {justify-content: space-around;} .content-between {justify-content: space-between;}

@media (max-width: 1346px) {
    .div-flex-large {
        background-color: #0000ff;
        width: 211px;
        height: 70px;
        margin: 10px;
        color: #ffffff;
    }
}

@media (max-width: 1080px) {
    .div-flex-large {
        background-color: #0000ff;
        width: 211px;
        height: 70px;
        margin: 10px;
        color: #ffffff;
    }
}

@media (max-width: 990px) {
    .div-flex-large {
        background-color: #0000ff;
        width: 150px;
        height: 70px;
        margin: 10px;
        color: #ffffff;
    }
}

@media (max-width: 746px) {
    .div-flex-large {
        background-color: #0000ff;
        width: 140px;
        height: 70px;
        margin: 10px;
        color: #ffffff;
    }
}

@media (max-width: 720px) {
    .flex-div {
        flex-direction: column;
    }

    .container {
        width: 100%;
    }

    .div-flex {
        width: 70px;
        height: 70px;
    }

    .div-flex-large {
        background-color: #0000ff;
        width: 220px;
        height: 70px;
        margin: 10px;
        color: #ffffff;
    }

    .disp div {
        width: 70px;
        height: 70px;
    }

    .wrap .div-flex {
        height: 70px;
        width: 110px;
    }

    .nowrap .div-flex {
        height: 70px;
        width: 110px;
    }

    .topo {
        font-size: 18px;
        background-color: #8a2be2;
        display: flex;
        justify-content: center;
        padding: 10px;
        margin: 0;
        width: 100vw;
    }
    
    .topo a {
        background-color: #fff;
        padding: 10px;
        border-radius: 50px;
    }
    .conteudo h1 {
        margin: 10px;
    }

    .notas {
        padding: 10px;
        width: calc(100vw - 20px);
        font-size: 20px;
    }
    
    b {
        font-size: 22px;
    }
}

@media (max-width: 506px) {
    .div-flex-large {
        background-color: #0000ff;
        width: 150px;
        height: 70px;
        margin: 10px;
        color: #ffffff;
    }

}

@media (max-width: 450px) {
    .div-flex-large {
        background-color: #0000ff;
        width: 130px;
        height: 70px;
        margin: 10px;
        color: #ffffff;
    }

}

@media (max-width: 326px) {
    .div-flex-large {
        background-color: #0000ff;
        width: 120px;
        height: 70px;
        margin: 10px;
        color: #ffffff;
    }

}