@font-face {
    font-family: "Silkscreen";
    src: url(../fonts/slkscr.ttf);
}
body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
    font-family: "Silkscreen";
    font-size:2em;
    background-color:#161616;  
    background-image:url('../img/brick.png');
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.footer {
    position: fixed;
    bottom: 50px;
    justify-content: center;
    z-index:2;
}
.audio-container {
    transition: transform 1s ease-in-out;
    position: fixed;
    top: 10px;
    right: 10px;
    width:50px;
    height:100px;
    display:block;
}
.image-container {
    transition: transform 1s ease-in-out;
    position: fixed;
    bottom: -720px;
    right: -200px;
}
.mixie-container {
    transition: transform 1s ease-in-out;
    position: fixed;
    bottom: -10px;
    left: -500px;
}
.zin1 {
    z-index:1;
}
.zin2 {
    z-index:2;
}
.logo-container {
    position: fixed;
    justify-content: center;
    top: -900px;
    z-index:-2;
    transition: transform 2s ease-in-out;
}

.menu-container {
    position: fixed;
    top: 350px;
}
.colcontent {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr; 
    top: 350px;
}
.colcontent > * {
    padding:1rem;
}
.centercontent {
    min-width:700px;
}
.menu-bg {
    background-color: rgba(0, 0, 0, 0.6);
}
#mixie {
    width: 500px;
    height: auto;
    z-index:-1;
}
#drsock {
    width: 800px;
    margin-bottom:-332px;
    height: auto;
    z-index:-1;
}
#tracklist {
    margin-left:175px;
    margin-top: -50px;
    width: 220px;
    height: 150px;
    background-color:green;
    z-index:4;
    overflow:scroll;
}
#sockjaw {
    position:relative;
    left:325px;
    top: -265px;
    width: 72px;
    height: 192px;
    z-index:4;
}
@keyframes talk {
  50% {
    margin-top: 5px;
  }
}
#sockjawpix {
    width:192px;
    height:72px;
}
.socktalk {
    animation: talk 0.40s linear infinite;
}
a {
    text-decoration: none;
    color:inherit;
}
#menuBox a:hover {
    text-decoration: none;
    color:#00e531;
}
.message-box span:hover,.message-box a:hover {
    text-decoration: none;
    color:#fff;
}
.track {
    width: 180px;
    height: 30px;
    padding:0 10px;
    position:relative;
    background-color: #022000;
    font-size:0.5em;     
    background-size:200px 30px;
    background-repeat: no-repeat;
}
.track-a {
    background-image: url("../img/boot1.png");
    color:white;
}
.track-b {
    background-image: url("../img/boot2.png");
    color:yellow;
}
.track-c {
    background-image: url("../img/boot3.png");
    color:black;
}
.track-d {
    background-image: url("../img/boot4.png");
    color:yellow;
}
.track-e {
    background-image: url("../img/boot5.png");
    color: white;
}
.tracktitle {
    padding-top:11px;
    width:180px;
    display:block;
    text-align:center;
}
.cot {
    width: 1080px; 
    height: auto;
}
.message-box {
    width: 400px;
    font-size:0.5em;
    padding: 30px;
    margin-bottom:10px;
    background: black;
    display: none;
    text-align: left;
    outline: 5px dashed #2ff4cf;
    color: #2ff4cf;
    z-index:3;
}
.sock-text {
    outline: 5px dashed #2ff4cf;
    color: #2ff4cf;
}
.mixie-text {
    outline: 5px dashed #b300cf;
    color: #b300cf;
}
.green {
    fill:#00e531;
    color:#00e531;
    display:inline-block;
}
.red, .redp {
    fill:#ab0402;
    color:#ab0402;
    display:inline-block;
}
.redp {
    font-size:0.5em;
}
.red:hover {
    fill:#00e531;
    color:#00e531;
    display:inline-block;
}
.green:hover {
    fill:#fff;
    color:#fff;
    display:inline-block;
}
.main-menu {
    text-shadow: -2px 2px 0px #000, -1px -1px 0px #fdfdb9;
}
.message-box.left {
    text-align:left;
    width:400px;
}
.menu-container a {
    text-decoration: none;
}
.pointer {
    cursor:pointer;
}
.muted,.unmuted {
    width:50px;
}
.blink_me {
    display:block;
    animation: blinker 0.80s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}