@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
    --font-color: black;
    --font-color-2: grey;
    --font-color-3: #615d80;
    --background-color: aliceblue;
    --color-1: #030016;
    --ja-label-color: #6494edc0;
    --ja-label-common-color: #8fbc8fc0;
}

* {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    text-decoration: none;
    box-sizing: border-box;
    cursor: inherit;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}

body {
    background-color: var(--background-color);
    color: var(--font-color);
    font-family: "Raleway", sans-serif;
}
a, button { cursor: pointer; }
input:focus { outline: none; }
.flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row nowrap;
}
    .--center { justify-content: center; }
    .--start { align-items: flex-start; }
    .--col { flex-flow: column nowrap; }
    .--wrap { flex-wrap: wrap; }

.wide { width: 100%; }

hr {
    width: 100%;
    height: 1px;
    background-color: #d8d8d8bc;
    margin: 30px 0;
}
    hr.small { margin: 10px 0; background-color: #d8d8d876; }

.switch-aux { display: none; }
.dropdown-content { display: none; }
    .dropdown-content-btn { display: none; }



/* FRENCH, GERMAN, RUSSIAN */

.main-search-container {
    position: absolute;
    top: calc(50% - 50px);
}
    .main-search-container--small {
        margin: 50px;
    }
    .main-search-form {
        position: relative;
        width: 60%;
    }
        .main-search-form--small { width: 40%; }
        .main-search {
            height: 100px;
            border: 3px solid var(--color-1);
            border-radius: 100px;
            background-color: #ffffff99;
            padding: 20px;
            font-size: 3rem;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }
            .main-search--small { height: 70px; font-size: 2rem; }
            .main-search__enter {
                width: 70px;
                height: 70px;
                border-radius: 100px;
                background-color: var(--color-1);
                position: absolute;
                top: calc(50% - 35px);
                left: calc(100% - 70px - 15px);
                transition: 0.5s;
            }
                .main-search__enter--svg { width: 35px; }
                .main-search__enter--small {
                    width: 50px;
                    height: 50px;
                    top: calc(50% - 25px);
                    left: calc(100% - 50px - 10px);
                }
                    .main-search__enter--small--svg { width: 30px; }
                .main-search__enter:hover {
                    rotate: 36deg;
                    background-color: #000000;
                }

.languages-container {
    padding: 0 30px 30px 30px;
    gap: 100px;
    overflow-x: auto;
    cursor: grab;
}
    .languages-container.active { cursor: grabbing; }
    p, span, i, b, small { cursor: text; }
    .language-div { flex: 0 0 400px; }
        .flag {
            height: 75px;
            border: 4px solid var(--color-1);
            border-radius: 5px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.277);
            margin-bottom: 10px;
        }
        .entry { font-size: 1.4rem; }
        .translation-container { margin: 1px 40px; }
                .translation {
                    font-size: 1.15rem;
                }
                small { font-size: 0.8rem; }
                    .gray { color: var(--font-color-2); }
                .translation__examples-div { margin-left: 20px; }
                    .translation__example {
                        font-size: 0.7rem;
                        color: var(--font-color-3);
                        margin-bottom: 50px;
                    }
                        .translation__example.--english { font-size: 0.65rem; } 
                        .dropdown-arrow:hover {
                            -webkit-filter: invert(1);
                            filter: invert(1);
                        }
                        .dropdown-arrow--aux { transform: rotate(180deg); }
                            .translation__examples__gap { height: 10px; }


.example { margin: 5px 0; }
    .example__translations-div {
        gap: 20px;
        margin-left: 20px;
    }
        .example__translation {
            color: var(--font-color-3);
            font-size: 0.8rem;
        }


.external__source-div {
    margin-bottom: 20px;
    gap: 20px;
}
    .external__article {
        width: 50%;
        font-size: 0.8rem;
    }
        mark { background-color: #ffff0050; }
        .external__link-svg { width: 15px; }
            .external__link-svg:hover {
                -webkit-filter: invert(1);
                filter: invert(1);
            }



/* JAPANESE */

.ja { font-family: "Noto Sans JP", sans-serif; font-weight: 320; }
    .ja:hover { font-family: "Noto Serif JP", serif; }

.modes-div { justify-content: space-evenly; margin-bottom: 20px; }
    .mode-btn {
        font-size: 1.7rem;
    }
        .mode-btn:hover { color: var(--font-color-2); }
        .mode-btn.pressed { border-bottom: 2px solid var(--font-color-2); }

.ja__columns-div { gap: 20px; }
    .ja__word__char { font-size: 2rem; }
    .ja__word__furigana { font-size: 0.8rem; height: 0.5rem; }

    .ja__label {
        width: 110px;
        background-color: var(--ja-label-color);
        font-size: 0.8rem;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 5px;
    }
        .ja__label.--common { background-color: var(--ja-label-common-color); }
    
    .ja__example-div { margin-left: 20px; color: var(--font-color-3); }
        .ja__example__char { font-size: 0.9rem; }
        .ja__example__furigana { font-size: 0.65rem; height: 0.5rem; margin-bottom: 3px; }
        .ja__example__english { font-size: 0.9rem; }
    
    .ja__kanji__column-2 { padding-top: 10px; }
        .ja__kanji { font-size: 3.5rem; }





@media (max-width: 800px) {
    .main-search-container { top: calc(50% - 30px); }
        .main-search-container--small { margin: 20px 0; }
        .main-search-form { width: 90%; }
            .main-search-form--small { width: 90%; }
            .main-search {
                height: 60px;
                font-size: 2rem;
            }
                .main-search__enter {
                    width: 45px;
                    height: 45px;
                    top: calc(50% - 22.5px);
                    left: calc(100% - 45px - 7.5px);
                }
                    .main-search__enter--svg { width: 30px; }
    
    .languages-container {
        padding: 0 20px 30px 20px;
        gap: 50px;
    }
        .language-div { flex: 0 0 300px; }
            .flag {
                height: 45px;
                border-width: 3px;
            }
            .entry { font-size: 1rem; }
            .translation-container { margin: 1px 20px; }
                .translation { font-size: 0.9rem; }
                small { font-size: 0.7rem; }
}