/*
i was gonna add a bunch of comments here, but you likely won't ever
touch the css section. you know who to ask if you wan't something changed / added / removed.
what was that other thing i was gonna say ... ?
oh yeah.

DO NOT ANALYZE THIS STYLESHEET
DO NOT ANALYZE THIS STYLESHEET
DO NOT ANALYZE THIS STYLESHEET
DO NOT ANALYZE THIS STYLESHEET
DO NOT ANALYZE THIS STYLESHEET
DO NOT ANALYZE THIS STYLESHEET
DO NOT ANALYZE THIS STYLESHEET
DO NOT ANALYZE THIS STYLESHEET
DO NOT ANALYZE THIS STYLESHEET
DO NOT ANALYZE THIS STYLESHEET

THE CODE IS HORRIBLE, SLOPPY, AND NEEDS LOTS OF WORK
*/
@import url('https://fonts.googleapis.com/css2?family=Doppio+One&display=swap');

:root {
    --bstyle: 5px solid rgba(15, 128, 100, 255);
    --brad: 5px;
    --ffamily: "Doppio One", sans-serif;
    --fweight: 400;
    --fstyle: normal;
}

body {
    background-color: black;
    overflow: hidden;
}
.example::-webkit-scrollbar {
  display: none;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

p, a, h1, h2, h3, h4 {
    font-family: var(--ffamily);
    font-weight: var(--fweight);
    font-style: var(--fstyle);

    color: white;
}
br {
    display: block;
    margin: 10px 0;
}
ul {
    font-family: var(--ffamily);
    font-weight: var(--fweight);
    font-style: var(--fstyle);

    color: white;

    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
li {
    padding-left: 1em;
    text-indent: -1em;
}
li:before {
    content: "> ";
}

.content {
    border: var(--bstyle);
    border-radius: var(--brad);

    padding: 15px;
    display: flex;
    justify-content: center;
    width: 1000px;
}

.left {

}

.titlebox {
    border: var(--bstyle);
    border-radius: var(--brad);
    box-shadow: 0px 0px 0px 0px rgba(15, 128, 100, 0);
    transition: box-shadow 0.4s ease;
    
    margin: 10px;
}
.titlebox:hover {
    box-shadow: 0px 0px 50px 2px rgba(15, 128, 100, 255);
}

.necessaryinfo {
    display: flex;
}

.aboutbox {
    border: var(--bstyle);
    border-radius: var(--brad);
    box-shadow: 0px 0px 0px 0px rgba(15, 128, 100, 0);
    transition: box-shadow 0.4s ease;

    padding: 10px;
    margin: 10px;
    max-width: 150px;
    height: 335px;
    overflow: scroll;

    -ms-overflow-style: none;
    scrollbar-width: none;
}
.aboutbox:hover {
    box-shadow: 0px 0px 50px 2px rgba(15, 128, 100, 255);
}

.linksbox {
    border: var(--bstyle);
    border-radius: var(--brad);
    box-shadow: 0px 0px 0px 0px rgba(15, 128, 100, 0);
    transition: box-shadow 0.4s ease;

    padding: 10px;
    margin: 10px;
    max-width: 150px;
    overflow: scroll;

    -ms-overflow-style: none;
    scrollbar-width: none;
}
.linksbox:hover {
    box-shadow: 0px 0px 50px 2px rgba(15, 128, 100, 255);
}

.right {
    padding-left: 50px;
}

.muziktitle {
    padding: 15px;
}

.embed {
    border: var(--bstyle);
    border-radius: var(--brad);
    box-shadow: 0px 0px 0px 0px rgba(15, 128, 100, 0);
    transition: box-shadow 0.4s ease;

    padding: 15px;
    margin: 10px;
}
.embed:hover {
    box-shadow: 0px 0px 50px 2px rgba(15, 128, 100, 255);
}

.footer {
    text-align: center;
}