html {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    background-color: #000;
}

body {
    color: #A6A6A6;
    font-family: "Ink Free";
}

.holy-grail-grid {
    display: grid;
    grid-template-areas:
        'header'
        'header2'
        'menu'
        'main-content'
        'left-sidebar'
        'right-sidebar'
        'above-footer'
        'footer';
    margin: 0 auto;
    max-width: 1200px;
    overflow: visible;
    /*border: 2px solid red;*/
}

.holy-grail-grid > .header2 {
    grid-area: header;
}

.holy-grail-grid > .header {
    grid-area: header;
    background-image: url(images/cog.gif);
    background-repeat: no-repeat;
    background-position: 90px;
    background-size: 98px;
    padding-left: 100px;
}

.holy-grail-grid > .menu {
    grid-area: menu;
}

.menurow {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    text-align: right;
    /*border: 2px solid green;*/
}

.menurow ul {
    display: flex;
}

.menurow a {
    color: #A6A6A6;
    text-decoration: none;
    font-weight: bold;
    padding: 5px;
}

.menurow a:hover {
    color: #737373;
    font-weight: bold;
}

a.link-active {
    color: #8B2700;
    font-weight: bold;
    text-decoration: none;
}

.m-bg {
    /*for browser that does not support gradients*/
    background-color: darkslategrey;
    height: 22px;
    margin: 5px;
    border: solid 2px #071308;
    /*for browser that supports gradients*/
    background-image: linear-gradient(#071308, #073508);
}

.dropdown {
    position: relative;
    display: inline-block;
}

.drop-content {
    display: none;
    position: absolute;
    text-align: center;
    background-image: linear-gradient(#071308, #073508);
    border: solid 2px #071308;
    max-width:100px;
    min-width: 100px;
    box-shadow: 0px 1px 10px 0px rgba(166,166,166,166);
    z-index: 1;
}

.drop-content a{
    color: #A6A6A6;
    text-decoration: none;
    display: block;
}
.drop-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .drop-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.holy-grail-grid > .main-content {
    grid-area: main-content;
    min-width: 400px;
    /*max-width: 85%;*/
    margin-right: 20px;
}

.music-title {
    padding-left: 20px;
    border: solid 2px #071308;
    width: 30%;
}

.music-link a {
    white-space: nowrap;
    color: #A6A6A6;
    text-decoration: none;
    font-weight: bold;
    padding: 14px;
}
.musicpro-link a {
    white-space: nowrap;
    color: #5F0B01;
    text-decoration: none;
    font-weight: bold;
    padding: 14px;
}

.musicpro2-link a {
    white-space: nowrap;
    color: #073508;
    text-decoration: none;
    font-weight: bold;
    padding: 14px;
}

.dictionary-word {
    font-weight: bold;
}

.dictionary-link {
    display: flex;
    flex-direction: row;
    color: #A6A6A6;
    text-decoration: none;
    font-weight: bold;
    padding: 14px;
}

.dictionary-link a {
    color: #A6A6A6;
    font-weight: bold;
    text-decoration: none;
}

.dictionary-link a:visited {
    color: #A6A6A6;
    font-weight: bold;
}

.holy-grail-grid > .left-sidebar {
    grid-area: left-sidebar;
    justify-content: center;
    text-align: center;
}

.lyric-title {
    font-weight: bold;
    justify-content: center;
    border: solid 2px #071308;
    width: 250px;
}

.lyric-video {
    justify-content: center;
    text-align: center;
}

.holy-grail-grid > .right-sidebar {
    grid-area: right-sidebar;
    padding: 0 20px 0 10px;
    margin: 10px;
    border: dashed 2px #202020;
}

.ml-bg {
    height: 22px;
    margin: 5px;
    border: dashed 2px #071308;
}

.ml-bg:hover {
    border: solid 2px #071308;
}

.right-sidebar {
    text-align: center;
}

.right-sidebar  li {
    list-style: url("images/utube_logo.png");
}

.right-sidebar  a {
    white-space: nowrap;
    color: #A6A6A6;
    text-decoration: none;
    font-weight: bold;
    padding: 5px;
}

.right-sidebar  a:hover {
    color: #737373;
    font-weight: bold;
}

.holy-grail-grid > .above-footer {
    grid-area: above-footer;
    width: 100%;
}

.holy-grail-grid > .footer {
    grid-area: footer;
    display: flex;
    margin-top: 30px;
}

/*tablet breakpoint*/
@media (min-width: 768px) {
    .holy-grail-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'header header'
            'menu menu'
            'main-content main-content'
            'left-sidebar right-sidebar'
            'above-footer above-footer'
            'footer footer';
    }
}
/*desktop breakpoint*/
@media (min-width: 1024px) {
    .holy-grail-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            'header header header header'
            'menu menu menu menu'
            'left-sidebar main-content main-content right-sidebar'
            'above-footer above-footer above-footer above-footer'
            'footer footer footer footer';
    }
}

li {
    list-style-type: none;
}

.seperatingline {
    border-bottom: solid 2px #202020;
    padding-top: 20px;
    width: 80%;
}

.rp-word-title {
    height: 22px;
    margin-right: 20px;
    margin-left: 20px;
    text-align: center;
    font-weight: bold;
    border: solid 2px #071308;
}

.rp-word {
    display: flex;
    flex-direction: column;
    text-align: left;

}

.rplinkbg {
    background-image: url(images/rp_link_bg.png);
    background-repeat: no-repeat;
    margin-left: 20px;
    object-fit: cover;
    border: solid 3px #021600;
}

.hovertext {
    position: relative;
    border-bottom: 1px dotted #021600;
}

.hovertext:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 250px;
    background-color: black;
    color: #5F0B01;
    font-weight: bold;
    text-align: center;
    border-radius: 5px 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 110%;
}

.hovertext:hover:before {
    opacity:1 ;
    visibility: visible;
}

.above-footer > img {
    object-fit: cover;
    width: 95%;
    height: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

.cw {
    font-size: 12px
}