body { 
    margin-left:24px; 
    font-size:16pt; 
    font-family: Gulim, sans-serif;
    background-color:#EEE;
    font-weight:300;
    line-height:115%;
}
body a:link {
    text-decoration:none;
    font-weight:400;
}
body a:visited {
    text-decoration:none;
    font-weight:400;
}    
body a:hover {
  text-decoration:underline;
}
h1, h2, h3 {
    font-family: Comfortaa, sans-serif;
}

p { 
    color:#333; 
}
.prev { 
    font-size:20pt;
    font-family: Comfortaa, sans-serif;
  
}
.prev_inactive {
    font-size:20pt;  
    font-family: Comfortaa, sans-serif;
    color:#888; 
    pointer-events:none; 
}                
.header { 
    margin-left:10%; 
    font-weight:bold; 
    font-family: Comfortaa, sans-serif;
}
.next { 
    float:right; 
    font-size:20pt; 
    font-family: Comfortaa, sans-serif;
}
.next_inactive {
    float:right; 
    font-size:20pt; 
    color:#888; 
    pointer-events:none; 
    font-family: Comfortaa, sans-serif;
}
.illus { 
    border: 2px solid lightgray;
    border-radius:8px;
}
.inactive { 
    color:#888; 
    pointer-events:none; 
}
.spaced {
    line-height:175%;
}

#canvas { 
    border: 2px solid lightgray; 
    border-radius:8px;
}
#canvas1 { 
    border: 2px solid lightgray; 
    border-radius:8px;
}

#spinner { 
    width:800px; 
}
#spinner2 {
    width:800px;
}

#arrow { 
    font-size:48pt; 
    vertical-align:100%;
}


input[type='range'] {
    -webkit-appearance: none;
    height: 32px;
    padding: 3px;
    /* -webkit-border-radius: 15px; */
    border-radius: 15px;
    border: 2px solid lightgray;
 }
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 48px;
    height: 30px;
    /* -webkit-border-radius: 10px; */
    border-radius: 10px;
    background-color:#CCC;
 }