#top {
    border-bottom: 1px solid grey;
    max-width: 575px;
}

#top {
    display: block;
    padding-bottom: min(1%, 10px);
}

#topfields .topfield {
    display: flex;
}

#topfields .topfield > label {
    margin-right: 1vw;
    width: 100px;
}

#topfields .topfield > input {
    flex-grow: 99;
}

#topbuttons {
    line-height: 16px;
    vertical-align: middle;
    display: flex;
    align-content: center;
    gap: 7.5px;
}

#topbuttons > * {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#topbuttons > * > * {
    display: inline-block;
    vertical-align: middle;
}

#topbuttons img {
    width: 16px;
    height: 16px;
}

#topbuttons label {
    line-height: 16px;
}

@media only screen and (((min-width: 500px) and (max-width: 999px)) or (min-width: 1300px)) {
    #topbuttons {
        flex: 1;
        display: flex;
    }

    #topbuttons > * {
        flex: none;
        display: block;
    }

    #topbuttons :not(#display) img {
        margin-right: 5px;
    }

    #topbuttons span {
        flex: none;
    }

    #import > label::after {content: "Importer";} #import {flex: 1.5}
    #export > label::after {content: "Exporter";} #export {flex: 1.5}
    #link > label::after {content: "Lien";} #link {flex: 1}
    #rules > label::after {content: "Règles";} #rules {flex: 1.25}
    #theme > label::after {content: "Affichage";} #theme {flex: 1.5}
}

@media only screen and (min-width: 600px) {
    #topfields {
        display: flex;
        gap: 20px;
    }

    #topfields .topfield {
        display: flex;
        min-width: 0;
    }

    #player {flex: 2}
    #name {flex: 3}
    #universe {flex: 2.5}

    #topfields .topfield > label {
        flex: 0 0 auto;
        margin-right: min(1vw, 5px);
        white-space: nowrap;
        width: auto;
    }

    #topfields .topfield > input {
        flex: 1;
        min-width: 0;
    }
}


@media only screen and (min-width: 1000px) {
    #top {
        max-width: none;
        display: flex;
        align-items: center;
        gap: 2.5vw;
    }

    #topfields {
        margin: 0;
        flex: 3;
        display: flex;
    }

    #topbuttons {
        margin: 0;
        flex: 2;
        display: flex;
        justify-content: flex-end;
        align-self: center;
        gap: 1vw;
    }
}