body,
span,
p,
a,
button,
input,
button:focus {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    text-decoration: none;
    background: inherit;
    font-family: inherit;
    color: inherit;
    border: inherit;
    margin: inherit;
    padding: inherit;
    height: inherit;
    outline: none;
}

body {
    background: var(--c1);
    color: var(--c4);
    font-family: sans-serif;
}

button:hover {
    cursor: pointer;
}

.listWr {
    width: 600px;
    max-width: calc(100vw - 80px);
    margin: 0 40px;
    margin-top: 20px;
    padding: 0 0 0 20px;
}

.listWr li {
    margin-bottom: 10px;
}

.listWr2 {
    margin-top: 20px;
    margin-bottom: 0;
}

.listWr2 li {
    margin-bottom: 10px;
}

.detailsLink,
.detailsLink:hover,
.detailsLink:active,
.detailsLink:focus {
    background: blue;
    border-radius: 50px;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    margin-top: 20px;
}

.threeColSectionWr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    margin: 0 40px;
    width: 600px;
    max-width: calc(100vw - 80px);
    margin-top: 20px;
    row-gap: 20px;
}

.threeColSection {
    margin: 0;
}

@media screen and (max-width: 625px) {
    .threeColSectionWr {
        grid-template-columns: auto;
    }
}

.msg {
    text-align: center;
    width: 100%;
    box-sizing: border-box; 
    padding: 20px 20px;
}

.classOptionWr {
    width: calc(100vw - 80px);
    max-width: 600px;
    margin-top: 20px;
    background: white;
    padding: 20px;
    border-radius: 5px;
    border: solid 1px grey;
}

.classOptionTitle {
    padding: 0;
    font-weight: bold;
    border:none;
    margin: 0;
}

.classDatesList {
    padding: 0 20px;
    margin: 0;
    margin-top: 10px;
}

.classDatesList li {
    margin-top: 10px;
    line-height: 1.5;
}

.classSchedule {
    padding:0;
    margin: 0;
    border: none;
    margin-top: 30px;
    font-weight: bold;
}

.classPrice {
    padding:0;
    margin: 0;
    margin-top: 30px;
    border:none;
}

.classPrice span {
    font-weight: bold;
}

.signUpLink {
    padding:0;
    margin: 0;
    margin-top: 30px;
    border:none;
}

.signUpButton,
.signUpButton:hover,
.signUpButton:active,
.signUpButton:focus {
    width: 100%;
    background: blue;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    border-radius: 5px;
}

.soldOutButton,
.soldOutButton:hover,
.soldOutButton:active,
.soldOutButton:focus {
    background: grey;
    margin-top: 30px;
    cursor: unset;
}

.refundEmailLink {
    text-decoration: underline;
    color: rgb(45, 136, 248);
}