/* Colors: #00f44e, #00f48b, #00f4c8, #00cdde, #00a6f4 */
body {
    font-family:"Times New Roman", Times, serif;
    font-size:18px;
    width:800px;
    margin:0 auto;
}
h1, h2, h3, h4, h5, h6 {
    padding:0;
    margin:auto;
    font-size:1.5em;
}
p {
    margin:0;
    padding:5px;
}
a {
    color:black;
    font-size: 22px;
    text-decoration: none;
    margin:auto;
    background-color: #00cdde;
    padding:5px;
    border-radius: 10px;
}
a:hover{
    color:white;
}
#banner {
    display:flex;
    width: 800px;
    background-color: #7fd6ff;
    padding:10px 0;
    text-align:center;
    font-size:30px;
}
#visualouter{
    width:800px;
    /*height:600px;*/
    padding:0;
    /*background-color: #abf9ff;*/
    display:flex;
    background-color: white;
}
#illusioninfo {
    width:790px;
    padding:5px;
    background-color: #b4fff1;
    display:flex;
}
#footer{
    width:800px;
    padding:5px 0;
    background-color: #7fd6ff;
    text-align: center;
}
canvas {
    background-color: #c5fadd;
    /*border: 3px dashed purple;*/
    margin:0;
    padding:0;
}

/* Ebbinghaus Illusion */
#ebCanvasOuter{
    width:530px;
    height:300px;
    display:inline-block;
}
#ebInputs{
    display:inline-block;
    width:245px;
    padding:5px 10px;
    margin-left:5px;
    height:290px;
    text-align: center;
    background-color:#c5fadd;
} 
#ebInputs input[type="range"]{
    width:235px;
}
#ebInputs #opacitySlider {
    margin-top:5px;
}
#ebInputs #distanceSlider {
    margin-top:50px;
    margin-bottom:45px;
}
#ebInputs input[type="button"]{
    margin-top:5px;
    font-size:20px;
    background-color: #00f48b;
    border-radius:10px;
    height:60px;
    width:150px;
}
#ebInputs #resetText{
    display:block;
    /*background-color: white;*/
    margin-top:7px;
    height: 50px;
    font-size:30px;
    padding:5px;
    width:100%;
    align-content:center;
}
p.eb{
    width:390px;
    display:inline-block;
    margin:auto;
    vertical-align: top;
}

/* Munker-White Illusion */
#down, #up {
    writing-mode:vertical-rl;
    direction: rtl;
}
.mw #canvasOuter {
    width:290px;
}
#visualouter.mw{
    height:385px;
}
#mwInputs{
    grid-row:1/2;
    grid-column:1/2;
    width:230px;
    background-color: #c5fadd;
    height:160px;
    padding:5px;
    display:flex;
}
#down, #up {
    width:30px;
    height:150px;
}
#opacdiv {
    position:relative;
    /*background-color: orange;*/
    width:150px;
    height:150px;
    padding:5px;
    text-align: center;
}
#opaclabel{
    height:20px;
    /*background-color:green;*/
    width:140px;
}
#opac{
    width:140px;
}
#reset.mw {
    position:absolute;
    bottom:5px;
    right:10px;
    width:140px;
    height:50px;
    font-size:20px;
    background-color: rgb(114, 255, 130);
    border-radius:10px;
}
#resetText.mw{
    position:absolute;
    bottom:40px;
    right:5px;
    width:140px;
    height:60px;
    font-size:20px;
    padding:5px;
    text-align: center;
}
#rightSide{
    width:525px;
    height:385px;
    padding:0 5px;
    /*background-color: white;*/
    display:grid;
    grid-template-columns: 240px 265px;
    grid-template-rows: 170px 130px 85px;
    align-content: space-between;
}
.mw1{
    padding-top:5px;
    padding-bottom:0;
    grid-row: 2/3;
    grid-column: 1/2;
    background-color: #b4fff1;
    /*
    background-color: yellow;
    opacity:0.5;
    */
}
#mw3{
    background-color: #b4fff1;
    padding:0;
    padding-left:5px;
    margin:0;
    grid-row:3/4;
    grid-column: 1/3;
}
.mw2{
    grid-row: 1/3;
    grid-column: 2/3;
    padding-bottom:0;
    background-color: #c5fadd;
}