html {
    font-family: "Arial";
    word-spacing: 0.04em;
    line-height: 1.6;
}

body {
    height: 100%;
    width: 100%;
    margin: 0px;
}

h1 {
    font-size: 45px;
    text-decoration: underline;
    font-weight: bold;
}

img {
    border-style: solid;
    border-color: crimson;
    border-width: 4px;
    margin: 15px;
}

table{font-size: 21px;}
th{font-size: 21px;}
td{font-size: 21px;}


.dark table{color: white; font-size: 21px;}
.dark th{color: white; font-size: 21px;}
.dark td{color: white; font-size: 21px;}

.dark p{color: white;}
.dark h1{color: white;}
.dark h2{color: white;}
.dark a{color: grey;}

.color-gradient {
    background-image: linear-gradient(to bottom right, #78beff 20%, #f01010 80%);
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.math-background {
    background-image: url('/Mathemann/images/background.png');
    /* background-size: 87vw; */
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media screen and (max-width: 1100px) {
    .math-background {
        background-size: cover;
    }
}

.headline {
    text-align: center;
    padding: 17px;
    padding-left: 0%;
    padding-right: 0%;
    width: 100%;
    text-decoration: underline;
}

.sub-headline {
    font-size: 34px;
    text-align: center;
    padding-left: 0%;
    padding-right: 0%;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

.link {
    font-size: 23px;
    margin: 20px;
}

.text {
    font-size: 21px;
    margin: 15px;
}

.sidebar-element {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 3px;
    margin-bottom: 3px;
    width: 100%;
    font-size: 23px;
    color: rgb(238, 230, 228);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
	transition-duration: 0.2s;
}

.sidebar-element:hover {
    background-color: rgba(112, 112, 112, 0.212);
}

.selected {
    background-color: rgb(36, 137, 168);
}

.selected:hover {
    background-color: rgb(35, 119, 145);
}

.back {
    padding: 5px;
    margin: 5px;
    color: rgb(182, 11, 11);
    background-color: rgb(255, 143, 143);
    border-style: solid;
    border-color: rgb(197, 11, 11);
    border-width: 5px;
    border-radius: 20px;
	box-shadow: 0px 0px 20px rgb(73, 73, 73);
	cursor: pointer;
	transition-duration: 0.2s;
}

.back:hover {
    box-shadow: 0px 0px 10px rgb(73, 73, 73);
}

.mathemann-back {
    font-size: 20px; 
    font-weight: bolder; 
    color: black; 
    background-color: rgb(206, 44, 22); 
    position: absolute; 
    bottom:0; 
    left: 0%;
}

.mathemann-back:hover {
    background-color: rgb(165, 40, 24);
}

@media screen and (max-height: 500px) {
    .mathemann-back {
        font-size: 20px; 
        font-weight: bolder; 
        color: black; 
        background-color: rgb(206, 44, 22); 
        position: relative;
    }
}


#main {
    height: 100%;
    width: 87%;
}

#sidebar {
    text-align: center;
    height: 100%;
    width: 13%;
    position: fixed;
    right: 0px;
    top: 0px;
    background-color: rgb(17, 46, 90);
    overflow-x: hidden;
    top: 0;
}