@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-Light.ttf") format("truetype");
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

html {
    background: linear-gradient(0, #A501627F 20%, #D362A47F 20%, 40%,#FFFFFF7F 40%, 60%, #FF94567F 60%, 80%, #D52D007F 80%) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body {
    margin: 32px auto;
    width: min(95%, 900px);
    color: #EEEEEE;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    font-style: normal;
    background: #353535;
    border-radius: 20px;
    box-shadow: 8px 8px 5px #00000088;
}

#content {
    display: inline-block;
    width: 100%;
    text-align: center;
}

#content > * {
    margin: 30px 30px;
    padding: 0;
}

#subcontent {
    display: inline-block;
    width: max(min(80%, 400px), calc(50% - 52px));
	margin: 3px;
	height: auto;
    text-align: center;
	border-radius: 20px;
	background-color: #282828;
	padding: 20px;
	margin-bottom: 20px;
    box-shadow: 7px 7px 5px #00000088;
}

@media (max-width: 904px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
  #subcontent {
    width: 80%;
  }
}

#subcontent-main {
	display: inline-block;
	float: left;
	width: calc(100% - 50px);
	height: auto;
}

#download-btn {
	display: inline-block;
	float: right;
	top: 0px;
}

#download-btn > a > img {
	float: right;
	width: 32px;
	height: 32px;
	margin: 4px 0px;
}

#download-btn > a {
	float: left;
}

#header {
    font-size: 2.4em;
    font-weight: bold;
	margin-top: 30px;
	margin-bottom: 5px;
	font-weight: lighter;
	text-align: center;
	letter-spacing: 20px;
	text-indent: 20px;
}

#subheader {
	margin: 0px 0px;
	text-align: center;
	letter-spacing: 10px;
	text-indent: 10px;
	font-weight: lighter;
}

#appheader {
	float: left;
	display: inline-block;
	margin: 0px;
	text-align: left;
	letter-spacing: 8px;
	width: calc(100% - 45px);
	height: 100%;
	font-weight: lighter;
}

#sociallink {
	width: 32px;
	height: 32px;
}

#appdesc {
	display: inline-block;
	float: left;
	margin-left: 10px;
	margin-top: 5px;
	width: 90%;
	text-align: center;
}

#appdetails {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: row;
	width: 100%;
}

#appver {
	display: flex;
	font-weight: lighter;
	margin: 0px 0px 0px 8px;
	letter-spacing: 4px;
	text-align: center;
	height: 28px;
	line-height: 28px;
	color: #cccccc;
}

#downloadcount {
	display: flex;
	height: 100%;
	width: auto;
	margin: 0px 0px 0px 8px;
}

#appdownload {
	display: inline-block;
	float: left;
	margin-left: 10px;
	margin-top: 5px;
	width: 70%;
	text-align: left;
}

#applogo {
	float: none;
	display: inline-block;
	height: auto;
}

#applogo > h2 {
	text-align: center;
	vertical-align: center;
	float: left;
	top: 0px;
}

#applogo > img {
	float: left;
	width: auto;
	height: 32px;
	margin: 0px 5px 0px 0px;
	top: 0px;
	text-align: center;
	vertical-align: middle;
}

#description {
	letter-spacing: 5px;
	text-indent: 5px;
}

#avatar {
    display: block;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
    width: min(80%, 256px);
	background: #282828;
    border-radius: 40%;
}

#avatar img {
	box-sizing: border-box;
	border-radius: 40%;
	width: 100%;
	height: auto;
    position: relative;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
}

#socialaccounts {
	padding-left: 0px;
    list-style: none;
	margin-top: 0px;
}

#socialaccounts li {
    margin: 5px 0px;
}

#socialaccounts img {
    position: relative;
    top: 9px;
    width: 30px;
}

#socialaccounts span {
	letter-spacing: 3px;
}

#legal {
	color: #b3f1ff;
	text-align: center;
	letter-spacing: 6px;
	text-indent: 6px;
}

a {
    color: #474747;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}