header{
width:100%;
height:50px;
background:#343a40;
color:#ffff;
}

footer{
background:#6c757d;
height:100px;
width:100%;
position:relative;
float:none;
clear:both;
border:1px solid goldenrod;
padding-bottom:10px;
}

.maincontent-container-flex{
display:flex;
flex-direction:row;
justify-content:space-between;
padding:0rem 1rem;
}

.maincontent-flexlist ul{
list-style:none;
}

.img-s{
    width:200px;
    height:250px;
}

.logo{
position:relative;
display:block;
float:left;
font-family:'Magneto',sans serif;
font-size:2em;
margin-left:10px;
}

.site-desc{
position:relative;
display:block;
float:left;
font-family:'ubuntu';
font-size:1.5em;
margin-left:100px;
padding-top:10px;
}

.login-menu{
float:right;
font-family:'ubuntu';
font-size:1em;
padding-top:10px;
color:#ffff;
margin-right:10px;

}

.login-menu a{
text-decoration:none;
color:#ffff;
}

.selected{
background:lightgreen;
}
.header-menu p{
display:block;
cursor:pointer;
position:relative;
float:right;
margin:0 auto;
text-align:center;
}

#realnumbers-content{
padding:10px;
margin:10px;
width:auto;
}


nav{
background:#343a40;
width:100%;
height:50px;
border-bottom:solid 1px goldenrod;
}

nav ul li{
display:inline-block;
position:relative;
padding:0px 10px;
text-decoration:none;
}

nav ul li a{
color:pink;
font-size:1.15em;
font-weight:bold;
}

sidecontent{
width:20%;
height:1500px;
background:#801928;
border-right:1px solid goldenrod;
float:left;
top:0px;
margin: 0px auto;
font-size: 1.5em;
}

maincontent{
width:79%;
height:1500px;
float:left;
}

#frame{
float:left;
padding-bottom:50px;
}

#list li{
text-decoration:none;
list-style:none;	
}

#list li a{
display:block;
text-decoration:none;
padding:10px;
color:#ffffff;

}
#list li:hover{
cursor:pointer;
font-weight:bold;
background-color:lightgreen;
}

.chapter{
background-color:skyblue;
font-family:'Lora', sans serif;
font-size:2em;
line-height:1.5;
font-weight:700;
color:#8B008B;
padding:10px;
border: 2px solid none;
}

.topic{
font-family:'Lora', sans serif;
font-size:1.5em;
line-height:1.5;
font-weight:700;
color:#8B008B;
padding-left:10px;
}

.heading{
font-family:'Lora', sans serif;
font-size:1.25em;
line-height:1.5;
font-weight:400;
margin-left:50px;

}

.heading li a{
text-decoration:none;
}

.heading li a:hover{
font-weight:bold;
background-color:pink;
}

.underline{
text-decoration:underline;
}

.theorem{
display:block;
width:auto;
height:auto;
border:1px solid black;
background-color:lightblue;
margin:10px auto;
padding:5px;

}

.theorem-text{
font-family:'ubuntu';
font-size:1.15em;
text-align:justify;
}

.article-text{
font-family:'Lora';
font-size:1.15em;
line-height:1.5;
text-align:justify;
}	

i{
color:blue;
text-decoration:italic;
}

#polynomials-content{
padding:10px;
margin:10px;
width:auto;
}

.previous{
font-family:'Lora', sans serif;
text-align:center;
background:pink;
font-size:1.25em;
width:100px;
float:left;
display:block;
border-radius:5px;
text-decoration:none;
}

.previous a{
text-decoration:none;
color:#ffffff;

}

.previous:hover{
text-decoration:none;
cursor:pointer;
font-weight:bold;
background-color:red;
}

.next{
font-family:'Lora', sans serif;
text-align:center;
border-radius:5px;
background:pink;
font-size:1.25em;
width:100px;
float:right;
display:block;
}

.next a{
text-decoration:none;
color:#ffffff;

}

.next:hover{
text-decoration:none;
cursor:pointer;
font-weight:bold;
background-color:red;
}

#graph{
background-color:lightyellow;
display:block;
width:600px;
height:600px;
float:left;
clear:none;
}

example{
color:red;
font-weight:bold;
}

ex{
color:red;
font-weight:bold;
}

solution{
color:blue;
font-weight:bold;
}

sol{
color:blue;
font-weight:bold;
}


table, th,td{
border:2px solid olive;
text-align:center;
}

#highlight{
  background-color:yellow;
  border: 1px solid goldenrod;
}

highlight{
  background-color:yellow;
  border: 1px solid goldenrod;
}

#s{
position:relative;
float:none;
background-color:yellow;
width:20px;

}

qs{
color:#8B008B;
}

.video-mc{
    
    padding:20px;
    width:450px;
    height:320px;
}

 
.Q{
width:30px;
height:50px;
}
.R , .nr{
float:left;
margin:0px;
padding:0;
width:30px;
height:30px;
}

.D , .dr{
float:none;
position:absolute;
margin-left:-30px;
margin-top:30px;
padding:0;
width:30px;
height:30px;
}

@media only screen and (min-width:100px) and (max-width:500px){
    
#list{
    font-size:1.25em;
}


.article-text{
font-size:1.25em;

}

.header-menu{
font-size:1.2em;
}
.site-desc{
font-size:1.2em;

}

.maincontent-container-flex{
display:flex;
flex-direction:column;
justify-content:space-between;
padding:0rem 0rem;
align-items:center;
}


nav{
background:#202356;
display:flex;
flex-direction: column;
border-bottom:solid 1px goldenrod;
margin:0;
height:auto;
font-size:1.2em;
}

nav ul li{
display:block;
font-size:0.9em;
}
sidecontent{
width:100%;
display:flex;
flex-direction: column;
}

maincontent{
float:none;
width:100%;
display:flex;
flex-direction: column;
}

table{
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
margin-top:50px;
font-size:0.9em;
}
th, td {
  padding: 5px;
  max-width:100px;
}

.login-style{
font-size:0.5em;
}

.video-mc{
    
    padding:10px;
    width:320px;
    height:240px;
}


}