@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-VariableFont_wdth\,wght.ttf);
}

@font-face {
    font-family: RobotoBold;
    src: url(../fonts/Roboto_Condensed-Bold.ttf);
}

@font-face {
    font-family: RobotoThine;
    src: url(../fonts/Roboto_Condensed-Thin.ttf);
}

:root {
    --menu-count:5;
}

body {
    background-color: #343434;
}

.wrapper {
    margin: 0 auto;
    width: 900px;
    background-color: #343434;
}
.wrapper-menu {
    margin: 0 auto;
    width: 900px;
    background-image: url('../img/toplinie.jpg');
    height: 99px;
}

.wrapper-main {
    margin: 0 auto;
    width: 900px;
    background-image: url('../img/main-img.jpg');
    background-repeat: no-repeat;
    height: 541px;
}

nav {
    height: 99px;
    color: #E5E5E5;
    /*background-color: red; */
}

.header-main-nav ul {
    list-style: none;
    margin-right: 50px;
}

.header-main-nav ul li {
    display: inline;
    float: right;
}

.header-main-nav ul a {
    padding: 0 10px;
    font-family: Roboto, cursive;
    line-height: 99px;
    color: #E5E5E5;
    display: block;
    height: 100%;
}
.header-main-nav ul li a:hover {
    color: #A80030;
    font-weight: 800;
    visibility: visible;
    display: block;
}

.header-main-nav ul li ul {
    visibility: hidden;
    opacity: 0;
    display: none;
    position: absolute;
    transition: all ease-in-out 100ms;
}

.header-main-nav ul li ul a {
    white-space: nowrap;
}

.main-left {
    width: 290px;
    height: 100%;
    float: left;
    display: inline;
}

.main-right {
    height: 100%;
    width: 610px;
    float: right;
}

a {
    cursor: pointer;
}

h1 {
    font-family: RobotoBold;
    color: #E5E5E5;
    font-size: x-large;
    margin-bottom: 20px;
    margin-top: 10px;
}

h2 {
    font-family: RobotoBold;
    color: #E5E5E5;
    font-size: xx-large;
    margin-bottom: 10px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    font-family: RobotoBold;
    color: #E5E5E5;
    font-size: large;
    margin-top: 40px;
    margin-bottom: 10px;
    text-align: center;
}

p {
    font-family: Roboto;
    color: #E5E5E5;
    font-size: medium;
    margin-bottom: 20px;
}

.theme {
    font-family: RobotoThine;
    color: #E5E5E5;
    margin-bottom: 20px;
    font-size: large;
}

.cover-icon {
    width: 150px;
    height: 150px;
}

.cover {
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 20px;
}

.upcomming-box {
    display: block;
    background-color: #424242;
    width: 100%;
    min-height: 150px;
    padding: 10px 10px;
    
}

.upcomming-box img {
    width: 150px;
    height: 150px;
    margin-right: 20px;
    float: left;
}

.upcomming-box h3 {
    width: 100%;
    background-color: #A80030;
    margin-top: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: RobotoBold;
    color: #E5E5E5;
}

.upcomming-box p span {
    font-family: RobotoThine;
    color: #E5E5E5;
    margin-bottom: 0px;
}

.upcomming-box p {
    margin-top: 2px;
    margin-bottom: 0px;
}



.music-box {
    display: block;
    background-color: #424242;
    width: 100%;
    min-height: 150px;
    padding: 10px 10px;
    
}

.music-box img {
    width: 150px;
    height: 150px;
    margin-right: 20px;
    float: left;
}

.music-box h3 {
    width: 100%;
    background-color: #135702;
    margin-top: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: RobotoBold;
    color: #E5E5E5;
}

.music-box2 h2 {
    width: 100%;
    background-color: #135702;
    margin-top: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: RobotoBold;
    color: #E5E5E5;
}


.music-box p span {
    font-family: RobotoThine;
    color: #E5E5E5;
    margin-bottom: 0px;
}

.music-box p {
    margin-top: 2px;
    margin-bottom: 0px;
}

.music-box2 {
    display: block;
    background-color: #424242;
    width: 100%;
    min-height: 150px;
    padding: 10px 10px;
}

.music-box2 .info {
    margin-top: 20px;
    margin-bottom: -20px;
}

.music-box2 p span {
    font-family: RobotoThine;
    color: #E5E5E5;
    margin-bottom: 0px;
}

.music-box2 p {
    margin-top: 2px;
    margin-bottom: 0px;
}

.music-box2 .sample {
    padding: 10px 0 10px 0;
    text-align: center;
    background-color: #424242;
}

.find-streams1 {
    text-align: center;
    background-color: #6b6969;
}

.find-streams2 {
    text-align: center;
    background-color: #424242;
}

.Pladeselskab {
    font-family: RobotoBold;
    color: #E5E5E5;
    text-align: center;
    margin-top: 549px;
}