/*@font-face { font-family: Typewriter; src: url('1942.ttf'); } */
@font-face { font-family: Pixelated; src: url('../../fonts/ms-sans-serif-1.ttf'); }
html {
  font-family: Pixelated, sans-serif;
  overflow-y: scroll;
	scrollbar-color: #111 #444;
	scrollbar-width: thin;
}

html, body{
  margin:0px;
  min-height:100%;
}

.crt-overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  max-height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px, 30px 100%;
  z-index: 100;
}

body {
            margin: 0;
            padding: 0; 
            background-image: url('../../media/backgrounds/stars.gif');
            background-attachment: fixed;
            background-position: center center;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-image: url('../../media/backgrounds/lineWobble.gif');
            border: 2px solid #555;
            box-shadow: 0px 0px 10px #000;
        }

        .header {
            background-image: url('../../media/backgrounds/metalOoze.jpg');
            text-align: center;
            border-bottom: 5px;
        }

        .footerL {
	       background-color: transparent;
	       position: fixed;
            bottom: 0;
	       left: 0;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            justify-content: left;
        }

        .footerR {
	       background-color: transparent;
	       position: fixed;
            bottom: 0;
	       right: 0;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
            justify-content: right;
        }

        table {
            width: 1200px;
            margin-top: 15px;
        }

        td {
            padding: 10px;
            vertical-align: top;
            border: 1px;
        }

        .profile-picture {
            text-align: center;
            background-image: url('../../media/backgrounds/shatter.png')
        }

        .profile-picture img {
            width: 150px;
            height: 150px;
            border-radius: 0px;
            border: 3px;
        }

        .pageTitle {
            background-image: url('../../media/backgrounds/shatter.png');
            font-size: 18px;
            padding: 5px;
            text-align: center;
            color: #fff;
            margin-bottom: 5px;
            margin-top: 5px;
        }

        .section-header {
            background-image: url('../../media/backgrounds/shatter.png');
            font-size: 18px;
            padding: 5px;
            text-align: left;
            color: #fff;
            margin-bottom: 5px;
            margin-top: 5px;
        }

        .about {
            background-image: url('../../media/backgrounds/shatter.png');
            color: #fff;
            padding: 7px;
        }

        .blinkies {
            background-image: url('../../media/backgrounds/shatter.png');
            color: #fff;
            padding: 7px;
        }

        .blinkies img {
            width: 150px;
            justify-content: center;
        }

        .navigate {
            background-image: url('../../media/backgrounds/shatter.png');
            color: #693275;
            padding: 5px;
            display: flex;
            justify-content: left;
        }

        .movie-list img {
            background-color: #333;
            width: 160px;
            height: 240px;
            margin: 5px;
            border: 2px solid #555;
        }

        a {
            color: #693275;
            text-decoration: underline;
        }
        
        a.black {
            color: #000;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        /* Buttons */
        .button {
            font: inherit;
            background-color: #fff;
            border-color: #000;
            border: 1px solid;
        }
        /* radio */

        #lastfm {
            background-image: url('../../media/backgrounds/shatter.png');
           font: inherit;
	       display: grid;
	       grid-template-columns: max-content 1fr;

	       h2 {grid-column: 1/3}
        }

        #lastfm-cover {
           font: inherit;
	       height: 40px;
           background-color: #222;
	       border-radius: 2px;
	       margin-right: 5px;
	       grid-row: span 2;

	       &[src] {width: 40px}
        }

        #lastfm-track {
	       font: inherit;
	       align-self: end;
        }

        #lastfm-track, #lastfm-artist {
           font: inherit;
	       white-space: nowrap;
	       text-overflow: ellipsis;
	       overflow: hidden;
	       contain: inline-size;
        }
        
        .output-text {
           color: #fff;
        }
        .marquee {
          background-color: #222;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 3.5%;
          color: red;
          white-space: nowrap;
          overflow: hidden;
          box-sizing: border-box;
        }
		.marquee img {
			width: 150px;
			height: 20px;
			display: inline-block;
          padding-left: 100%;
          animation: marquee 15s linear infinite;
		}
        .marquee a {
          display: inline-block;
          padding-left: 100%;
          animation: marquee 15s linear infinite;
        }
		.marquee p {
          display: inline-block;
          padding-left: 100%;
          animation: marquee 15s linear infinite;
        }
        @keyframes marquee {
          0%   { transform: translate(0, 0); }
          100% { transform: translate(-100%, 0); }
        }