/* ==========================================================
   YouAndYou TV v2.0 RC2
   Base CSS
   Production Ready
   ========================================================== */


/* ===========================
   CSS VARIABLES
=========================== */

:root{

    --primary:#ff0033;
    --primary-hover:#ff3355;

    --secondary:#00d4ff;
    --secondary-hover:#00b8e6;

    --success:#00c853;
    --warning:#ffb300;
    --danger:#ff1744;

    --bg:#0f0f0f;
    --bg2:#181818;
    --bg3:#242424;

    --card:#181818;
    --card-hover:#202020;

    --border:#303030;

    --text:#ffffff;
    --text-light:#cccccc;
    --text-muted:#9e9e9e;

    --radius-xs:6px;
    --radius-sm:10px;
    --radius:16px;
    --radius-lg:24px;
    --radius-round:999px;

    --shadow:
        0 8px 25px rgba(0,0,0,.35);

    --transition:.25s ease;

    --sidebar-width:260px;
    --sidebar-mini:82px;

    --header-height:72px;

    --container:1700px;

}


/* ===========================
   RESET
=========================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


/* ===========================
   HTML
=========================== */

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}


/* ===========================
   BODY
=========================== */

body{

    background:var(--bg);

    color:var(--text);

    font-family:
    "Roboto",
    sans-serif;

    overflow-x:hidden;

    min-height:100vh;

    line-height:1.6;

}


/* ===========================
   LINKS
=========================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


/* ===========================
   IMAGES
=========================== */

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

}


/* ===========================
   VIDEO
=========================== */

video{

    display:block;

    width:100%;

}


/* ===========================
   BUTTON
=========================== */

button{

    font:inherit;

    border:none;

    outline:none;

    cursor:pointer;

    transition:var(--transition);

}


/* ===========================
   INPUT
=========================== */

input,
textarea,
select{

    font:inherit;

    outline:none;

}


/* ===========================
   LIST
=========================== */

ul{

    list-style:none;

}


/* ===========================
   TABLE
=========================== */

table{

    width:100%;

    border-collapse:collapse;

}


/* ===========================
   CONTAINER
=========================== */

.container{

    width:min(95%,var(--container));

    margin-inline:auto;

}


/* ===========================
   SECTIONS
=========================== */

section{

    margin-bottom:40px;

}


/* ===========================
   HEADINGS
=========================== */

h1{

    font-size:2.3rem;

    font-weight:700;

}

h2{

    font-size:1.8rem;

    font-weight:700;

}

h3{

    font-size:1.3rem;

    font-weight:600;

}

h4{

    font-size:1.05rem;

}


/* ===========================
   PARAGRAPH
=========================== */

p{

    color:var(--text-light);

}


/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#151515;

}

::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#666;

}


/* Firefox */

*{

    scrollbar-width:thin;

    scrollbar-color:#444 #151515;

}


/* ===========================
   SELECTION
=========================== */

::selection{

    background:var(--primary);

    color:#fff;

}


/* ===========================
   HIDDEN
=========================== */

.hidden{

    display:none !important;

}


/* ===========================
   FLEX HELPERS
=========================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}


/* ===========================
   GRID
=========================== */

.grid{

    display:grid;

}


/* ===========================
   TEXT
=========================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}


/* ===========================
   MARGIN
=========================== */

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}


/* ===========================
   PADDING
=========================== */

.p-10{

    padding:10px;

}

.p-20{

    padding:20px;

}

.p-30{

    padding:30px;

}


/* ===========================
   BORDER RADIUS
=========================== */

.round{

    border-radius:var(--radius);

}

.circle{

    border-radius:50%;

}


/* ===========================
   SHADOW
=========================== */

.shadow{

    box-shadow:var(--shadow);

}


/* ===========================
   TRANSITION
=========================== */

.transition{

    transition:var(--transition);

}


/* ===========================
   LOADING
=========================== */

.loading{

    pointer-events:none;

    opacity:.65;

}


/* ===========================
   RESPONSIVE IMAGES
=========================== */

.responsive-img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* ===========================
   FOCUS
=========================== */

:focus-visible{

    outline:2px solid var(--secondary);

    outline-offset:2px;

}