@font-face{
    font-family: 'ChalkDust';
    src: url('ChalkDust.ttf') format('truetype');
}

body {
    font-family: ChalkDust, fantasy;
    color: #3b4351;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 1.8rem;
}

#background {
    position: relative;
    height: 1280px;
    width: 1920px;
    margin: auto;
    text-align: center;
    /* https://pixabay.com/de/photos/zeichnung-pad-notizbuch-1209781/ */
    background-image: url("background.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

#title {
    position: absolute;
    top: 20px;
    left: 430px;
}

#headline {
    position: absolute;
    top: 300px;
    left: 400px;
}

#solution {
    position: absolute;
    top: 1090px;
    right: 520px;
}

button {
    font-size: 3rem;
    border: 2px solid #666;
    color: #3b4351;
    background-color: #f9f9f9;
    padding: 0 1rem 0 1rem;
    font-family: inherit;
    cursor: pointer;
}

button:hover {
    border: 2px solid #222;
    color: #222;
    background-color: #fff;
}

button:focus {
    outline: none;
}

button:disabled,
button[disabled] {
    cursor: not-allowed;
    border: 2px solid #666;
    color: #BBB;
    background-color: #f9f9f9;
    opacity: .5;
}

#next {
    position: absolute;
    top: 600px;
    right: 300px;
    transform: rotate(-5deg);
}

#prev {
    position: absolute;
    top: 520px;
    left: 90px;
    transform: rotate(5deg);
}

#img {
    position: absolute;
    left: 350px;
    top: 400px;
    height: 700px;
}

#lens {
    display: none;
    background-repeat: no-repeat;
    position: fixed;
    pointer-events: none;
}

#footer {
    position: absolute;
    top: 1215px;
    left: 255px;
}