@font-face {
 font-family: "main";
 src: url("fonts/Satoshi-Black.otf");
}


body {
    background-color: rgb(128,128,128);
}

button, input {
    color: black;
    -webkit-appearance: none;
    appearance: none;
}

#logo {
    text-align: center;
    padding: 20px;
}

#startDiv {
    text-align: center;
}

#divTwo {
    text-align: center;
}

#playButtonDiv {
    text-align: center;
    padding: 5px;
}

#playButton {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

#rounds {
    text-align: center;
    font-family: "main";
    font-size: 20px;
}

#rounds span {
    margin: 0 10px;
}

.start {
    background-color: rgb(190, 190, 190); 
    font-family: "main";
    font-size: x-large;
    margin: 0 10px;
    border-color: rgb(100, 100, 100);
    border-radius: 10px;
}

#search {
    background-color: rgb(190, 190, 190);
    font-family: "main";
    width: 220px;
}
#button {
    background-color: rgb(190, 190, 190); 
    font-family: "main";
}

.userInput {
    font-size: 17px;
    border-color: rgb(100, 100, 100);
    border-radius: 10px;
}

#error {
    font-family: "main";
    min-height: 22px;
}

#heardleLabel {
    margin-top: 0;
}

#songLabel {
    position: absolute;
    left: 36.5%;
    transform: translateX(-50%);

}

#albumLabel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#trackLabel {
    position: absolute;
    right: 36%;
    transform: translateX(+50%);
}

.guess {
    text-align: center;
    font-family: "main";
    position: relative;
    height: 40px;
}

.song {
    position: absolute;
    left: 36.5%;
    transform: translateX(-50%);
}

.heardleSong {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#heardleHint {
    position: absolute;
    left: 63%;
    transform: translateX(-50%);
}

.album {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -12px;
}

.album img {
    height: 50px;
}

.arrow {
    position: absolute;
    left: 54.2%;
    transform: translateX(-50%);
    top: 5px;
}

.track {
    position: absolute;
    right: 36%;
    transform: translateX(+50%);
}

.arrow2 {
    position: absolute;
    left: 66.8%;
    transform: translateX(-50%);
    top: 2px;
}

#againDiv {
    text-align: center;
}

@media (max-width: 768px) {
    #songLabel {
    position: absolute;
    left: 20%;
    transform: translateX(-50%);

    }

    #albumLabel {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    #trackLabel {
        position: absolute;
        right: 20%;
        transform: translateX(+50%);
    }

    .song {
        font-size: 12px;
        position: absolute;
        left: 20%;
        transform: translateX(-50%);
        max-width: 120px;
    }

    .album {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -12px;
    }

    .track {
        position: absolute;
        right: 20%;
        transform: translateX(+50%);
    }

    .arrow {
        position: absolute;
        left: 64%;
        transform: translateX(-50%);
        top: 5px;
    }

    .arrow2 {
        position: absolute;
        left: 88%;
        transform: translateX(-50%);
        top: 2px;
    }

    #heardleHint {
        position: absolute;
        left: 85%;
        transform: translateX(-50%);
    }
}