*    { box-sizing: border-box;}
    body { overflow:visible;}
    
    button { width: 100%;}

    #cont { float: left;
        width: 20%;
        padding: 5px;
        margin-left: 10px;
/*        border: 1px solid #000; */
}

    .clearfix::after {
       content: "";
       clear: both;
       display: table;
}
/*    button { background-color: red;} */
    
    .red { background-color: dodgerBlue;}

/* Hide the default radio */
input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  display: inline-block;
  width: 15%;
  height: 30px;
  border: 2px solid black;
  background-color: white;
  color: black;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  margin: 2px;
}

/* Change the background and text color when checked */
input[type="radio"]:checked + label {
  background-color: green;
  color: white;
}

@media screen and (max-width: 800px) {
		button { width:100%;
		         background-color: darkBlue;
		         color: white;
                 margin: .3%;
		         font-size: 2vw;  }  
		header { font-size: 1vw; }
		nav    { font-size: 1vw; }
		main   { font-size: 1.3vw; }
		footer { font-size: 1vw; }
		li     { font-size: 1.6vw; }
/*		div    { display: block; 
		         margin-left: 10%;
		         margin-right: 10%;
		         width: 90%;
		} */
		#red1 { float:left; width:37%;}
		#red2 { float:left; width:37%;}
		#audioPlayer { float:left; }
/*		#red button {  width: 80%; } */
		#cont { width: 100%;}
} 
@media screen and (min-width: 800px) and (max-width: 1800px) {
		button { width:50%;
		         background-color: darkBlue;
		         color: white;
                 margin: .3%;
		         font-size: 1vw;  }  
		header { font-size: 1vw; }
		nav    { font-size: 1vw; }
		main   { font-size: 1.3vw; }
		footer { font-size: 1vw; }
		li     { font-size: 1.6vw; }
/*		div    { display: block; 
		         margin-left: 10%;
		         margin-right: 10%;
		         width: 90%;
		} */
		#red1 { float:left; width:37%;}
		#red2 { float:left; width:37%;}
		#audioPlayer { float:left; }
/*		#red button {  width: 80%; } */
		#cont { width: 100%;}
} 
@media screen and (min-width: 1800px) {
		button { width:25%;
		         background-color: darkBlue;
		         color: white;
                 margin: .3%;
		         font-size: 1vw;  }  
		header { font-size: 1vw; }
		nav    { font-size: 1vw; }
		main   { font-size: 1.3vw; }
		footer { font-size: 1vw; }
		li     { font-size: 1.6vw; }
/*		div    { display: block; 
		         margin-left: 10%;
		         margin-right: 10%;
		         width: 90%;
		} */
		#red1 { float:left; width:37%;}
		#red2 { float:left; width:37%;}
		#audioPlayer { float:left; }
/*		#red button {  width: 80%; } */
		#cont { width: 100%;}
}