#unitLinks {
    
    width: 100%;
    text-align: left;
    display: inline-flex;
    overflow: auto;
   
    


}

#practicePanelWrapper {
    width: 100%;
    display: inline-block;
   
    margin: 0;
    text-align: center;
    background-color: #dddddd;
    overflow:auto ;
    
}

#noscriptWrapper {
    width: auto;
    float: right;
    text-align: center;
    
}

#noscript {
    margin: 10% 0%;
    color: red;
    font-weight: bold;
    border: 5px double red;
    padding: 1.5em;
    display: inline-block;
}

#unitLinks div {
    margin-bottom: 3px;
    display: block;
    margin: auto;
    text-align: center;
    
    
    
    

}

#subunitLinks {
    text-align: justify;
    overflow: auto;
    
    
    
}

#subunitLinks div.stretch {
    width: 100%;
    border: 0;
}

#subunitLinks div {
    display: inline-block;
    text-align: center;
    width: 100%;
    text-decoration:none;
    background-color:  hsl(195, 29%, 95%);
    border: 1px solid #070707;
    

    
    
}


#alternateUnitLinks div {
    margin-right: 1em;
    width: 20%;
    text-align: center;
    display: inline-block;
}

#unitLinks div, #alternateUnitLinks div {
    background-color: hsl(195, 29%, 95%);
    color: white;
    border: 1px solid #070707;
    border-radius: 2px;
    
    
	
}

#unitLinks div.selected,
#subunitLinks div.selected,
#alternateUnitLinks div.selected {
    background: #008000;
    border: 1px solid #dddddd;
    color: white;
}

#practicePanel {
    display: inline-block;
    margin-top: 0px;
    width: 100%;
    background-color: white;
    
}

#previousLink, #nextLink {
    width: 0.5em;
    display: none;
    vertical-align: top;
    font-family: verdana;
}

#practicePane {
    display: inline-block;
    
}

#target {
    margin-top: 0;
    font-family: monospace;
    background-color: #faf2f2;
    
    padding: 5px;
    font-size: 30px;
    line-height: 48px;
    height: 130px;
    text-align: left;
    width: 100%;
    color: #dddddd;
    overflow: hidden;
   
    
}






#target, span.targetChar {
    border: 2px solid #030303;
    border-radius: 1px;
    color: #030303 ;
  
    

    
   
    
}

#feedbackPane {
    background-color: #6495ed;
    margin:  0;
    overflow: hidden;
    color: rgb(253, 251, 249);
}

#statusPane {
    display: inline-block;
    width: 30%;
    text-align: left;
    vertical-align: top;
    color: crimson;
}

#progressPane {
    display: inline-block;
    width: 30%;
}

#resultPane {
    display: inline-block;
    width: 30%;
    text-align: right;
    vertical-align: top;
}

#status {
    color: #red;
    font-weight: bold;
}

#restartLink {
    visibility: hidden;
    color: #faf5f5;
}

#input {
    width: 100%;
    font-size: 20pt;
    margin-bottom: 0;

}

#progressBar {
    width: 100%;
}

#guidePane {
    margin-top: 3%;
    text-align: center;
}

#guide {
    margin-left: auto;
    margin-right: auto;
   
    text-align: justify;
    color: white;
}

/* State changes */
.error #target {
    background: #cc6060;
}

.completed #target, .completed #input {
    background: #dddddd;
}

.completed span.targetChar {
    border: 3px solid #dddddd;
}

.error #status {
    color: #ff0000;
    background-color: tomato;
}

#smiley {
    font-family: verdana;
}

#alternateUnitLinks {
    width: auto;
    margin-top: 1%;
    display: inline-block;
}

#update {
    
}

#update a {
    margin-right: 2em;
}
@media all (max-width: 600px) 
{
#practicePanel{
    width:100%;
    }
#unitlinks {
     width : 100%;
  }
#target {
     width : 100%;
     
  }
}