*{
    box-sizing: border-box;
}
.row{
    display: block;
    margin:auto;
    width: 85%;
    text-align:center;
    margin-bottom: 2em;
}

/*Toggle Buttons*/
.btn{display:block; margin-left: auto; margin-right:auto;}
.notation-btns{margin: 0 0 3em 0; height: auto;}
.notation-btns button{margin-bottom: 1em; width: 80%;}

video{margin: auto; display:block;}

.row::after{
    content: "";
    clear: both;
    display: block;
}
/*Mobile-First*/
[class*="col-"]{
    float:left;
    width: 100%;
}
.input-area{
    width: 300px;
    margin:auto;
    display:inline-flex;
}

/*Desktop*/
@media only screen and (min-width: 740px){
    .col-1{
        width: 50%;
    }
    .col-2{
        width: 50%;
    }
    .btn{margin-left:0; margin-right:0;}
    .notation-btns button{width: 90%;}
    .notation-btns{margin: 0 0 3em 0;}
    .tab-content .notation-btns{margin: 4em 0 3em 0;}
}