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

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

        h6 {   
            color: #848386;
            font-size: 10px;
            margin-bottom: 0px;
        }

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

        .friends-list img {
            width: 50px;
            height: 50px;
            margin: 5px;
            border: 2px solid #555;
        }

.movie-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.movie-list img {
    transition: transform 0.3s ease-in-out;
    background-color: #333;
    width: 47.5%;
    margin: 5px;
    border: 2px solid #555;
    transition: transform 0.25s ease;
    cursor: pointer;
}

.movie-list img.enlarged {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80%;
    height: auto;
    max-height: 90%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    border: 3px solid white;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.8);
}


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