@font-face {
    font-family: "Onyx W01";
    src: url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.eot");
    src: url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/19cd93c4f701000b94cfd71dfa3a5a6b.svg#Onyx W01")format("svg");
}

div {
    box-sizing: border-box;
}

ul {
    padding: 0;
    list-style-type: none;
}

h1 {
    font-size: 52px;
    margin: 5px 0;
}

body {
    background-color: white;
    color: black;
    font-family: 'Onyx W01';
    margin: 0;
    box-sizing: border-box;

    & .main {
        max-width: 1300px;
        min-width: 400px;
        background: #fff;
        margin: 0 auto;

        & #notif {
            width: 100%;
            border: 1px solid #000;
            margin-bottom: 0px;
            & .notifcont {
                padding: 12px;
                font-size: 35px;
                box-shadow: inset -1px 1px 0 #fff8, inset 1px -1px 0 #fff8;
                color: #fff;
                text-shadow: 2px 2px 0 #000;
                &.red {
                    background: #cc181e;
                }
                & #href {
                    opacity: 0.6;
                }
                & #close {
                    width: 42px;
                    height: 42px;
                    display: inline-block;
                    float: right;
                    background-color: #0003;
                    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGUSURBVEhL7ZY7joMwEIadlSLlIORWlDScAnIA6jSU3Cp0aWhCQQoiRSi7vzWDHBgb20m5n2Thx8x8PJ2of14EDT+Gyq3q7eioWQbs/qBuFK56c2cZxMTKt+r96JEDWwEXPjmzuCxL6q0JkbtirY6iKJBnhcKsUJgIalOYTKyclkU2pUyonKZFvKWMr5yGIsFSZkvuIlrKxMg/ljIh8q9JGR95iDRoO0Rx6oqEbK/egVtSxle+uVcDX+nz+fSO9fqRuN/v6vF40IydaZoUYn3kTjEK9H2v+7gaNICTwIZvbvqY43Xk+MhFkNh13et2u+k2DINu4zi+vb3oY47XOR65wXIkXK9XnbyUS58M5pZSNNSwyVe3GoFt2+o+3zo+VlWlTqfT6q3FHNbAMge1JPlbEVMKDoeDPu73e3U+n0WpCa48z/NZar6QSZLY/3OZUgbyuq43pQzkWZaJX4Epn4tdLhfxWTRN4y1lIE/TlEbvHI9HXWt+xhAsiZEC5NjqieBMceVo6NN0NEH1EPANKfPteh+i1C910h92WLQKzgAAAABJRU5ErkJggg==);
                    background-repeat: no-repeat;
                    border-radius: 5px;
                    background-position: 6px 6px;
                    border: 1px solid #fff6;
                    box-shadow: -1px -1px #0005, -1px 1px #0005, 1px 1px #0005, 1px -1px #0005;
                    cursor: pointer;
                    margin-right: 1px;
                    transition: 100ms;
                    &:hover {
                        background-color: #0005;
                    }
                }
            }
        }

        & #topbar {
            background: #fff;
            border-bottom: 1px solid #000;
            width: 100%;
            height: 200px;

            & #Logo {
                width: 75%;
                height: 100%;
                padding: 25px;
                border: solid #000;
                border-width: 0 1px;
                font-size: 50px;
                text-align: center;
                float: left;

                & span {
                    display: inline-block;
                    vertical-align: top;
                    margin-top: 14px;

                    &#MainLogo {
                        font-size: 120px;
                        /* font-weight: bold; */
                        margin: 0;
                    }
                }
            }

            & .rightcol {
                background: #000;
                border: solid #000;
                border-left-color: #fff;
                border-width: 0 1px;
                color: #fff;
                font-size: 50px;
                width: 25%;
                height: 100%;
                padding: 12px;
                float: left;

                & span {
                    display: inline-block;
                    line-height: 88px;
                }
            }
        }

        & #content {
            font-size: 0;
            display: flex;

            &>* {
                float: left;
            }

            & .leftcol {
                display: inline-block;
                width: 20%;
                border: 1px solid #000;
                border-top: 0;

                & ul:not(:last-child) {
                    border-bottom: 1px solid #000;
                }

                & ul {
                    & .cover {
                        color: #fff;
                        text-shadow: 0 0 6px #000, 0 1px #000;
                        text-align: right;
                        font-size: 30px;
                        padding: 3px 10px;
                        border-bottom: 1px solid #000;
                    }

                    & li {
                        height: 40px;
                        width: 100%;
                        padding: 8px 10px;
                        font-size: 20px;
                        color: #000;
                        box-sizing: border-box;

                        &.selected {
                            width: calc(100% + 1px);
                        }
                    }
                }

                & #bleach,
                & #blackalbum {
                    & .cover {
                        background: url(/images/coverbleach.png) #000 no-repeat;
                        background-position: 50% 50%;
                        background-size: 100%;

                        #blackalbum & {
                            background-image: url('https://ia800808.us.archive.org/11/items/nirvana-2002/Nirvana%20(2002)/Cover%20Image.png');
                            background-position: -64px 50%;
                        }
                    }

                    & li {
                        &:not(.cover):hover {
                            background: #444;
                            color: #fff;
                        }

                        &.selected {
                            background: #000 !important;
                            color: #fff;

                            &:before {
                                border-color: #000;
                            }
                        }
                    }
                }

                & #nevermind {
                    & .cover {
                        color: #fff;
                        background: url(/images/covernevermind.jpg) no-repeat;
                        background-position: 0 -29px;
                        background-size: 100%;
                    }

                    & li {
                        &:not(.cover):hover {
                            background: #0299bd88;
                        }

                        &.selected {
                            background: #0299bd !important;

                            &:before {
                                border-color: #0299bd;
                            }
                        }
                    }
                }

                & #paramount {
                    & .cover {
                        background: url(https://upload.wikimedia.org/wikipedia/en/a/a0/Nirvana_Live_at_the_Paramount.jpg) no-repeat;
                        background-position: 0 -197px;
                        background-size: 100%;
                    }

                    & li {
                        &:not(.cover):hover {
                            background: #1a3d7188;
                        }

                        &.selected {
                            background: #1a3d71 !important;
                            color: #fff;
                            text-shadow: 0 2px #000;

                            &:before {
                                border-color: #1a3d71;
                            }
                        }
                    }
                }
            }

            & #incesticide {
                & .cover {
                    color: #000;
                    background: url(https://ia800308.us.archive.org/23/items/nirvana-incesticide-1992_202307/Incesticide%20%281992%29/Cover%20Image.jpg?cnt=0) no-repeat;
                    background-position: 0 -39px;
                    background-size: 100%;
                    text-shadow: 0 0 6px #fff, 0 1px #fff;
                }

                & li {
                    &:not(.cover):hover {
                        background: #dddd9388;
                    }

                    &.selected {
                        background: #dddd93 !important;

                        &:before {
                            border-color: #dddd93;
                        }
                    }
                }
            }

            & #inutero {
                & .cover {
                    color: #711f37;
                    background: url(https://ia800507.us.archive.org/8/items/nirvana_in-utero/In-Utero-820x820.jpg?cnt=0) no-repeat;
                    background-position: 0 -59px;
                    background-size: 100%;
                    text-shadow: 0 0 6px #fff, 0 1px #fff;
                    text-align: right;
                    font-size: 30px;
                    padding: 3px 10px;
                    border-bottom: 1px solid #000;
                }

                & li {
                    &:nth-child(6) {
                        font-size: 19px;
                        line-height: 25px;
                    }

                    &:not(.cover):hover {
                        background: #f7f0ba88;
                    }

                    &.selected {
                        background: #f7f0ba !important;

                        &:before {
                            border-color: #f7f0ba;
                        }
                    }
                }
            }

            & li.selected {
                position: relative;
                border: solid #000;
                border-width: 1px 0;
                text-shadow: 0 1px 0px #fff7;
                box-shadow: inset 0 -1px #fff, inset 1px 1px #fff;
                width: calc(100% + 1px);

                &:nth-child(2) {
                    border-top: 0;
                }

                &:last-child {
                    border-bottom: 0;
                }

                &:before {
                    content: "";
                    border-right: 1px solid;
                    right: -1px;
                    height: calc(100% - 2px);
                    top: 1px;
                    position: absolute;
                    display: block;
                }
            }

            & .centercol {
                display: inline-block;
                width: 60%;
                border-bottom: 1px solid #000;
                padding: 6px;
                box-shadow: inset 1px -1px #fff, inset -1px 1px #fff;

                &.nevermind {
                    background: #0299bd;
                }

                &.paramount {
                    background: #1a3d71;
                }

                &.inutero {
                    background: #f7f0ba;
                }

                &.bleach {
                    background: #000;
                }

                &.incesticide {
                    background: #dddd93;
                }

                & #textMain {
                    border: 1px solid #000;
                    background: #fff;
                    width: calc(50% + 12px);
                    padding: 12px;
                    float: left;
                    box-shadow: 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff;

                    & #copybtn {
                        width: 100%;
                        margin: 10px 0 0;
                        border: 1px solid #aaa;
                        background: #0000;
                        height: 30px;

                        &:hover {
                            background: #eee;
                        }
                    }

                    & #menu {
                        border-bottom: 1px solid #ccc;
                        margin-bottom: 10px;
                        padding-bottom: 10px;
                        display: inline-block;
                        float: left;
                        width: 100%;

                        & li {
                            width: 50%;
                            float: left;

                            & span {
                                font-size: 27px;
                                margin-left: 10px;
                            }

                            & select {
                                width: calc(100% - 20px);
                                margin: 0 10px;
                                height: 25px;
                                border: 1px solid #aaa;
                                border-radius: 3px;
                                font-size: 11px;
                            }
                        }
                    }

                    & .spanmain {
                        white-space: pre-line;
                        font-family: 'Courier New';
                        font-size: 18px;
                    }
                }

                & #videoHub {
                    width: calc(50% - 18px);
                    display: block;
                    float: right;

                    & .video {
                        border: 1px solid #000;
                        background: #fff;
                        padding: 0 6px 6px;
                        margin-bottom: 6px;
                        width: 100%;
                        box-shadow: 1px 1px #fff, 1px -1px #fff, -1px -1px #fff, -1px 1px #fff;

                        & h1 {
                            margin: 17px 6px 6px;
                        }

                        & iframe {
                            width: 100%;
                            border: 1px solid #fff;
                            box-shadow: 1px 1px #000, -1px 1px #000, -1px -1px #000, 1px -1px #000;
                        }
                    }
                }
            }

            & .rightcol {
                display: inline-block;
                width: 20%;
                padding: 6px;
                border: 1px solid #000;
                border-top: 0;
            }
        }
    }
}