body {
    text-align:justify;
    padding:0;
    margin:0;
    background-color:ivory;
    font-family:Verdana, Arial, Helvetica, san-serif;
}

p::before{content:"\2003\2003"}


.question, .definition, .LC, .theorem{
  margin: 15px 35px 15px 35px;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 2px 2px 5px black;

}


.question::before{
  content: "Question.";
  font-weight: bold;
}

.definition::before{
  content: "Definition.";
  font-weight: bold;
}

.LC::before{
  content: "Lehmer's conjecture.";
  font-weight: bold;
}

.theorem::before{
  content: "Theorem.";
  font-weight: bold;
}

.menu {
    background-color: lightgrey;
    width:220px;
    height:100%;
    position: fixed;
    border-right: 2px solid grey;
    z-index:200;
}

.menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.menu li {
    text-align:left;
    padding: 0px;
    border-bottom: dotted 5px grey;
    overflow:hidden;
}

.active div {
    background-color: lightblue;
    color: black;
    padding:7px;
}



.changecolor a:hover{
    color:lightblue;
    background-color: midnightblue;
}

.menu a {
    display: block;
    text-decoration-line:none;
    padding:7px;
}

.icon {
    height:20px;
    width:20px;
    display:block;
}

.menubar{
    display:none;
}

.menubar div{
    padding:7px;
}


.content {
    margin-left:220px;
}

.content2 {
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    max-width:600px;
}


.content2 p{
    line-height:24px;
}

a {
    color:midnightblue;
}

span.math {
    white-space:nowrap;
}

span.narrow {
    display:none;
}

span.med {
    display:none;
}


@media print {
    .menu {
	display: none;
    }
    .content {
	margin-left:0px;
    }
    body {
	background-color:white;
    }
    
    a {
	color:black;
	text-decoration-line:none;
    }
}




@media screen and (min-width: 930px) {
    .content2{
	margin-left:30px;
    }
}

@media screen and (max-width: 870px) {
    .menu {
        width: 135px;
    }
    .content{
	margin-left:135px;
    }
}


@media screen and (max-width: 720px) {
    .menu {
        width: 110px;
    }
    .content{
	margin-left:110px;
    }
}

@media screen and (max-width:640px) {
    .menu {
        width: initial;
	z-index:100;
    }
/*    .menu:hover {
	width: 220px;
    }*/

    .menu li:not(.menubar) {
	display:none;
    }
    .menu li.menubar {
	z-index:200;
	display:block;
    }
    
    .menu ul:hover > li {
	display:block;
    }
    
    
    .content{
	margin-left:34px;
    }
}




@media screen and (max-width: 640px) and (orientation: portrait), screen and (max-width: 560px) {
    body {
	font-size:16px;
    }
    .content2{
	max-width:600px;
    }
    
    .content2 p {
	line-height:24px;
    }
    
    .menu {
        width:100%;
        height:initial;
        border-right:none;
        position:sticky;
        top:0;
        z-index:100;
    }
    .menu li:not(.menubar) {
	display:none;
    }
    .menu li.menubar {
	z-index:200;
	border-bottom:solid 2px grey;
	display:block;
    }
    
    .menu ul:hover > li {
	display:block;
    }
    
    
    .content{
	margin-left:0px;
    }
}


@media screen and (max-width: 550px) {
    body {
	text-align:left;
    }
}


@media screen and (max-width:475px) {
    body {
	font-size:14px;
	text-align:left;
    }
    .content2 p {
	line-height:21px;
    }
}

@media screen and (max-width:419px) {
    span.med{
	display:initial;
    }
    span.wide2{
	display:none;
    }
}

@media screen and (max-width:359px) {
    body {
	min-width:314px;
    }
    span.narrow{
	display:initial;
    }
    span.wide{
	display:none;
    }
    span.med{
	display:none;
    }
}