:root {
    --c-main-accent: #065496;
    --c-white: #ececfe;
    --c-black: #1d1d24;
    --c-lgray: #b7b7c7;
    --c-gray: #30303a;
    --radius: 4px;
    color-scheme: dark;
}

* {
    font-family: sans-serif;
    word-break: break-all;
    box-sizing: border-box;
}

html {
    touch-action: manipulation;
}

body {
    background-color: var(--c-black);
    width: 95%;
    min-width: 310px;
    max-width: 720px;
    margin: 0 auto;
    caret-color: transparent;
}

input {
    caret-color: var(--c-white)!important;
}

/* button */
.bt-base {
    color: var(--c-white);
    background-color: var(--c-gray);
    border: none;
    border-radius: var(--radius);
    outline: none;
    transition: opacity 100ms, scale 10ms;
}

.bt-base:hover {
    opacity: 0.8;
}

.bt-base:active {
    scale: 0.9;
}

/* input */
.in-text-base {
    border: solid 2px var(--c-gray);
    border-radius: var(--radius);
}

/* button */
.bt-20 {
    font-size: 24px;
}

/* display */
.fill-row-flex {
    display: flex;
    gap: 8px;
}

.fill-row-flex-ct {
    flex: 1;
}

.fill-row-flex-off-ct {
    flex-shrink: 0;
}

/* other */
.fn-box-base {
    background-color: var(--c-gray);
    color: var(--c-white);;
    text-align: center;
    border: none;
    border-radius: var(--radius);
    outline: none;
}

/* playerBox */
#playerBox {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#videoSourceBox {
    display: flex;
    gap: 8px;
}

#videoSource {
    width: 100%;
    padding: 0 4px;
    font-size: 24px;
    border-radius: var(--radius);
}

#videoLoadBt {
    width: 96px;
    font-size: 20px;
    color: var(--c-white);;
    background-color: var(--c-main-accent);
}

#videoPlayer {
    background-color: var(--c-gray);
    width: 100%;
    border-radius: var(--radius);
    aspect-ratio: 16/9;
    -webkit-user-drag: none;
    user-select: none;
    color-scheme: light; /* iphone(safari) measures */
    caret-color: transparent;
    transition: transform 500ms;
}

/* controller */
#controller {
    display:  flex;
    flex-direction: column;
    gap: 16px;
    -webkit-user-drag: none;
    user-select: none;
    
    opacity: 0.2;
    pointer-events: none;
}

#playSpeed {
    background-color: var(--c-gray);
    padding: 0;
    border: none;
    border-radius: var(--radius);
    outline: none;
}

#videoLoopRangeBox {
    display:  flex;
    flex-direction: column;
    gap: 4px;
}

#videoLoopRangeBox > div > input[type="text"] {
    width: 96px;
    text-align: center;
}

#videoLoopRangeBox > div > input[type="range"] {
    min-width: 0;
    text-align: center;
}

#videoLoopRangeBox > div > button {
    width: 32px;
}

#ctMainBtBox {
    padding: 0 clamp(64px, 10vw, 128px);
}

#ctMainBtBox > button {
    background-color: transparent;
}

#ctMainBtBox > button > img{
    width: 100%;
}

@media screen and (max-width: 420px) {
    .bt-20 {
        padding: 0;
        font-size: 18px!important;
    }
    
    #ctMainBtBox {
        padding: 0 48px;
    }    

	#videoLoopRangeBox > div > input[type="text"] {
        width: 64px;
        text-align: center;
    }

    #videoSource {
        font-family: 18px!important;
    }
}

button {
    cursor: pointer;
}


.article a,
.article p,
.article li {
    font-size: 17px;
}

.article p,
.article ul,
.article ol {
    margin: 4px 0;
}

.article h1 {
    margin: 0 0 8px 0;
    font-size: 24px;
}

.article h1:not(.article > div:first-child > h1:first-child) {
    margin: 48px 0 8px 0;
}

.article h2 {
    margin: 8px 0 4px 0;
    font-size: 20px;
}

.article a {
    display: inline-block;
    background-color: var(--c-gray);
    color: var(--c-white);
    margin: 4px 2px;
    padding: 2px 4px;
    border-radius: var(--radius);
    text-decoration: none;
}

a, button, span, p, li, h1, h2, input {
    color: var(--c-white);
}

#saveLink {
    width: 100%;
    padding: 0 4px;
    font-size: 18px;
}

.iframe-base {
    width: 100%;
    border-radius: var(--radius);
    aspect-ratio: 16/9;
}

header {
    margin: 32px 0 16px 0;
}

details {
    margin: 8px 0;
}

details summary {
    padding-left: 4px;
    border-left: solid 4px var(--c-main-accent);
}

hr {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    unicode-bidi: isolate;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

/* putbox --- */
.put-box {
    background-color: var(--c-black);
    min-height: 120px;
    padding: 24px 16px;
    margin: 16px 0;
    border: solid 1px var(--c-gray);
    border-radius: 4px;
    box-shadow: 2px 2px 10px var(--c-gray);
}

.put-box span,
.put-box details,
.put-box li {
    font-size: 18px;
}

/* header --- */
.header-title {
    font-size: 32px;
}

.header-title > a {
    color: black;
    font-family: cursive;
    text-decoration: none;
}

.header-logo {
    width: 32px;
    height: 32px;
    vertical-align: sub;
    -webkit-user-drag: none;
    user-select: none;
}

/* main --- */
#main {
    margin: 48px 0 0 0;
}

#main > div {
    margin: 16px 0;
}

#player > iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 4px;
}

.full-input {
    width: 100%;
    margin: 4px 0;
    border-radius: 4px;
    font-size: 26px;
}