.domaintrans {
    font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 20px;

    background-color: #222;
    color: #ddd;

    text-shadow: 0 0 5px #000;
    box-shadow: inset 0 0 1em #000;
    margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.domaintrans-body {
    max-width: 500px;
    margin: 20px auto;
}

.domaintrans-eggs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px;
}

.domaintrans-domain {
    margin: 10px;
}
.domaintrans-domain-main {
    font-size: 1.2em;
    line-height: 1.5em;
}
.domaintrans-domain-compat {
    font-size: .8em;
    line-height: 1.5em;
    opacity: .8;
}

.domaintrans-domain-header {
    font-size: 1.4em;
    line-height: 1.5em;
    text-align: center;
}

.domaintrans-domain-display {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 1.2em;
    line-height: 1.4em;
    gap: 5px;
}

.domaintrans-domain-text {
    border: 1px solid #444;
    background: #333;
    border-radius: 5px;
    padding: 2px 5px;
}

.domaintrans-domain-arrow-down {
    display: none;
}

@media (max-width: 500px) {
    .domaintrans-domain-display {
        flex-direction: column;
    }

    .domaintrans-domain-arrow-right {
        display: none;
    }

    .domaintrans-domain-arrow-down {
        display: block;
    }
}

.domaintrans-text {
    font-size: .8em;
    line-height: 1.3em;
    margin: 10px auto;
}
.domaintrans-text p {
    margin: 1em 10px;
}

.domaintrans-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.domaintrans-option {
    display: flex;
    align-items: center;
    color: #fff;
    background: #333;
    border-width: 0;
    border-radius: 5px;
    font-size: 16px;
    max-width: 300px;
    width: 100%;
    text-shadow: initial;
    text-align: left;
    font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    padding: 10px 15px;
    border: 1px solid #444;
    transition: background .2s;
}
.domaintrans-option-icon {
    transform: scale(1.4);
    transition: transform .2s;
}
.domaintrans-option-text {
    padding: 2px 10px;
}

.domaintrans-option:focus {
    outline: 2px solid #9475b2;
}

.domaintrans-option:hover,
.domaintrans-option:focus {
    background: #3d3d3d;
    text-decoration: none;
}
.domaintrans-option:hover .domaintrans-option-icon,
.domaintrans-option:focus .domaintrans-option-icon {
    transform: scale(1.6);
}

.domaintrans-option:active {
    background: #383838;
}
.domaintrans-option:active .domaintrans-option-icon {
    transform: scale(1.3);
}