:root {
	--header-height: 60px;
	--content-width: 1200px;
	--content-pad:   8px;
	--bg-color:      #333347;
	--panel-color:   #1c1c29;
	--accent-color:  #d7541f;
}

html {
	background-color: var(--bg-color);
	color:            #ffffff;
	font-size:        1.0em;
	line-height:      1.5;
	font-family:      verdana;
	scroll-behavior:  smooth;
}

body {
	margin: 0;
}

header {
	position:         fixed;
	z-index:          1;
	width:            100%;
	height:           var(--header-height);
	background-color: var(--panel-color);
	box-shadow:       0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.header-pad {
	height: var(--header-height);
}

.header-content {
	height:          100%;
	max-width:       var(--content-width);
	margin-left:     auto;
	margin-right:    auto;
	padding-left:    var(--content-pad);
	padding-right:   var(--content-pad);
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.header-logo {
	height: 50%;
}

.body-content {
	max-width:    var(--content-width);
	margin-left:  auto;
	margin-right: auto;
	padding-left: var(--content-pad);
	padding-right: var(--content-pad);
}

h2 {
	margin-top: 2em;
}

a {
	color: var(--accent-color);
}

.button-link {
	cursor:           pointer;
	border:           none;
	color:            white;
	background-color: var(--accent-color);
	font-size:        1.25em;
	text-decoration:  none;
	border-radius:    8px;
	padding:          8px 15px 8px 15px;
	box-shadow:       0 4px 8px 2px rgba(0, 0, 0, 0.2);
}

.panel {
	border:           solid 1px;
	border-color:     var(--panel-color);
	background-color: var(--panel-color);
	border-radius:    20px;
	overflow:         auto;
}

.banner-container {
	position:         relative;
	height:           300px;
	width:            100%;
	background-color: black;
	overflow:         hidden;
}

.banner-image {
	position:     absolute;
	display:      block;
	min-width:    var(--content-width);
	width:        100%;
	margin-left:  auto;
	margin-right: auto;
	height:       auto;
}

.banner-logo-container {
	position:        absolute;
	display:         flex;
	justify-content: center;
	align-items:     center;
	width:           100%;
	height:          100%;
}

.banner-logo {
	width:  250px;
	height: 250px;
	box-shadow: 0 0 24px 10px rgba(0, 0, 0, 0.4);
}

.version-table {
	border-collapse: collapse;
	width: 100%;
}

.version-table th {
	text-align: left;
}

.version-table th, td {
	padding: 0.75em;
}

.version-table tr:nth-child(even) {
	background-color: var(--bg-color);
}

.supporters-container  {
    display:   flex;
    gap:       32px 32px;
    flex-wrap: wrap;
}

footer {
	background-color: var(--panel-color);
	margin-top:       100px;
	padding-top:      20px;
	padding-bottom:   100px;
}

.footer-list {
	list-style-type: none;
    padding-left:    8px;
}

.footer-content {
	max-width:    var(--content-width);
	margin-left:  auto;
	margin-right: auto;
}

.imprint-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#app-screenshot {
    max-width:  360px;
    margin:     16px;
	box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.4);
}

@media (min-width: 720px) {
    #app-screenshot {
        float:      right;
    }
}

@media (max-width: 720px) {
    #app-screenshot {
        display:   block;
        width:     calc(100% - 16px);
        margin-left: auto;
        margin-right: auto;
    }  
}