.sampleImage {
    max-width: 70px;
    height: auto;
}

.autocompleteText {
    display: inline-block;
}

.Nai\', .nai {
    color: rgb(0, 0, 128);
}

.Nyy\', .nyy {
    color: rgb(128, 0, 128);
}

.Xai\', .xai {
    color: rgb(255, 129, 183);
}

.Xyy\', .xyy {
    color: rgb(190, 0, 0);
}

.Zai\', .zai {
    color: rgb(160, 160, 160);
}

.Zyy\', .zyy {
    color: rgb(204, 153, 0);
}

.Vai\', .vai {
    color: rgb(80, 80, 80);
}

.Vyy\', .vyy {
    color: rgb(0, 128, 0);
}

.mojo {
    font-weight: bold;
}

#sampleSourceImage img, #sampleDestinationImage img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

#riffView {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

#sampleSource, #sampleDestination {
    margin: 1%;
    padding: 1%;
}

#sampleSourceText a, #sampleDestinationText a {
    color: #0A0A0A;
}

.sampleDescription {
    display: block;
    font-size: 80%;
}

#submitContainer {
    display: flex;
    justify-content: center;
}

#successText, #errorText {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 3px;
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 300px) {
    #sampleSource, #sampleDestination {
        font-size: 18px;
        width: 100%;
    }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    #sampleSource, #sampleDestination {
        font-size: 16px;
        width: 40%;
    }
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    #sampleSource, #sampleDestination {
        font-size: 18px;
    }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    #sampleSource, #sampleDestination {
        font-size: 20px;
    }
}