/*
Theme Name: Elinu Theme
Author: Elinu
Author URI: http://elinu.co.kr
Description: Elinu Theme
Tags: Elinu
Version: 1.0.0
*/

/* Font */
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
/* ------------------------------ */

/* Base Setting */
:root {
    /* Font Text Base */
    --el-font-family: "Nanum Gothic", Helvetica, sans-serif;
    --el-font-size: 1rem;

    --el-text-color: #0f0f0f;
    --el-text-color-sub: #909090;
    --el-text-color-alt: #f0f0f0;
    --el-text-color-test: red;
    --el-text-color-twitch: #5c16c5;

    --el-line-height: 1.5;

    /* Color Base */
    --el-color-black: rgb(0, 0, 0);

    --el-color-twitch: rgb(145, 70, 255);
    --el-color-twitch-ice: rgb(240, 240, 255);
    --el-color-twitch-smoke: rgb(210, 210, 230);
    --el-color-twitch-widow: rgb(190, 170, 255);
    --el-color-twitch-felicia: rgb(87, 190, 230);
    --el-color-twitch-sonic: rgb(0, 20, 165);
    --el-color-twitch-dragon: rgb(130, 5, 180);
    --el-color-twitch-night: rgb(65, 20, 95);
    --el-color-twitch-osu: rgb(190, 0, 120);
    --el-color-twitch-zero: rgb(30, 105, 255);

    --el-color-youtube-red: rgb(255, 0, 0);
    --el-color-youtube-white: rgb(255, 255, 255);
    --el-color-youtube-almost-black: rgb(40, 40, 40);

    /* Background Base */
    --el-background-color: #ffffff;
    --el-background-color-body: #f7f7f7;
    --el-background-color-sub: #f0f0f0;
    --el-background-color-alt: #e7e7e7;
    --el-background-color-active: #5a41ff;
    --el-background-color-focus: #1B1464;
    --el-background-color-header: #151B26;
    --el-background-color-footer: #e0e0e0;
    --el-background-color-twitch: #bf94ff;

    --el-color-opacity-1: rgba(0, 0, 0, .08);
    --el-color-opacity-2: rgba(0, 0, 0, .15);
    --el-box-shadow-elevation: 3px 0 3px var(--el-color-opacity-1), 0 3px 3px var(--el-color-opacity-2);

    --el-button-color: pink;
    --el-button-color-hover: orange;
    --el-button-color-focus: green;
    --el-button-color-active: blue;

    --el-border-color: #010B40;
    --el-border-top-footer: hsla(240, 7%, 70%, .35);
    --el-border-color-alt: #eeeeee;
    --el-accent-color: #3D46F2;
    --el-accent-color-sub: #94E1F2;

    /* Scrollbar Base */
    --el-scrollbar-width: .6rem;
    --el-scrollbar-height: .6rem;
    --el-scrollbar-min-width: 10px;
    --el-scrollbar-min-height: 10px;
    --el-scrollbar-track-height: 11px;
    --el-scrollbar-background-0000: rgba(0, 0, 0, 0);
    --el-scrollbar-background-0004: rgba(0, 0, 0, .4);
    --el-scrollbar-background-0005: rgba(0, 0, 0, .5);
    --el-scrollbar-background-linear: linear-gradient(#f64435, #ffe498);
    --el-scrollbar-radius: 7px;
    --el-scrollbar-opacity: 1;

    --el-padding: 1rem;
    --el-padding-side: 1.5rem;
    --el-padding-space: 1rem;

    /* Main Base */
    --el-main-padding: 1rem 2rem;
    --el-main-padding-section: 2rem 0;
    --el-main-padding-article: 1rem 0;
    --el-main-padding-main-footer: 3rem 0;

    --el-main-margin: 1rem 1rem;
    --el-main-margin-main-footer: 1rem 0;

    --el-main-font-size-h1: 3rem;
    --el-main-font-size-h2: 2rem;
    --el-main-font-weight-h1: 600;
    --el-main-font-weight-h2: 400;

    --el-main-z-index: 1001;

    /* Main Mobile Base */
    --el-margin-main-mobile: 0.5rem 1rem;

    /* Footer Base */
    --el-footer-margin: 20px;
    --el-footer-padding: 20px;

    --el-content-padding: 3rem;

}

/* Scrollbar Setting */
::-webkit-scrollbar {
    width: 0.3rem;
    height: 0.3rem;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
}

/* Scrollbar Simplebar Customizing */
.simplebar-scrollbar::before {
    background: rgba(0, 0, 0, 0);
}

.simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
}

/* ------------------------------ */


/* Clearfix Code */
/* .clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
} */

/* ------------------------------ */


/* el-test Setting */
.el-test {
    color: var(--el-text-color-test);
}

/* ------------------------------ */


/* Global Setting */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
    vertical-align: baseline;
    border: 0;
    padding: 0;
    margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

li {
    list-style-position: inside;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button {
    font: inherit;
    color: inherit;
    text-align: inherit;
    background: none;
    border: none;
    border-radius: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    border: none;
    max-width: 100%;
    max-height: 100%;
    vertical-align: top;
}

/* ------------------------------ */


/* Layout */
body {
    font-family: var(--el-font-family);
    font-size: var(--el-font-size);
    color: var(--el-text-color);
    background-color: var(--el-background-color-body);
}

body,
html {
    line-height: var(--el-line-height);
}

.el-root,
body,
html {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Elinu Layout */
.el-body-layout {
    display: flex !important;
    flex-flow: column nowrap !important;
    width: 100% !important;
    height: 100% !important;
}

.el-layout-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    inset: 0;
    width: 100% !important;
    height: var(--el-header-height) !important;
    align-items: stretch !important;
    background-color: var(--el-background-color-header) !important;
    box-shadow: var(--el-box-shadow-elevation) !important;
    padding: 0 var(--el-header-padding-side) !important;
    z-index: var(--el-header-z-index) !important;
}

.el-layout-page {
    display: flex !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.el-layout-aside {
    width: var(--el-sidebar-width) !important;
    height: 100% !important;
    background-color: var(--el-background-color-alt) !important;
    box-shadow: var(--el-box-shadow-elevation) !important;
    z-index: var(--el-sidebar-z-index) !important;
}

.el-layout-main {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    /* flex-grow: 1 !important; */
    /* -webkit-box-flex: 1 !important; */
    width: 100% !important;
    height: 100% !important;
    z-index: var(--el-main-z-index) !important;
}

/* ------------------------------ */


/* ------------------------------ */


/* ------------------------------ */

/* Main Front */
.el-layout-main .el-main-front {
    width: 95% !important;
    height: 100% !important;
    margin: 2rem auto;
}

.el-main-front .el-main-section {
    word-break: break-all;
    padding: var(--el-main-padding-section);
}

/* Front Footer */
.el-main-front .el-front-footer {
    padding: var(--el-main-padding-main-footer);
    border-top: 1px solid var(--el-border-top-footer);
    margin: var(--el-main-margin-main-footer);
}


/* ------------------------------ */


/* Mobile Header */
@media (hover:none) or (max-width: 768px) {
    :root {}

    .el-layout-header {
        padding: 0 var(--el-header-mobile-padding-side) !important;
    }

    .el-header-left .el-left-description {
        display: none !important
    }

    .el-layout-header .el-header-center {
        display: none !important;
    }

    .el-layout-header .el-header-right {
        /* display: none !important; */
    }

    .el-layout-header .el-header-mobile {
        /* display: flex !important; */
    }

    .el-layout-aside {
        display: none !important;
    }

    .el-layout-main .el-main-front {
        margin: 0.5rem auto;
    }
}


.sidebar {
    width: 250px;
    /* Adjust the width of the sidebar as needed */
    background-color: #f0f0f0;
    padding: 20px;
}

.video-list {
    list-style: none;
    padding: 0;
}

.video {
    margin-bottom: 10px;
}

.video-title {
    font-size: 16px;
    font-weight: bold;
}

/* Rest of the CSS styles remain the same */