* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;		
}

html {
    scrollbar-color: #555555 #121212;
    scrollbar-width: auto;
}

body {	
	background-color:#eee;
	background-image:url(../img/backgr3_d.png);
	background-position: center top;
	background-size: cover;
	
	font-size:12px;
	font-family: helvetica, arial, sans-serif;
}

#wrapper {
	margin: auto;

	display: flex;
	justify-content: center;
}

#banner {
	position: absolute;
	width:1261px;
	height:112px;
	
	background-image:url(../img/banner5.png);
	background-position: center top;
	background-size: cover;
	float:left;
}

#nav{
	position:absolute;
    padding-top:16px;
	top: 72px;
    font-family: Arial, sans-serif;
    font-size:16px;
	transform: translate(-272px, 0px); /*300px*/
}

#navitem{
	float:left;
	padding-left:16px;
}

#navitem a{
	text-decoration: none;
	color:#fff;

}

#navitem a:hover{
	text-decoration: underline;
	color:#ffa;
}

#content {
	top: 124px;
	width:816px;
	/*height:400px;*/
	
	position: relative;
	/*background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(219, 229, 255, 1) 100%);*/
	background: #000000;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	color:#fff;
	padding-left:5px;
	border: 1px solid #000;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
	padding-bottom:15px;
}

#content p {
	padding-left:25px;
	width:500px;
	font-family: Arial, sans-serif;
}

#content ul {
	padding-left:25px;
	width:400px;
	font-family: Arial, sans-serif;
	font-weight:100;
}

#content i {
	font-family: Segoe UI, Arial, sans-serif;
}

#artlist ul {
	/*padding-left:15px;*/
}

h1 {
	padding-top:5px;
	padding-left:15px;
	font-family: helvetica, arial, sans-serif;
	font-weight:100;
}

h2 {
	font-family: helvetica, arial, sans-serif;
	font-weight:100;
}

h3 {
	font-family: helvetica, arial, sans-serif;
	font-style: italic;
	font-weight:100;
}

img {
    max-width: 100%;
    height: auto;
    
}

.box {
	padding-left:15px;
	padding-right:0px;
	padding-bottom:5px;
	padding-top:5px;
}

.infoboxes {	
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0px;
}

aside {
	top: 124px;
    background: #000000;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
	border: 1px solid #000;
	color:#fff;
	
	margin:auto;
    padding:8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    float:none;
	position:absolute;
	transform: translate(-524px, 0px);
}

#artlist {
    width:200px;
}

/* unvisited link */
a:link {
  color: #fce29a;
}

/* visited link */
a:visited {
  color: #f2a8ff;
}
ul {
  list-style-type: none;
  font-family: Arial, sans-serif;
}

#linkb {
  margin:0;
  transform: translate(0px, 24px);
}

.artitem {
    border: 1px solid #000;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(40, 40, 50, 1) 100%);
    
    width: 140px;
    height: 140px;
    max-height:none;
	
    float:left;
    margin: auto;
    padding: 3px;
	
    display:inline-block;
}

.artitem:hover {
	background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(100, 100, 120, 1) 100%);
}

.artitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art{
	width:460px;
	padding-left:25px;
	padding-right:0px;
	padding-top:5px;
	padding-bottom:5px;
    display: flex;
    justify-content: center;
    float:none;
    text-align:center;
    font-family: Courier, Arial, sans-serif;
}
.art:after {
    float:none;
    content:"\a";
    white-space: pre;
}

#synopsis {
	position:absolute;
	transform: translate(490px, -150px);
}

#synopsis p {
	width:200px;
}

.box ul {
	list-style-type: square;
}

#alex {
	position:absolute;
	transform: translate(500px, 470px);
}

.credits {
	justify-content: center;
    float:none;
    text-align:center;
	color:#aaa;
	font-family: Segoe UI, Arial, sans-serif;
}

.credits i {
	color:#4FB4F7;
}

footer {
	top: 124px;
    margin:auto;
    text-align:center;
	position: relative;
	padding-top:5px;
}