body {
    background-image: url("assets/bg2.png");
	margin: 0px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}

h1 {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 350;
	font-style: normal;
	font-size: 32px;
	color: #ffffff;
	margin: 0px;
}

h2 {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 350;
	font-style: normal;
	font-size: 28px;
	color: #ffffff;
	margin: 0px;
}

p {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 22px;
	color: #ffffff;
	margin: 0px;
}

span {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 22px;
	color: #ffffff;
	margin: 0px;
}

.bold {
	font-weight: 500;
}

.footer-text {
	font-size: 16px;
	font-weight: 400;
	color: #adadad;
}

.footer {
	height: 20px;
	
	background-color: #292929;
	position: fixed;
	width: 100%;
	bottom : 0;
	box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.3);
	
	border: 1px solid #3d3d3d;
	border-left:0px;
	border-right:0px;
	border-bottom:0px;
}

.topbar-title {
	
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 32px;
	color: #ffffff;
	margin: 0px;
	
	font-weight: 700;
	height: 100%;
	padding: 4px;
	text-shadow: 0 0 3px #ffffff;
	text-decoration: none;
	display: inline-flex;
}

.topbar-title:hover {
	text-shadow: 0 0 10px #ffffff;
}

.topbar {
	
	height: 45px;
	
	background-color: #292929;
	
	width:100%;
	
	position:fixed;
	top:0;
	
	border: 1px solid #3d3d3d;
	border-left:0px;
	border-right:0px;
	border-top:0px;
	
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.content-container {
	height: 100vh;
	background-color: #292929;
	
	width:70%;
	
	padding:10px;
	
	border: 1px solid #3d3d3d;
	border-bottom:0px;
	border-top:0px;
	
	/*box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.3);*/
}

ul {
	list-style-type: disc;
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 22px;
	color: #ffffff;
	margin: 0px;
}

a {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 22px;
	color: #ffffff;
	margin: 0px;
	text-shadow: 0 0 2px #ffffff;
	transition: text-shadow 0.25s ease;
}

a:hover {
	text-shadow: 0 0 5px #ffffff;
}

.scope-front-page {
	width: 700px;
	height: 400px;
	background-color:#292929;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
	border: 2px solid #3d3d3d;
	border-radius: 9px;
	color: #000000;
	text-align: center;
}

button {
	border: 2px solid #ffffff;
	background: none;
	border-radius: 9px;
	
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 22px;
	color: #ffffff;
	margin: 0px;
}

.dropdown {
  margin-bottom: 10px;
  width:500px;
}

.dropdown-button {
  width: 100%;
  text-align: left;
  border: none;
  
  cursor: pointer;
  outline: none;
}

.dropdown-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }

.dropdown-arrow.open {
    transform: rotate(90deg);
 }

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 10px;
}
.dropdown-content.open {
  max-height: 500px; /* large enough to show content */
}