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


@font-face {
    font-family: "Matrix";
    src: url("/DOTMATRI.TTF") format("opentype");
}

@font-face {
    font-family: "MatrixBold";
    src: url("/DOTMBold.TTF") format("opentype");
}

.caption {
  color: #8d8d8d !important; 
}

.logo {
  width: 200px;
  height: 65px; 
}

body {
  background-color: #352c2c;
color: #d5d5d5;
  padding: 0px;
  margin: 0px;
  
  font: 13px Tahoma;
} 

.icon {
  vertical-align: middle;
  display: inline-block;
}

.header-list .icon {
   margin-right: 5px;
}

.header-list {
letter-spacing: 3px;
  font-weight: bold;
  font-family: typewriter;
}

.container {
width: 800px;
  margin: auto;
  padding: 5px;
  background-color: #4d2727;
}


.cd-component {
  display: inline-block;
  width: 100%;
  font-family: Matrix;
  position: relative;
}

.cd-component marquee
{
  position: absolute; 
}

.cd-component .icon
{
 width: 14px;
  position: relative;
  top: 2px;
  z-index: 2; 
  box-shadow: 0px 0px 5px #f98f40;
}


.header
{
   background: linear-gradient(0deg, rgba(74, 33, 33, 1) 0%, rgba(166, 31, 31, 1) 100%);
  border-left: 1px solid #4A2121;
  border-right: 1px solid #4A2121;
  margin: -5px;
  position: relative;
}

.container-actual
{
margin: -5px;
    margin-top: -5px;
  margin-top: 5px;
  border-left: 1px solid #4A2121;
  border-right: 1px solid #4A2121;
  padding: 5px;
}

.header::before {
background-image: url(https://cdn.discordapp.com/attachments/1204220334186692618/1496747767228403762/image.png?ex=69eb027b&is=69e9b0fb&hm=a93d0c8c1a62ae903dae348ae4762ce513b951ca932a6c747fd147c1e8d1a9ec&);
  position: absolute;
  top: 0px;
  left: -1px;
  content: "";
  z-index: 7;
  width: 810px;
  height: 100%;
}

.header .header-links {
vertical-align: top;
  display: inline-block;
  z-index: 67;
  position: relative;
}

.fakey {
  display: inline-block;
  padding: 1px;
  border: 1px solid black;
  width: 130px; 
}

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

.col {
  padding: 5px;
}

.col-1 {
  flex: 1;
}
.col-2 {
  flex: 2;
}
.col-3 {
  flex: 3;
}
.col-4 {
  flex: 4;
}
.col-5 {
  flex: 5;
}

.polaroid {
width: 120px;
  float: left;
  padding: 5px;
    padding-right: 5px;
  padding-right: 10px;
  display: block;
  position: relative;
  padding-bottom: 25px;
  padding-right: 18px;
margin-top: 5px;
}

.text-center {
text-align: center; 
}

.gallery-photo {
  width: 240px; 
}

td {
padding: 3px;
  text-align: left;
  font-size: 11px;
  vertical-align: top;
}

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

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

.album {
  height: 145px; 
}

.photo {
  width: 117px; 
}

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

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

.subheader {
  margin: -5px;
  padding: 5px;
  background: #805454;
  background: linear-gradient(0deg, rgb(81, 27, 27) 0%, rgb(140, 34, 34) 100%);
  border-top: 6px solid #4F1515;
  border-bottom: 1px solid #4F1515; 
}

.header-links a {
padding: 5px;
    padding-top: 5px;
  height: 40px;
  display: inline-block;
  padding-top: 24px;
  width: 67px;
  text-align: center;
  border-left: 1px solid #4F1515;
  font-weight: bold;
}

.header-links a:hover {
  font-weight: normal;
  text-decoration: underline;
}

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


@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; }