/*--Main Page--*/

.calculator-page {
    margin: 0 auto;
    padding: 40px 0 60px;
}

@media (max-width: 650px) {
    .calculator-page {
        width: min(100% - 20px, 1000px);
        padding-top: 28px;
    }
}

.title {
    text-align: center;

    margin-top: 10px;
    margin-bottom: 35px;
    padding-bottom: 25px;

    font-size: 32px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}


/*--Coordinate panels--*/

.coordinate-panels {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;

    gap: 20px;

    padding: 20px;
}

.coordinate-panel {
    display: flex;
    flex-direction: column;

    width: 420px;
    min-height: 400px;

    padding: 20px;

    background-color: #262626;

    border-radius: 16px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.35),
        inset 0 0 18px rgba(255, 255, 255, 0.025);
}


/*--Overworld panel--*/

.overworld-panel {
    border: 2px solid rgba(72, 180, 72, 0.75);
}


/*--Nether panel--*/

.nether-panel {
    border: 2px solid rgba(160, 55, 90, 0.8);
}


/*--Panel headers--*/

.panel-header {
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;
    padding-bottom: 12px;
}

.panel-header h3 {
    margin: 0;

    font-size: 24px;
}

.dimension-icon {
    width: 36px;
    height: 36px;

    object-fit: contain;

    image-rendering: pixelated;
}

.overworld-panel .panel-header {
    color: rgb(95, 210, 95);

    border-bottom:
        1px solid rgba(95, 210, 95, 0.35);
}

.nether-panel .panel-header {
    color: rgb(215, 75, 115);

    border-bottom:
        1px solid rgba(215, 75, 115, 0.35);
}


/*--Coordinate inputs--*/

.coordinate-input {
    display: flex;
    flex-direction: column;
    flex: 1;

    gap: 7px;

    padding: 10px 4px;
}

.coordinate-input label {
    font-size: 17px;
    font-weight: bold;

    color: #e5e5e5;
}

.coordinate-input input {
    box-sizing: border-box;

    width: 100%;
    min-height: 48px;

    padding: 10px 12px;

    background-color: #343434;
    color: white;

    border: 1px solid #555;
    border-radius: 10px;

    font-size: 18px;

    transition: 0.15s;
}


/*--Overworld inputs--*/

.overworld-panel .coordinate-input input:focus {
    outline: none;

    border-color: rgb(95, 210, 95);

    box-shadow:
        0 0 6px rgba(95, 210, 95, 0.5),
        0 0 12px rgba(95, 210, 95, 0.2);
}


/*--Nether inputs--*/

.nether-panel .coordinate-input input:focus {
    outline: none;

    border-color: rgb(180, 70, 120);

    box-shadow:
        0 0 6px rgba(180, 70, 120, 0.55),
        0 0 12px rgba(120, 51, 174, 0.3);
}


/*--Conversion indicator--*/

.conversion-indicator {
    display: flex;
    align-items: center;
    justify-content: center;

    align-self: center;

    width: 48px;
    height: 48px;

    margin: 20px;
    padding: 5px;

    background-color: #3c3c3c;

    border: 3px solid;
    border-color:
        #6f6f6f
        #1f1f1f
        #1f1f1f
        #6f6f6f;

    box-shadow:
        3px 3px 0 #111;

    cursor: pointer;

    transition: 0.15s;
}

.conversion-indicator:hover {
    background-color: #4a4a4a;

    transform: translateY(-2px);

    box-shadow:
        3px 5px 0 #111;
}

.conversion-indicator:active {
    background-color: #333333;

    transform: translateY(1px);

    box-shadow:
        1px 1px 0 #111;
}

.bidirectional-arrows {
    width: 42px;
    height: auto;

    object-fit: contain;
    image-rendering: pixelated;

    pointer-events: none;
}


/*--Removes number input arrows--*/

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}


/*--Smaller screens--*/

@media (max-width: 1000px) {
    .coordinate-panels {
        flex-direction: column;
        align-items: center;
    }

    /* Rotate arrows */
    .bidirectional-arrows {
        transform: rotate(90deg);
    }

    .coordinate-panel {
        width: min(90%, 420px);
    }
}

.copy-coords {
    margin-top: 24px;
    padding: 13px 16px;

    background-color: #602d82;
    color: white;

    text-align: center;

    border: 2px solid;
    border-color:
        #8c58ad
        #351746
        #351746
        #8c58ad;

    font-size: 16px;

    cursor: pointer;

    box-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.4);

    transition: 0.15s;
}

.copy-coords:hover {
    background-color: #713797;

    transform: translateY(-2px);

    box-shadow:
        3px 5px 0 rgba(0, 0, 0, 0.4);
}

.copy-coords:active {
    background-color: #52266f;

    transform: translateY(1px);

    box-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.4);
}

/*--Conversion tip--*/

.conversion-tip {
    margin: 22px auto 0 auto;

    text-align: center;

    font-size: 14px;
    color: #999;
}

.overworld-text {
    color: rgb(95, 210, 95);
}

.nether-text {
    color: rgb(215, 75, 115);
}

.ratio-text {
    color: #a96bd8;
}


/*--Coordinate update flashes--*/

.overworld-flash {
    animation: overworld-flash 0.2s ease-in-out;
}

.nether-flash {
    animation: nether-flash 0.2s ease-in-out;
}

@keyframes overworld-flash {
    0% {
        background-color: #343434;
        border-color: #555;
    }

    40% {
        background-color: #4f9e59;
        border-color: #7cff87;

        box-shadow:
            0 0 8px rgba(124, 255, 135, 0.8),
            inset 0 0 12px rgba(124, 255, 135, 0.15);
    }

    100% {
        background-color: #343434;
        border-color: #555;

        box-shadow: none;
    }
}

@keyframes nether-flash {
    0% {
        background-color: #343434;
        border-color: #555;
    }

    40% {
        background-color: #a13f55;
        border-color: #ff647f;

        box-shadow:
            0 0 8px rgba(255, 100, 127, 0.8),
            inset 0 0 12px rgba(255, 100, 127, 0.15);
    }

    100% {
        background-color: #343434;
        border-color: #555;

        box-shadow: none;
    }
}


/*--Copied button--*/

.copy-coords.copied {
    background-color: #397346;

    border-color:
        #6baa78
        #1e4026
        #1e4026
        #6baa78;
}