* {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

html,
input {
    font-family: 'Indie Flower', cursive
}

body {
    background-color: #cecece
}

main {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    background-color: #fffffc;
    transform: rotateZ(-0.7deg);
    box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.1)
}

.container {
    display: grid;
    transform: rotateZ(0.3deg);
    grid-row-gap: 25px;
    padding: 20px 40px 40px 40px
}

.container h1 {
    font-size: 60px
}

.container .bigsearch {
    width: 100%;
    border: 4px solid #111111;
    font-size: 40px;
    font-weight: bold;
    padding: 15px 25px;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    background-image: url('loading.gif');
    background-size: 88px;
    background-repeat: no-repeat;
    background-position-x: right
}

.container .bigsearch:focus {
    outline: none
}

.container label {
    font-size: 40px
}

#result_area {
    display: none;
    grid-gap: 20px
}

#result_container {
    margin-top: 20px
}

#legend {
    font-size: 40px
}

#result_area h2,
#result_area h3 {
    text-align: center
}

#other_legends_container {
    text-align: center
}

#legend .legend {
    display: inline-block
}

#legend .legend span {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 250px;
    display: inline-block
}

#other_legends .legend {
    font-size: 18px;
    display: inline-block
}

#other_legends .legend span {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 150px;
    display: inline-block
}

#legend .legend span,
#other_legends .legend span {
    cursor: pointer;
    margin: 5px;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 21px;
    font-weight: bold
}

#legend .legend:hover sup,
#other_legends .legend:hover sup {
    opacity: 1
}

#legend .legend sup,
#other_legends .legend sup {
    opacity: 0;
    cursor: pointer;
    color: red;
    border-radius: 50%;
    padding: 5px
}

#legend .legend sup {
    font-size: 40px
}

#other_legends .legend sup {
    font-size: 25px
}

#legend .legend sup:hover,
#other_legends .legend sup:hover {
    color: #000000
}

#legend .legend sup:focus,
#other_legends .legend sup:focus {
    opacity: 1
}

.legend span.hidden {
    opacity: 0.3
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#reset {
    display: none;
    cursor: pointer;
    position: absolute;
    top: -2px;
    right: 50px;
    font-size: 30px;
    background-color: #ececec;
    transform: rotateZ(-0.3deg);
    padding: 3px 15px
}

.autocomplete {
    position: relative;
    display: inline-block
}

.autocomplete-items {
    position: absolute;
    background-color: #ffffff;
    border: 4px solid #111111;
    border-radius: 155px 5px 125px 5px/5px 125px 5px 155px;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #d4d4d4;
    font-size: 20px
}

.autocomplete-items div:hover {
    letter-spacing: 2px;
    color: blue
}

.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff
}

@media (max-width: 930px) {
    .container h1 {
        font-size: 50px
    }
}

@media (max-width: 640px) {

    #legend .legend span {
        max-width: 150px;
    }
    #other_legends .legend span {
        max-width: 75px;
    }

    #reset {
        position: initial;
        text-align: center
    }

    main {
        transform: rotateZ(0)
    }

    #app {
        transform: rotateZ(0)
    }

    .container {
        padding: 20px 20px 30px 20px
    }

    .container .bigsearch {
        font-size: 24px;
        background-size: 63px
    }

    #result_area #legend {
        font-size: 1.5em
    }

    #result_area #other {
        font-size: 1.5em
    }

    .container h1 {
        text-align: center;
        font-size: 35px
    }

}

@media (max-width: 400px) {
    .container h1 {
        font-size: 25px
    }
}