html {
    font-family: 'Roboto', sans-serif;
}

.rolls {
    display: flex;
    flex-wrap: wrap;
}

.timing, .d100, .d20, .d10 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 20px 20px 0;
    border: 1px dotted black;
}

.oneOfThree{
    width: 30.3%;
    min-height: 105px;
}

.oneOfFour{
    width: 22%;
    min-height: 105px;

}

.lineOfRolls {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.adHocRoll {
    width: 50%;
    text-align: center;
    align-items: center;
    margin-left: 25%;
}

.number {
    width: 100%;
    text-align: center;
}

h4 {
margin-top: 0;
    width: 100%;
    text-align: center;
}

.button {
    margin-bottom: 20px;
}

.charts {
    display: flex;
    flex-wrap: wrap;
}