body {background-color: rgb(204, 253, 255);margin-bottom: 100px;}

h1   {font-size: 200%; line-height: 1;font-family: 'Courier New', Courier, monospace, sans-serif;font-weight: 650; color: rgb(120, 27, 178);}

h2   {font-size: 180%; line-height: 1;font-family: 'Courier New', Courier, monospace, sans-serif;font-weight: 450; color: rgb(73, 75, 192);}

h3   {font-size: 180%; line-height: 1; font-family: 'Courier New', Courier, monospace, sans-serif;font-weight: 450; color: rgb(73, 75, 192);}

h4   {font-size: 160%; line-height: 1; font-family: 'Courier New', Courier, monospace, sans-serif;font-weight: 450; color: rgb(73, 75, 192);}

p    {text-align: justify; line-height: 1.6 ; font-size: 150%; font-family: Helvetica, sans-serif; font-stretch: expanded; color: rgb(35, 35, 95);}

a    {color: rgb(120, 27, 178)}

div  {text-align: justify;}

button    {cursor: pointer; border: 3px solid; padding: 0.25em 0.5em; box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; background-color:rgb(255, 203, 242); font-size: 150%; font-family: 'Courier New', Courier, monospace, sans-serif; font-stretch: expanded; color: rgb(73, 75, 192);margin-top: 5px; margin-bottom: 5px;}

.button:active {box-shadow: 0px 0px 0px 0px;top: 5px;left: 5px;}

li    {font-size: 100%; line-height: 1.6; font-family: Helvetica, sans-serif; font-stretch: expanded; color: rgb(0, 0, 87);}

input[type=form], input[type=submit] {background-color:rgb(255, 233, 249); border: 3px solid; padding: 0.25em 0.5em; box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; cursor: pointer;  font-size: 150%; font-family: 'Courier New', Courier, monospace, sans-serif; font-stretch: expanded; color: rgb(104, 106, 211);margin-top: 5px; margin-bottom: 5px;}

.sizeable {
    margin-top: 20px; 
    margin-bottom: 20px; 
    margin-left: 8%; 
    width: 50%
}

.footer {
    position: fixed;
    background-color: rgb(204, 253, 255);
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 70px;
    color: rgb(35, 35, 95);  
}

.capsule {
    line-height: 1.6;
    text-align: justify; 
    font-size: 150%; 
    font-family: Helvetica, sans-serif; 
    font-stretch: expanded; 
    color: rgb(35, 35, 95); 
    border: 3px solid; 
    border-radius: 15px; 
    padding: 0.75em; 
    font-stretch: expanded;
    width: 100%;
    background-color: rgb(214, 254, 255);
    border-color: rgba(73, 75, 192, 0.5);
}

.teaching {
    line-height: 1.4;
    text-align: justify; 
    font-size: 150%; 
    font-family: Helvetica, sans-serif; 
    font-stretch: expanded; 
    color: rgb(35, 35, 95);
    list-style: disc;
}

.p-within-list{
    width: 100%; 
    margin-right: 5px; 
    margin-left: 5px;
    font-size: 150%; 
    font-family: Helvetica, sans-serif; 
    font-stretch: expanded;
    color: rgb(35, 35, 95);
}

.box{
    margin: auto;
    position: center;
}

.box ul{
    list-style-type: none;
    margin: 0;
    padding-left: 10px;
    position: relative;
    top:0
}

.box ul:last-of-type{top:0px}

.box ul:before{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    top:0;
    left:50px
}

.box ul li{
    margin: 20px 60px 60px;
    position: relative;
    padding: 10px 20px;
    border-radius: 10px;
    width: 100%
}


.box ul li > span{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    top:0;
    left:-20px
}

.box ul li > span:before,.box ul li > span:after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    left:-7.5px
}

.box ul li > span:before{top:-10px}
.box ul li > span:after{top:95%}

.box .time span{
    position: absolute;
    width: 40%;
    text-align: right;
    left: -45%;
    text-align: right;
    font-size: 150%; 
    font-family: Helvetica, sans-serif; 
    font-stretch: expanded;
}
.box .time span:first-child{top:-20px}
.box .time span:last-child{top:90%}




@media screen and (min-width: 1500px) {

h1    {margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; width: 50%}

h2   {margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; width: 50%}

h3   {margin-top: 30px; margin-bottom: 30px; margin-right: auto; margin-left: auto; width: 50%}

h4   {margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; width: 50%}

p    {margin-top: 20px; margin-bottom: 20px; text-indent: 30px; width: 50%; margin-right: auto; margin-left: auto}

button    {margin-right: 10px}

li    {margin-right: auto; margin-left: auto; width: 50%}

input[type=form], input[type=submit] {margin-right: 10px}

.sizeable {
    margin-top: 20px; 
    margin-bottom: 20px; 
    margin-left: 25%; 
    width: 50%
}

.footer {
    text-indent: 25%;
}

.capsule {
    margin-top: 20px; 
    margin-bottom: 20px; 
    text-indent: 30px; 
    margin-right: auto; 
    margin-left: auto; 
}

.box{
    width: 50%;
}

}

@media screen and (max-width: 1500px) and (min-width: 1250px) {

    h1    {margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; width: 70%}
    
    h2   {margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; width: 70%}
    
    h3   {margin-top: 30px; margin-bottom: 30px; margin-right: auto; margin-left: auto; width: 70%}
    
    h4   {margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; width: 70%}
    
    p    {margin-top: 20px; margin-bottom: 20px; text-indent: 30px; width: 70%; margin-right: auto; margin-left: auto}

    button    {margin-right: 10px}
    
    li    {margin-right: auto; margin-left: auto; width: 70%}
    
    input[type=form], input[type=submit] {margin-right: 10px}

    .sizeable {
        margin-top: 20px; 
        margin-bottom: 20px; 
        margin-left: 15%; 
        width: 70%
    }
    
    .footer {
        text-indent: 20%;
    }
    
    .capsule {
        margin-top: 20px; 
        margin-bottom: 20px; 
        text-indent: 30px; 
        margin-right: auto; 
        margin-left: auto; 
    }

    .box{
        width: 70%;
    }

}

@media screen and (max-width: 1250px) {

    h1    {margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; width: 84%}
    
    h2   {margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; width: 84%}
    
    h3   {margin-top: 30px; margin-bottom: 30px; margin-right: auto; margin-left: auto; width: 84%}
    
    h4   {margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; width: 84%}
    
    p    {margin-top: 20px; margin-bottom: 20px; text-indent: 30px; width: 84%; margin-right: auto; margin-left: auto}

    button    {margin-right: 10px}
    
    li    {margin-right: auto; margin-left: auto; width: 84%}
    
    input[type=form], input[type=submit] {margin-right: 10px}

    .sizeable {
        margin-top: 20px; 
        margin-bottom: 20px; 
        margin-left: 8%; 
        width: 84%
    }
    
    .footer {
        text-indent: 10%;
    }
    
    .capsule {
        margin-top: 20px; 
        margin-bottom: 20px; 
        text-indent: 30px; 
        margin-right: auto; 
        margin-left: auto; 
    }

    .box{
        width: 70%;
    }

}



.light-mode {
    body {background-color: rgb(204, 253, 255);}

    h1   {color: rgb(120, 27, 178);}

    h2   {color: rgb(73, 75, 192);}

    h3   {color: rgb(73, 75, 192);}

    h4   {color: rgb(73, 75, 192);}

    p    {color: rgb(35, 35, 95);}

    a    {color: rgb(120, 27, 178)}

    li    {color: rgb(0, 0, 87);}

    input[type=form], input[type=submit] {background-color:rgb(255, 233, 249); color: rgb(104, 106, 211);}

    .footer {
        background-color: rgb(204, 253, 255);
        color: rgb(35, 35, 95);
    }

    .capsule {
        color: rgb(35, 35, 95);
        background-color: rgb(214, 254, 255);
        border-color: rgba(73, 75, 192, 0.5);
    }

    .p-within-list{color: rgb(35, 35, 95);}


.box ul:before{
    border:3px dashed rgb(73, 75, 192);
}

.box ul li{
    background:rgba(255, 255, 255, 0.3);
    color:rgb(73, 75, 192);
}


.box ul li > span{
    border:3px solid rgb(73, 75, 192);
}

.box ul li > span:before,.box ul li > span:after{
    background:rgb(214, 254, 255);
    border:3px solid rgb(73, 75, 192);
}

.box .time span{
    color:rgb(73, 75, 192);
}

}

.dark-mode {
    background-color: rgb(33, 47, 69);

    h1   {color: rgb(174, 231, 232);}

    h2   {color: rgb(122, 203, 204);}

    h3   {color: rgb(122, 203, 204);}

    h4   {color: rgb(122, 203, 204);}

    p    {color: rgb(197, 248, 255);}

    a    {color: rgb(174, 231, 232)}

    .p-within-list{color: rgb(197, 248, 255);}

    button    {background-color:rgb(39, 38, 64); color: rgb(226, 166, 226);}

    li    {color: rgb(197, 248, 255);}

    input[type=form], input[type=submit] {background-color:rgb(31, 30, 61); color: rgb(226, 166, 226);}

    .footer {
        background-color: rgb(33, 47, 69);
        color: rgb(197, 248, 255);
    }

    .capsule {
        color: rgb(197, 248, 255); 
        background-color: rgb(23, 36, 57);
        border-color: rgba(122, 203, 204, 0.5);
    }


.box ul:before{
    border:3px dashed rgb(122, 203, 204);
}

.box ul li{
    background:rgba(0, 0, 0, 0.3);
    color:rgb(122, 203, 204);
}


.box ul li > span{
    border:3px solid rgb(122, 203, 204);
}

.box ul li > span:before,.box ul li > span:after{
    background:rgb(33, 47, 69);
    border:3px solid rgb(122, 203, 204);
}

.box .time span{
    color:rgb(122, 203, 204);
}
}

.color-blind-light-mode {
    background-color: rgb(226, 254, 255);

    h1   {color: rgb(71, 26, 98);}

    h2   {color: rgb(32, 33, 109);}

    h3   {color: rgb(32, 33, 109);}

    h4   {color: rgb(32, 33, 109);}

    p    {color: rgb(35, 35, 95);}

    a    {color: rgb(71, 26, 98)}

    .p-within-list{color: rgb(35, 35, 95);}
    
    button    {background-color:rgb(255, 215, 245); color: rgb(26, 27, 86);}

    li    {color: rgb(35, 35, 95);}

    input[type=form], input[type=submit] {background-color:rgb(255, 233, 249); color: rgb(26, 27, 86);}

    .footer {
        background-color: rgb(226, 254, 255);
        color: rgb(35, 35, 95);
    }

    .capsule {
        color: rgb(35, 35, 95); 
        background-color: rgb(235, 254, 254);
        border-color: rgba(105, 186, 187, 0.5);
    }


.box ul:before{
    border:3px dashed rgb(32, 33, 109);
}

.box ul li{
    background:rgba(255, 255, 255, 0.3);
    color:rgb(32, 33, 109);
}


.box ul li > span{
    border:3px solid rgb(32, 33, 109);
}

.box ul li > span:before,.box ul li > span:after{
    background:rgb(226, 254, 255);
    border:3px solid rgb(32, 33, 109);
}

.box .time span{
    color:rgb(32, 33, 109);
}
}

.color-blind-dark-mode {
    background-color: rgb(13, 24, 43);

    h1   {color: rgb(214, 247, 248);}

    h2   {color: rgb(174, 231, 248);}

    h3   {color: rgb(174, 231, 248);}

    h4   {color: rgb(174, 231, 248);}

    p    {color: rgb(224, 224, 224);}

    a    {color: rgb(214, 247, 248)}

    .p-within-list{color: rgb(224, 224, 224);}

    button    {background-color:rgb(39, 38, 64); color: rgb(247, 206, 247);}

    li    {color: rgb(224, 224, 224);}

    input[type=form], input[type=submit] {background-color:rgb(31, 30, 61); color: rgb(255, 192, 255);}

    .footer {
        background-color: rgb(13, 24, 43);
        color: rgb(224, 224, 224);
    }

    .capsule {
        color: rgb(224, 224, 224); 
        background-color: rgb(8, 18, 35);
        border-color: rgba(105, 186, 187, 0.5);
    }


.box ul:before{
    border:3px dashed rgb(174, 231, 248);
}

.box ul li{
    background:rgba(0, 0, 0, 0.3);
    color:rgb(174, 231, 248);
}


.box ul li > span{
    border:3px solid rgb(174, 231, 248);
}

.box ul li > span:before,.box ul li > span:after{
    background:rgb(13, 24, 43);
    border:3px solid rgb(174, 231, 248);
}

.box .time span{
    color:rgb(174, 231, 248);
}
}