body{
    margin: 0;
    padding: 0;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}

.logo{
    position: absolute;
    width: 60vh;
    height: 60vh;
    top:5em;
    left: calc(50vw - 30vh);
}



.color{
    display: block;
    width: 100vw;
    height: 12.5vh;
}
.info{
    position: absolute;
    width: 94vw;
    height: 12.5vw;
    top: 33.5em;
    left:0;
    color: white;
    text-align: center;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    font-size: 2vh;
    padding-left: 2vw;
    padding-right: 2vw;
}

.headline{
    position: absolute;
    width: 100vw;
    height: 12.5vw;
    top:0;
    left:0;
    font-size: 9vh;
    color: white;
    text-align: center;
    font-family: lemonmilk;
}

#red{
    background-color: #ff3b30;
}

#orange{
    background-color: #ff9500;
}
#yellow{
    background-color: #ffcc00;
}
#green{
    background-color: #4cd964;
}
#lightblue{
    background-color: #5ac8fa;
}
#blue{
    background-color: #007aff;
}
#violett{
    background-color: #5856d6;
}
#pink{
    background-color: #ff2d55;
}

a{
    color: white;
    font-weight: bold;
}

 @font-face {
     font-family: "lemonmilk";
     src: url('./font/lemonmilk-webfont/lemonmilk-webfont.eot');
     src: url('./font/lemonmilk-webfont/lemonmilk-webfont.eot?#iefix') format('embedded-opentype'),
          url('./font/lemonmilk-webfont/lemonmilk-webfont.woff2') format('woff2'),
          url('./font/lemonmilk-webfont/lemonmilk-webfont.woff') format('woff'),
          url('./font/lemonmilk-webfont/lemonmilk-webfont.ttf') format('truetype'),
          url('./font/lemonmilk-webfont/lemonmilk-webfont.svg#lemonmilkregular') format('svg');
     font-weight: normal;
     font-style: normal;
 }