@font-face {
    font-family: "Oswald";
    src: url("Oswald-VariableFont_wght.ttf") format("truetype");
    font-weight: normal;
}

body {
    font-family: "Oswald", sans-serif;
    font-size: 14pt;
    background-color: black;
    background-image: url('background.png');
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: center;
    color: cornsilk;
}

h1 {
    font-variant: small-caps;
    color: orange;
}

h2 {
    clear: both;
    color: orange;
}

h3 {
    margin-top: 0.1em;
    color: orange;
}

h6 {
    padding: 0;
    margin: 0;
    margin-top: -15px;
    font-size: 0.8em;
    font-weight: normal;
}

hr {
    clear: both;
    border-top: 1px solid grey;
    border-bottom: 0px;
}

a {
    color: rgb(255, 104, 104);
    text-decoration: none;
}

a:hover {
    color: red;
}

body {
    padding: 0;
    margin: 0;
}

/* -----------------
|       Menubar     |
------------------ */

#menubar {
    width: 100%;
    max-width: 1000px;
    background-color: #131313;
    border-bottom: 1px solid orange;
    padding: 25px 35px 25px 35px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

#menubar a {
    font-weight: bold;
    font-variant: small-caps;
    font-size: 1.3em;
    text-decoration: none;
}

#menubar table {
    width: 100%;
}

#menubar td {
    text-align: left;
    vertical-align: center;
    width: 20%;
}

#logo {
    width: 80px;
}

#impressum {
    text-align: center;
}


.newsImage {
    width: 200px;
    border-radius: 6%;
    float: left;
    margin: 0em 1em 1em 0em;
}

.hiddenAnchor {
    position: relative;
    top: -105px;
}


.content {
    max-width: 980px;
    background-color: #232323;
    padding: 120px 45px 25px 45px;
    margin: 0 auto;
    border-left: 1px solid orange;
    border-right: 1px solid orange;
    border-bottom: 1px solid orange;
}


.smallText {
    font-size: 0.4em;
    font-style: italic;
}

/* --------------------------
|       News Container      |
-------------------------- */

.newsContainer img {
    width: 240px;
    float: left;
    margin-right: 0.8em;
    margin-bottom: 1em;
    border-radius: 6%;
    border: 1px solid transparent
}


/* --------------------------
|       Music Container     |
-------------------------- */

.musicContainer {
    float: left;
    margin-right: 2em;
    margin-bottom: 2em;
}

.musicContainer td {
    vertical-align: top;
    height: 9em;
}

.musicContainer td div {
    width: 14em;
}

.musicContainer img {
    width: 150px;
    height: auto;
    margin-right: 0.8em;
    border-radius: 6%;
    border: 1px solid transparent
}

.musicContainer img:hover {
    filter: grayscale(60%);
    border: 1px dotted grey
}

/* --------------------------
|       Games Container     |
-------------------------- */

.musicContainer.gameContainer td {
    height: auto;
}

.musicContainer.gameContainer td div {
    height: auto;
}

.musicContainer.gameContainer ul {
    padding-left: 1em;
}

/* --------------------------
|       Game Page           |
-------------------------- */

.headImage {
    max-width: 450px;
    height: auto;
    float: left;
    border-radius: 6%;
    margin-top: 2em;
    margin-right: 2em;
    margin-bottom: 2em;
}

.singleGame p {
    max-width: 85%;
}

.singleGame hr {
    margin-bottom: 1em;
}

.screenshot {
    float: right;
    margin-left: 2em;
    width: 220px;
}

.screenshot img {
    width: 200px;
    height: auto;
    border-radius: 6%;
    border: 1px solid transparent;
    margin: 5px;
}

.screenshot img:hover {
    filter: grayscale(60%);
    border: 1px dotted grey
}

/* --------------------------
|       Press Kit           |
-------------------------- */

.pressKit td {
    border: 1px dotted grey;
    padding: 15px;
    height: 180px;
    text-align: center;
    vertical-align: top;
    position: relative;
}

.pressKit img {
    max-width: 120px;
    max-height: 60px;
}

.pressKit div div {
    overflow-wrap: break-word;
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translate(-50%, -5px);
}