body {
background-color: #282828;
  font-size: 12px;
  font-family: typewriter;
}

.container {
width: 800px;
  margin: auto;

}

.top-gap {
  position: relative;
  margin-top: 80px;

}

.point::after {
content: "";
  background-image: url('/section.png');
  position: absolute;
top: -27px;
  left: -26px;
 width: 200px;
  height: 69px;
}

.header-real {
 position: absolute;
  top: -2px; 
}

.logo {
width: 162px;
}

.columns {
  display: flex; 
  position: relative;
}

.col-1 {
  flex: 1;
}
.col-2 {
  flex: 2;
}

.listen {
border-radius: 0px;
  border: 1px solid #B7523F;
  background: #F28853;
  background: linear-gradient(180deg, rgba(242, 136, 83, 1) 0%, rgba(227, 76, 48, 1) 100%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
  border-radius: 4px;
}

.icon {
  vertical-align: middle; 
}

.col {
    padding: 5px;
  background-color: white;
  margin: 10px;
  background-image: url(/paper.png);
  background-size: 300px;
  border: 1px solid #606049;
  position: relative; 
}

.point-title {
   border-bottom: 1px dotted #d3d3d3;
   float:right;
}

.footer {
 color: #959595; 
}

.polaroid {
width: 120px;
  float: left;
  padding: 5px;
    padding-right: 5px;
  padding-right: 10px;
  display: block;
  position: relative;
  padding-bottom: 25px;
  padding-right: 18px;
  transform: rotate(-6deg);
}

.polaroid.album-cover {
  width: 90px; 
}

.album {
  height: 145px; 
}

.release-date {
float: right;
  font-size: 11px;
  color: #595959;
}

.caption {
    font-size: 11px;
  color: #595959;
}

.blog {
  border: 1px solid #d3d3d3;
  padding: 5px;
  background-color: white;
  
  margin-bottom: 5px;
}

.video-frame {
  background-image: none;
  border: 1px solid #d3d3d3;
}

.polaroid.album-cover .photo {
  width: 99px; 
}

.polaroid.album-cover::before {
  width: 124px;
  height: 146px; 
}

.album-info {
  padding: 5px;
  border: 1px dashed #d3d3d3;
  background-color: white;
  display: block;
  overflow: auto;
  float: left;
  margin-left: 10px;
  width: 355px;
}

.tag {
  display: inline-block;
  padding: 3px;
  border: 1px solid #d3d3d3;
}

.contact-links {
  display: inline-block;
  vertical-align: top;
}

.utue-player {
 width: 100%;
  height: 305px; 
}

.photo {
width: 117px;
}

.polaroid::before {
content: "";
  background-image: url(/polaroid.png);
  position: absolute;
left: -6px;
  top: -7px;
  width: 141px;
  height: 153px;
  background-size: cover;
}

.designed-by {
  float: right;
  text-align: right;
}

.header {
background-image: url(/aizeksheader.png);
  height: 79px;
  background-size: cover;
}

.grunge {
  width: 940px;
  margin: auto;
  display: block;
  opacity: 0.2;
  position: absolute;
  top: 0px;
  z-index: -1; 
}

.grunge-container {
 position: relative;
  margin: auto;
  width: 950px;
  top: -8px; 
}

.top-link {
padding: 10px;

  width: 50px;
  display: inline-block;
  text-align: center;
}

.top-links {
vertical-align: top;
  display: inline-block;
margin-top: 25px;
  margin-left: 256px;
  font-weight: bold;
  z-index: 1;
  position: relative;
}

a {
  color: black;
  text-decoration: none;
}

.top-link:hover {
  background-color: whitesmoke;
  border: 1px dotted #d3d3d3; 
}

@font-face {
  font-family: typewriter;
  src: url("/JMH Typewriter.ttf");
}

/* margin sides 10 */
.inline-block { display: inline-block; }
.mt-10 { margin-top: 10px; }
.ml-10 { margin-left: 10px; }
.mr-10 { margin-right: 10px; }
.mb-10 { margin-bottom: 10px; }
.m-10 { margin: 10px; }

/* margin sides 5 */
.mt-1 { margin-top: 1px; }
.mt-2 { margin-top: 2px; }
.mt-3 { margin-top: 3px; }
.mt-4 { margin-top: 4px; }
.mt-5 { margin-top: 5px; }
.ml-5 { margin-left: 5px; }
.mr-5 { margin-right: 5px; }
.mb-5 { margin-bottom: 5px; }
.m-5 { margin: 5px; }

/* margin sides 5 */
.mt-0 { margin-top: 0px; }
.ml-0 { margin-left: 0px; }
.mr-0 { margin-right: 0px; }
.mb-0 { margin-bottom: 0px; }
.m-0 { margin: 0px; }

/* width increments of 16 */
.w-8   { width: 8px }
.w-16   { width: 16px }
.w-32   { width: 32px }
.w-50   { width: 50px }
.w-64   { width: 64px }
.w-128  { width: 128px }
.w-256  { width: 256px }
.w-512  { width: 512px }
.w-1024 { width: 1024px }

/* height increments of 16 */
.h-8   { height: 8px }
.h-16   { height: 16px }
.h-32   { height: 32px }
.h-50   { height: 50px }
.h-64   { height: 64px }
.h-128  { height: 128px }
.h-256  { height: 256px }
.h-512  { height: 512px }
.h-1024 { height: 1024px }

/* Margin */
.m-0 { margin: 0px; }
.m-1 { margin: 1px; }
.m-2 { margin: 2px; }
.m-3 { margin: 3px; }
.m-4 { margin: 4px; }
.m-5 { margin: 5px; }

.mt-0 { margin-top: 0px; }
.mt-1 { margin-top: 1px; }
.mt-2 { margin-top: 2px; }
.mt-3 { margin-top: 3px; }
.mt-4 { margin-top: 4px; }
.mt-5 { margin-top: 5px; }

.ml-0 { margin-left: 0px; }
.ml-1 { margin-left: 1px; }
.ml-2 { margin-left: 2px; }
.ml-3 { margin-left: 3px; }
.ml-4 { margin-left: 4px; }
.ml-5 { margin-left: 5px; }

.mr-0 { margin-right: 0px; }
.mr-1 { margin-right: 1px; }
.mr-2 { margin-right: 2px; }
.mr-3 { margin-right: 3px; }
.mr-4 { margin-right: 4px; }
.mr-5 { margin-right: 5px; }

.mb-0 { margin-bottom: 0px; }
.mb-1 { margin-bottom: 1px; }
.mb-2 { margin-bottom: 2px; }
.mb-3 { margin-bottom: 3px; }
.mb-4 { margin-bottom: 4px; }
.mb-5 { margin-bottom: 5px; }

/* Padding */
.p-0 { padding: 0px; }
.p-1 { padding: 1px; }
.p-2 { padding: 2px; }
.p-3 { padding: 3px; }
.p-4 { padding: 4px; }
.p-5 { padding: 5px; }

.pt-0 { padding-top: 0px; }
.pt-1 { padding-top: 1px; }
.pt-2 { padding-top: 2px; }
.pt-3 { padding-top: 3px; }
.pt-4 { padding-top: 4px; }
.pt-5 { padding-top: 5px; }

.pl-0 { padding-left: 0px; }
.pl-1 { padding-left: 1px; }
.pl-2 { padding-left: 2px; }
.pl-3 { padding-left: 3px; }
.pl-4 { padding-left: 4px; }
.pl-5 { padding-left: 5px; }

.pr-0 { padding-right: 0px; }
.pr-1 { padding-right: 1px; }
.pr-2 { padding-right: 2px; }
.pr-3 { padding-right: 3px; }
.pr-4 { padding-right: 4px; }
.pr-5 { padding-right: 5px; }

.pb-0 { padding-bottom: 0px; }
.pb-1 { padding-bottom: 1px; }
.pb-2 { padding-bottom: 2px; }
.pb-3 { padding-bottom: 3px; }
.pb-4 { padding-bottom: 4px; }
.pb-5 { padding-bottom: 5px; }