<style>
        @font-face{
            font-family: plank;
            src: url(/assets/plank.ttf);
        }
        @font-face{
            font-family:;
            src: url('');
        }

        #clef{
            width: 1600px;
            height: 850px;
            margin: 30px auto;
            display: grid;
            background-image: url(/assets/ditherclef.png);
                background-repeat: no-repeat;
                background-size: contain;
            overflow: hidden;
        }
        
         #cfclef{
            width: 1600px;
            height: 850px;
            margin: 30px auto;
            display: grid;
            background-image: none;
                background-repeat: no-repeat;
                background-size: contain;
            overflow: hidden;
            opacity: 1;
        }

        #container{
            width: 900px;
            height: 650px;
            margin: 90px auto;

            display: grid;
                grid-template-areas: 'music header'
                                     'main main';
            grid-template-rows: 130px;
            grid-template-columns: 280px;
                grid-row-gap: 10px;
                grid-column-gap: 20px;
            border: 0px solid red;
        }
        
          #cfcontainer{
            width: 900px;
            height: 650px;
            margin: 90px auto;

            display: grid;
                grid-template-areas: 'music header'
                                     'main main';
            grid-template-rows: 130px;
            grid-template-columns: 280px;
                grid-row-gap: 10px;
                grid-column-gap: 20px;
            border: 0px solid red;
        }
        
             #macontainer{
            width: 900px;
            height: 650px;
            margin: 90px auto;

            display: grid;
                grid-template-areas: 'music header'
                                     'main main';
            grid-template-rows: 130px;
            grid-template-columns: 280px;
                grid-row-gap: 10px;
                grid-column-gap: 20px;
            border: 0px solid red;
        }

/* first row */
        .music{
            grid-area: music;
            border: 1px solid black;
            padding: 10px;
            box-shadow: 5px 2px 0px black;
            background: url(/assets/box-bg.png);
        }
        
        .cfmusic{
            grid-area: music;
            border: 1px solid white;
            padding: 10px;
            box-shadow: 5px 2px 0px white;
            background: url(/assets/cfbox-bg.png);
        }
         .mamusic{
            grid-area: music;
            border: 1px solid darkgrey;
            padding: 10px;
            box-shadow: 5px 2px 0px darkgrey;
            background: url(/assets/mabox-bg.png);
        }
            .discfse{border-radius: 60px; border: 1px solid black; float: left; width: 100px; height: 100px;
                background-image: url(/assets/FSECD.jpg); background-size: contain;}
            
            .discclarkfield{border-radius: 60px; border: 1px solid white; float: left; width: 100px; height: 100px;
                background-image: url(/assets/CFCD.jpg); background-size: contain;}
            
            .discradiohead{border-radius: 60px; border: 1px solid black; float: left; width: 100px; height: 100px;
                background-image: url(/assets/RHCD.jpg); background-size: contain;}

            .rhmusicplayer{float: right; border: 1px solid black; width: 140px; height: 100%; align-content: flex-end; font-family: monospace; background: url(/assets/rhalbumcover.jpg); 
                         background-size: cover; filter: none; position: relative;}
                .rhmusicplayer:hover{filter: grayscale(0); transition: 0.5s}
            
            .mamusicplayer{float: right; border: 1px solid black; width: 140px; height: 100%; align-content: flex-end; font-family: monospace; background: url(/assets/maalbumcover.png); 
                         background-size: cover; filter: none; position: relative;}
                .mamusicplayer:hover{filter: grayscale(0); transition: 0.5s}
            
            .cfmusicplayer{float: right; border: 1px solid white; width: 140px; height: 100%; align-content: flex-end; font-family: monospace; background: url(/assets/cfalbumcover.png); 
                         background-size: cover; filter: none; position: relative;}
                .cfmusicplayer:hover{filter: grayscale(0); transition: 0.5s}
        .header{
            grid-area: header;
            border: 1px solid black;
            padding-right: 20px;
            align-content:flex-end;
            text-align: right;
                text-shadow: 3px 3px 1px white;
                font-size: 30px;
                font-family: plank;
            box-shadow: 5px 2px 0px black;
            background: linear-gradient(to bottom right, black, transparent), url(/assets/keyboard.jpg);
                background-size: contain;

        }
        
        .cfheader{
            grid-area: header;
            border: 1px solid white;
            padding-right: 20px;
            align-content:flex-end;
            text-align: right;
                text-shadow: 3px 3px 1px black;
                color: #004196;
                font-size: 30px;
                font-family: plank;
            box-shadow: 5px 2px 0px white;
            background: linear-gradient(to top left, black, transparent), url(/assets/cfbanner.jpg);
                background-size: contain;

        }
        
        
           .maheader{
            grid-area: header;
            border: 1px solid darkgrey;
            padding-right: 20px;
            align-content:flex-end;
            text-align: right;
                text-shadow: 3px 3px 1px black;
                color: white;
                font-size: 30px;
                font-family: plank;
            box-shadow: 5px 2px 0px darkgrey;
            background: url(/assets/mabanner.png);
                background-size: contain;

        }

/* second row */
        main{
            margin: 0 auto;
            grid-area: main;

            width: 900px;
            height: 490px;

            display: grid;
            grid-template-areas: 'nav marquee'
                                 'sidebar content';
            grid-template-rows: 50px;
            grid-template-columns: 220px;
            background: white;
        }
        
        
        cfmain{
            margin: 0 auto;
            grid-area: main;

            width: 900px;
            height: 490px;

            display: grid;
            grid-template-areas: 'nav marquee'
                                 'sidebar content';
            grid-template-rows: 50px;
            grid-template-columns: 220px;
            background: black;
            color: white;
        }
        
        mamain{
            margin: 0 auto;
            grid-area: main;

            width: 900px;
            height: 490px;

            display: grid;
            grid-template-areas: 'nav marquee'
                                 'sidebar content';
            grid-template-rows: 50px;
            grid-template-columns: 220px;
            background: black;
            color: white;
        }


        .nav{
            grid-area: nav;
            background: linear-gradient(to right,  transparent, grey, black);
                background-size: cover;
            border-left: 1px solid black;
            border-top: 1px solid black;
            padding: 10px;
            text-shadow: 1px 1px white;
                font-family: plank;
                font-size: 22px;
        }
        
         .cfnav{
            grid-area: nav;
            background: linear-gradient(to left,  white, grey, black);
                background-size: cover;
            border-left: 1px solid white;
            border-top: 1px solid white;
            padding: 10px;
            text-shadow: 1px 1px white;
                font-family: plank;
                font-size: 22px;
                color: white;
        }
        
        .manav{
            grid-area: nav;
            background: linear-gradient(to left,  white, grey, black);
                background-size: cover;
            border-left: 1px solid darkgrey;
            border-top: 1px solid darkgrey;
            padding: 10px;
            text-shadow: 1px 1px white;
                font-family: plank;
                font-size: 22px;
                color: white;
        }
            .nav::after{
                grid-area: nav;
                content: "";
                border-top: 49px solid black;
                    border-left: 0px solid transparent;
                    border-right: 54px solid transparent;
                position: relative;
                    top: 38px;
                    left: 157px;
        }
            .cfnav::after{
                grid-area: nav;
                content: "";
                border-top: 49px solid white;
                    border-left: 0px solid transparent;
                    border-right: 54px solid transparent;
                position: relative;
                    top: 38px;
                    left: 157px;
        }
        
        .manav::after{
                grid-area: nav;
                content: "";
                border-top: 49px solid white;
                    border-left: 0px solid transparent;
                    border-right: 54px solid transparent;
                position: relative;
                    top: 38px;
                    left: 157px;
        }

        .marquee{
            grid-area: marquee;
            border: 1px solid black;
                border-bottom: 1px solid grey;
            padding: 15px;
            font-family: monospace;
        }
        
         .cfmarquee{
            grid-area: marquee;
            border: 1px solid white;
                border-bottom: 1px solid grey;
            padding: 15px;
            font-family: monospace;
        }
        
         .mamarquee{
            grid-area: marquee;
            border: 1px solid darkgrey;
                border-bottom: 1px solid darkgrey;
            padding: 15px;
            font-family: monospace;
        }
        .sidebar{
            grid-area: sidebar;
            border: 1px solid black;
            border-top: 0px;
                border-right: 1px solid grey;
            background: white;
            padding: 20px;
            font-family: monospace;
        }
        
         .cfsidebar{
            grid-area: sidebar;
            border: 1px solid white;
            border-top: 1px solid white;
                border-right: 1px solid grey;
            background: black;
            padding: 20px;
            font-family: monospace;
            color: white;
        }
        
        .masidebar{
            grid-area: sidebar;
            border: 1px solid darkgrey;
            border-top: 1px solid darkgrey;
                border-right: 1px solid darkgrey;
            background: #0D0D0D;
            padding: 20px;
            font-family: monospace;
            color: white;
        }
            .mininav{
                border: 1px solid black;
                height: px;
                border-top: 0;
                font-size: 10px;
            }
            
             .cfmininav{
                border: 1px solid white;
                height: px;
                border-top: 0px;
                font-size: 10px;
                color: white;
            }
            
            .mamininav{
                border: 1px solid darkgrey;
                height: px;
                border-top: 0;
                font-size: 10px;
                color: white;
            }


        .content{
            grid-area: content;
            border: 1px solid black;
                border-left: 0;
                border-top: 0;
            background: lightgrey;
            box-shadow: 5px 5px 0px black;
            font-size: 10px;
                font-family: monospace;
            padding: 20px;

            display: grid;
                grid-template-columns: 180px 1fr;
                grid-template-rows: 290px 1fr;
                grid-template-areas: 'about conMain'
                                     'status conMain';
                grid-gap: 10px;
            max-height: 400px;
        }
        
          .cfcontent{
            grid-area: content;
            border: 1px solid white;
                border-left: 0;
                border-top: 0;
            background: #001736;
            box-shadow: 5px 5px 0px white;
            font-size: 10px;
                font-family: monospace;
            padding: 20px;

            display: grid;
                grid-template-columns: 180px 1fr;
                grid-template-rows: 290px 1fr;
                grid-template-areas: 'about conMain'
                                     'status conMain';
                grid-gap: 10px;
            max-height: 400px;
            color: white;
        }
          .macontent{
           grid-area: content;
            border: 1px solid darkgrey;
                border-left: 0;
                border-top: 0;
            background: #000000;
            box-shadow: 5px 5px 0px darkgrey;
            font-size: 10px;
                font-family: monospace;
            padding: 20px;

            display: grid;
                grid-template-columns: 180px 1fr;
                grid-template-rows: 290px 1fr;
                grid-template-areas: 'about conMain'
                                     'status conMain';
                grid-gap: 10px;
            max-height: 400px;
            color: white;
        }
        
        .gbcontent{
            grid-area: content;
            border: 1px solid black;
                border-left: 0;
                border-top: 0;
            background: lightgrey;
            box-shadow: 5px 5px 0px black;
            font-size: 10px;
                font-family: monospace;
            padding: 20px;

            display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: 1fr;
                grid-template-areas: 'gbconMain';
                grid-gap: 10px;
            max-height: 400px;
        }
            .about{
                grid-area: about;
                border: 1px solid black;
                padding: 10px;
                background: white;
        }
        
          .cfabout{
                grid-area: about;
                border: 1px solid white;
                padding: 10px;
                background: black;
                color: white;
        }
        
         .maabout{
                grid-area: about;
                border: 1px solid darkgrey;
                padding: 10px;
                background: #0D0D0D;
                color: white;
        }
            .status{
                grid-area: status;
                border: 1px solid black;
                padding: 10px;
                background: white;
        }
        
             .cfstatus{
                grid-area: status;
                border: 1px solid white;
                padding: 10px;
                background: black;
                color: white;
        }
            .mastatus{
                grid-area: status;
                border: 1px solid darkgrey;
                padding: 10px;
                background: #0D0D0D;
                color: white;
        }
            .conMain{
                grid-area: conMain;
                border: 1px solid black;
                padding: 10px;
                background: white;
                overflow: auto;
                font-size: 12px;
        }
        
           .cfconMain{
                grid-area: conMain;
                border: 1px solid white;
                padding: 10px;
                background: black;
                overflow: auto;
                font-size: 12px;
        }
        
        .maconMain{
                grid-area: conMain;
                border: 1px solid darkgrey;
                padding: 10px;
                background: #0D0D0D;
                overflow: auto;
                font-size: 12px;
        }
        
        .gbconMain{
                grid-area: gbconMain;
                border: 1px solid black;
                padding: 10px;
                background: white;
                overflow: auto;
                font-size: 12px;
        }

        footer{font-size: 10px; font-family: monospace;}

        .rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

        button{width: 100%; border-radius: 0px; border: 0; text-align: left; padding-right: 7px; font-family: monospace; font-size: 10px; background: white;}
        button:hover{font-style: italic; background: linear-gradient(to right, white, white, lightgrey, black)}
        
        button.cf{width: 100%; border-radius: 0px; border: 0; text-align: left; padding-right: 7px; font-family: monospace; font-size: 10px; background: black; color: white;}
        button.cf:hover{font-style: italic; color: black; background: linear-gradient(to right, white, lightgrey, black)}

        a{color: black;}
        a:hover{color: grey; text-decoration: dotted underline;}

        h1{font-family: plank; letter-spacing: 1px; text-align: right;}

        .scrollbar-hide{
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
.link {
  color: #000000;
  text-decoration: underline;
}

.cflink {
  color: #ffffff;
  text-decoration: underline;
}
.link:hover {
  color: #000FFF;
}

.cflink:hover {
  color: #000FFF;
}
html, body {
  height: 100%;
  margin: 0;
}
    </style>
