main.min.css

@import url("https://fonts.googleapis.com/css?family=Roboto");*{margin:0;padding:0;box-sizing:border-box;font-family:'Roboto', sans-serif}body{background:#E1E6ED}h1{text-align:center;color:#19969f;margin-top:40px}.btnC{display:flex;flex-wrap:nowrap}.btn{margin:0 auto;position:relative;padding:0 20px;background:#c1cbda;color:#fff;border:0;border-radius:50px;line-height:2;font-size:1.4em;margin-top:20px;display:inline-block}.btn:hover{background:#19969f}.btn:visited{background:#19969f}.btn:checked{background:#19969f}section.card{width:80%;max-width:400px;min-width:200px;margin:0 auto;margin-top:10px;border-radius:3px;box-shadow:1px 2px 5px rgba(155,155,155,0.2);padding:20px 0 20px 50px;background:#fff;color:#9B9B9B;line-height:1.5}section.card.card-main{color:#686868;box-shadow:inset 0 0 0 3px #3DD5E1,1px 2px 5px rgba(112,112,112,0.2)}section.card.card-main .from::before{background:#3DD5E1;box-shadow:none}section.card .card-content{font-size:1.2em;position:relative;padding:20px 0}section.card .card-content h2.theme{font-size:1.6em}section.card .card-content::before{content:"";position:absolute;left:-22px;top:50%;width:1px;height:100%;background:#9B9B9B;transform:translate3d(-50%, -50%, 0)}section.card .teacher{margin-left:16px;position:relative}section.card .teacher::before{content:"";position:absolute;left:-8px;height:80%;top:10%;width:1px;transform:translateX(-50%);background:rgba(155,155,155,0.5)}section.card .from,section.card .to{position:relative;font-size:1.2em}section.card .from::before,section.card .to::before{content:"";position:absolute;left:-22px;top:50%;width:10px;height:10px;transform:translate3d(-50%, -50%, 0);border-radius:50%;box-shadow:inset 0 0 0 1px #9B9B9B}.main-content{min-height:calc(100vh - 100px);margin-bottom:50px}.footer{width:100%;text-align:center;color:#fff;background:#c1cbda;line-height:50px}@media screen and (max-width: 992px){.btn{font-size:1.2em;padding:0 7px}}