html * {
    color:chocolate !important;
    font-family: Comic Sans MS;
}
body {
    background-color:beige;
}

.container-fluid {
    display:contents!important;
}

.main-body {
    margin-left:10%;
    margin-right:10%;
}

.flags {
    position: fixed;
    top: 2px;
    right: 10%;
}
.flags img{
    width:1.2em;
}
.flags img:hover{
    cursor:pointer;
}

.top-section {
    border-bottom:solid 1px lightgrey;
}
.bottom-section{
    width: 100%;
    margin: auto;
    display: flex;
    height: 80vh;
}

.left-section{

}

.left-title{
    color:chocolate;
    font-size:1.2em;
    font-family:Comic Sans MS;
    margin-left:1em;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  color: black!important;
}

input[type=submit] {
  background-color: chocolate;
  color: white ! important;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


input[type=submit]:hover {
  background-color: chocolate;
}

.form{
    display: inline-grid;
    width:100%;
}
.container-form {
  border-radius: 5px;
  background-color: moccasin;
  margin-top:1em;
  padding: 20px;
}

#under_construction{
    position: absolute;
    width: 17%;
    top: 0em;
    left: 0em;
}
#main {
}
#main-img {
    position: relative;
    width: 70%;
    left: 15%;
    top:1em;
    border-radius:50%;
}
#header {
    height:fit-content;
}
#pres_text {
    font-size:1.2em;
    font-weight:500;
    margin-top: 2em;
}
#pres_img_top {
    float:left;
    width: fit-content;
}
#pres_img_bottom {
    text-align:center;
}

#sub-title,
#title {
	margin-bottom: .5rem;
	line-height: 1.2;
	text-align: center;
}
#title {
	font-weight: 500;
    width: fit-content;
    margin: auto;	
    margin-bottom: 1vh;
}

/* Menus */

.main-menu .nav-link
 {
    border-radius:10px;
    white-space:nowrap;
}

.main-menu .nav-link.active,
.nav-link:focus,
.nav-link:hover
{
    color: white!important;
    background-color: chocolate;
 }

.navbar-collapse .navbar-nav {
    width: auto;
    margin: auto;
}

.main-menu li{
    margin-left: 0.5em;
    line-height: 0.5em;
    background-color: antiquewhite;
}

.left-menu {
    float: right;
    margin-right: 2em;
}

.left-menu .nav-link {
    border-radius:10px;
    cursor: hand;    
}

.left-menu li {
    line-height:1vh;
}

.left-menu .nav-link.active,
.left-menu .nav-link:focus,
.left-menu .nav-link:hover
{
    color: white!important;
    background-color: chocolate;
}
.left-menu .nav-link.selected
{
    color: white!important;
    background-color: chocolate;
}

.left-menu .nav-link {
    font-weight: 500;
    padding-left:5px;
} 

audio {
    width:240px;
    height:20px;
    border:1px solid chocolate;
}

figcaption {
    color: chocolate;
    font-weight: 500;
}

figure{
    margin:auto;
}
.pdfobject-container { 

}

#score_left{
    float: left;
    width: 25em;
    display: flow-root;
}

#score_right {
    width: 100%;
    float: right;
    display: flex;  
}

.score-right a[href^="/assets"] {
	text-decoration: unset;
    float: left;
    height: 20px;
    margin-left: 0.3em;
    margin-right: 0.3em;	
}

.score-right img[src^="/assets"] {
    float:left;
    position:relative;
}
.score-right .download {
    display: inline-block;
    white-space:nowrap;
    width: 100%;
    margin-bottom: 4px;
    margin-top:2em;
}

@media (max-width:768px) {
    .main-body{
        margin-left: 0%;
        margin-right: 0%;
        width:fit-content;
    }
    .bottom-section{
        width: 100%;
        margin: auto;
        display: contents;
        height: fit-content;
    }
    
    #score_left {
        width:90%;
    }
    #score_right {
        float:left;
    }
    .flags {
    position: fixed;
    top: 2px;
    right: 4%;
    }    
}

@media (min-width:300px) {
	.navbar-expand-md {
		flex-wrap: nowrap;
		justify-content: flex-start
	}
	.navbar-expand-md .navbar-nav {
		flex-direction: row
	}
	.navbar-expand-md .navbar-nav .dropdown-menu {
		position: absolute
	}
	.navbar-expand-md .navbar-nav .nav-link {
		padding-right: .5rem;
		padding-left: .5rem
	}
	.navbar-expand-md .navbar-nav-scroll {
		overflow: visible
	}
	.navbar-expand-md .navbar-collapse {
		display: flex!important;
		flex-basis: auto
	}
	.navbar-expand-md .navbar-toggler {
		display: none
	}
}