@charset "UTF-8";

/*

    SSC for Web

    Copyright (C) Saitama Sora Cam, よね/Yone
    改変や複製を一切禁じます。

*/

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

:root {
    --font-size: 18px;
    --font-family: 'Noto Sans JP', 'Roboto', sans-serif;

    --map-item--border-radius: 0.5rem;
    --map-item--bgcolor: #000000c0;
    --map-item--color: #ffffffff;

    --information-details--width: 16rem;

    /* z-index */
    --map-item--z-index: 9999;
}

body,
body * {
    margin: 0;
    padding: 0;
    user-select: none;
}

html {
    font-size: var(--font-size);
}

body {
    background-color: #000;
    font-size: var(--font-size);
    font-family: var(--font-family);
}

main {
    display: flex;
    flex-direction: row;
}

/* map */

.map {
    width: calc(100vw - var(--information-details--width));
    height: 100vh;
}

.map__item {
    position: fixed;
    z-index: var(--map-item--z-index);
    background-color: var(--map-item--bgcolor);
    color: var(--map-item--color);
}

/* information-title */

.information-title {
    top: 1rem;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0.5em;
    font-size: 1.8rem;
    font-weight: bold;
}

/* published-time */

.published-time {
    top: 5.5rem;
    left: 0;

    background-color: #0000;
    padding: 0.5em;
    font-size: 1rem;
    text-shadow: -1px -1px #0008, -1px 1px #0008, 1px -1px #0008, 1px 1px #0008;
}

/* information-details */

.information-details {
    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    width: var(--information-details--width);
    height: 100vh;
    border-left: 1px solid #fff2;

    padding: 0.5rem 0.8rem;
    background-color: #111;
    color: #fff;
}

.information-details__item {
    display: flex;
    flex-direction: row;
    align-items: center;

    min-height: 3.5rem;
    overflow: hidden;
    border-top: 1px solid #fff4;

    padding: 0.5rem 0;

    &:first-child {
        border-top: none;
    }
}

.information-details__term {
    width: 50%;
}

.information-details__label {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ccc;
}

.information-details__description {
    display: flex;
    justify-content: end;
    width: 50%;
}

.information-details__display {
    display: inline-block;
    text-align: right;
    font-size: 1rem;
}

.hypocenter,
.tsunami {
    flex-direction: column;
    gap: 0.5rem;
}

.hypocenter__term,
.hypocenter__description,
.tsunami__term,
.tsunami__description,
.hypocenter__display,
.tsunami__display {
    width: 100%;
}

.max-int__display,
.magnitude__display {
    font-size: 2rem;
    font-weight: bold;
}

/* icon-legends */

.icon-legend {
    bottom: 7rem;
    left: .7rem;

    display: none;
    flex-direction: column;

    gap: 0.5rem;
    border-radius: var(--map-item--border-radius);
    padding: .5em 1em;

    &.enabled {
        display: flex;
    }
}

.icon-legend__item {
    display: flex;
    align-items: center;
}

.icon-legend__image {
    width: 1.5rem;
    margin-right: .3rem;
}

.ellipsis {
    display: flex;
    flex-direction: column;
    justify-content: center;

    &>* {
        transform: rotate(90deg);
    }
}

/* ydits-copyright */

.ydits-copyright {
    bottom: 3rem;
    left: .7rem;
    border-radius: var(--map-item--border-radius);
}

.ydits-copyright__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;

    color: var(--map-item--color);
    text-decoration: none;
}

.ydits-copyright__before {
    font-size: 0.8rem;
    color: var(--map-item--color);
}

.ydits-copyright__image {
    width: 4.5rem;
}