course-card {
    display: block;
}

.course-card {
    margin-bottom: 40px;
    text-align: center;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .2), 0 2px 8px 0 rgba(0, 0, 0, .14), 0 4px 8px -1px rgba(0, 0, 0, .12);
}

.course-card .course-title {
    font-size: 27px;
    font-weight: bold;
}

.course-card .course-description {
    max-width: 360px;
    margin: 0 auto;
    margin-top: 15px;
  user-select: none;
}

.course-card img {
    border-radius: 4px;
    margin-top: 10px;
}

button {
    margin-top: 20px;
    height: 40px;
    font-size: 20px;
    background: #1a7ce7;
    color: white;
    border-radius: 4px;
}

course-card.is-first {
    border-top: 2px solid grey;
    padding-top: 20px;
}

course-card.is-last {
    border-bottom: 2px solid grey;
    padding-top: 20px;
}

course-card.is-even {
    background: lightgray;
}


course-card.is-odd {
    background: lightcyan;
}



.course-category {
    margin-top: 15px;
}

.category {
    margin-top: 15px;
    background: lightcyan;
    font-size: 14px;
    color: grey;
    border: 1px solid grey;
    border-radius: 4px;
    padding: 2px 3px;
    display: inline;
}

.demo {
    max-width: 300px;
    margin: 20px auto;
    font-size: 25px;
}

.warn {
  color:red;
}

.highlighted {
  box-shadow: 0 2px 16px 0 #de1e19, 0 3px 8px 0 rgba(226, 21, 19, 0.47), 0 6px 8px -1px #b41c18;
}

.wrapper {
  max-width: 400px;
  margin: 50px auto;
}

.mb-20 {
  margin-bottom: 20px;
}