* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

    background: var(--background);
    color: var(--text);

    min-height: 100vh;

    transition:
        background 0.2s,
        color 0.2s;
}


/* =========================
   DEFAULT / PURPLE THEME
   ========================= */

:root {
    --background: #190025;
    --header: #5b0a91;
    --header-border: #8b3fc7;

    --card: #291137;
    --card-border: #4d216b;
    --thumbnail: #55158a;

    --input: #2b1240;
    --input-border: #7135a3;

    --button: #3c155c;
    --button-hover: #512078;

    --settings: #291137;

    --heading: #eee0f5;
    --text: #ffffff;
    --secondary-text: #a98ab8;
}


/* =========================
   HEADER
   ========================= */

header {
    padding: 30px 20px;

    text-align: center;

    background: var(--header);

    border-bottom: 3px solid var(--header-border);
}

header h1 {
    margin: 0;

    font-size: 38px;

    color: var(--text);
}

header p {
    margin: 8px 0 0;

    color: var(--secondary-text);

    font-size: 16px;
}


/* =========================
   MAIN
   ========================= */

main {
    width: 90%;
    max-width: 1050px;

    margin: auto;

    padding: 30px 0;
}


/* =========================
   SEARCH
   ========================= */

#search {
    width: 100%;

    padding: 13px 15px;

    font-size: 16px;

    color: var(--text);

    background: var(--input);

    border: 2px solid var(--input-border);

    border-radius: 2px;

    outline: none;

    margin-bottom: 25px;
}

#search::placeholder {
    color: var(--secondary-text);
}

#search:focus {
    border-color: var(--header-border);
}


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

#videos {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(260px, 1fr)
        );

    gap: 20px;
}


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

.video-card {
    background: var(--card);

    border: 2px solid var(--card-border);

    border-radius: 2px;

    padding: 10px;

    cursor: pointer;

    transition: 0.15s;
}

.video-card:hover {
    transform: translateY(-3px);

    border-color: var(--header-border);
}


/* =========================
   THUMBNAIL
   ========================= */

.thumbnail {
    width: 100%;

    height: 155px;

    background: var(--thumbnail);

    border-radius: 1px;

    overflow: hidden;
}

.thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.video-card h2 {
    margin: 12px 3px 5px;

    font-size: 18px;

    color: var(--heading);
}

.video-card p {
    margin: 0 3px 5px;

    font-size: 14px;

    color: var(--secondary-text);
}


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

#settings-button {
    margin-top: 18px;

    padding: 9px 16px;

    background: var(--button);

    color: var(--text);

    border: 2px solid var(--header-border);

    border-radius: 2px;

    cursor: pointer;

    font-size: 14px;
}

#settings-button:hover {
    background: var(--button-hover);
}


/* =========================
   SETTINGS MENU
   ========================= */

#settings-menu {
    display: none;

    position: fixed;

    top: 80px;
    right: 30px;

    width: 260px;

    padding: 20px;

    background: var(--settings);

    border: 2px solid var(--input-border);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.5);

    z-index: 1000;
}

#settings-menu.open {
    display: block;
}

#settings-menu h2 {
    margin-top: 0;

    color: var(--heading);
}

#settings-menu label {
    display: block;

    margin-bottom: 8px;

    color: var(--secondary-text);
}


/* =========================
   THEME SELECT
   ========================= */

#theme-select {
    width: 100%;

    padding: 10px;

    background: var(--input);

    color: var(--text);

    border: 2px solid var(--input-border);

    border-radius: 2px;

    margin-bottom: 15px;
}


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

#close-settings {
    width: 100%;

    padding: 9px;

    background: var(--button);

    color: var(--text);

    border: 2px solid var(--header-border);

    border-radius: 2px;

    cursor: pointer;
}

#close-settings:hover {
    background: var(--button-hover);
}


/* =========================
   RED
   ========================= */

body[data-theme="red"] {
    --background: #250000;
    --header: #8b0000;
    --header-border: #e53935;

    --card: #3d1111;
    --card-border: #7f1d1d;
    --thumbnail: #a51d1d;

    --input: #3a1111;
    --input-border: #a52a2a;

    --button: #641111;
    --button-hover: #851818;

    --settings: #3d1111;

    --heading: #ffe5e5;
    --text: #ffffff;
    --secondary-text: #d9a3a3;
}


/* =========================
   BLUE
   ========================= */

body[data-theme="blue"] {
    --background: #00152e;
    --header: #064789;
    --header-border: #3b82f6;

    --card: #092b4c;
    --card-border: #145da0;
    --thumbnail: #0b4f8a;

    --input: #06233e;
    --input-border: #2166a5;

    --button: #083866;
    --button-hover: #0d4b87;

    --settings: #092b4c;

    --heading: #e5f2ff;
    --text: #ffffff;
    --secondary-text: #9fc3e8;
}


/* =========================
   GREEN
   ========================= */

body[data-theme="green"] {
    --background: #001f12;
    --header: #087f5b;
    --header-border: #34d399;

    --card: #063b2c;
    --card-border: #087f5b;
    --thumbnail: #0b7a57;

    --input: #052d22;
    --input-border: #15966f;

    --button: #075c43;
    --button-hover: #087f5b;

    --settings: #063b2c;

    --heading: #e2fff4;
    --text: #ffffff;
    --secondary-text: #9bd6c2;
}


/* =========================
   YELLOW
   ========================= */

body[data-theme="yellow"] {
    --background: #292000;
    --header: #b88600;
    --header-border: #ffd43b;

    --card: #4a3b08;
    --card-border: #9a7b00;
    --thumbnail: #c49a00;

    --input: #382d05;
    --input-border: #b28b00;

    --button: #715900;
    --button-hover: #927300;

    --settings: #4a3b08;

    --heading: #fff8d6;
    --text: #ffffff;
    --secondary-text: #dbc96e;
}


/* =========================
   BLACK
   ========================= */

body[data-theme="black"] {
    --background: #000000;
    --header: #111111;
    --header-border: #555555;

    --card: #151515;
    --card-border: #333333;
    --thumbnail: #222222;

    --input: #111111;
    --input-border: #444444;

    --button: #1c1c1c;
    --button-hover: #292929;

    --settings: #151515;

    --heading: #eeeeee;
    --text: #ffffff;
    --secondary-text: #999999;
}


/* =========================
   WHITE
   ========================= */

body[data-theme="white"] {
    --background: #ffffff;
    --header: #eeeeee;
    --header-border: #cccccc;

    --card: #f5f5f5;
    --card-border: #cccccc;
    --thumbnail: #dddddd;

    --input: #ffffff;
    --input-border: #bbbbbb;

    --button: #dddddd;
    --button-hover: #cccccc;

    --settings: #f5f5f5;

    --heading: #222222;
    --text: #111111;
    --secondary-text: #666666;
}


/* =========================
   GREY
   ========================= */

body[data-theme="grey"] {
    --background: #202020;
    --header: #555555;
    --header-border: #888888;

    --card: #333333;
    --card-border: #666666;
    --thumbnail: #777777;

    --input: #303030;
    --input-border: #666666;

    --button: #444444;
    --button-hover: #555555;

    --settings: #333333;

    --heading: #eeeeee;
    --text: #ffffff;
    --secondary-text: #aaaaaa;
}


/* =========================
   PINK
   ========================= */

body[data-theme="pink"] {
    --background: #2b001b;
    --header: #be185d;
    --header-border: #f472b6;

    --card: #521638;
    --card-border: #be185d;
    --thumbnail: #db2777;

    --input: #42132f;
    --input-border: #c43c78;

    --button: #741442;
    --button-hover: #941953;

    --settings: #521638;

    --heading: #ffe5f2;
    --text: #ffffff;
    --secondary-text: #dda4c0;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    header h1 {
        font-size: 30px;
    }

    main {
        width: 94%;
    }

    #videos {
        grid-template-columns: 1fr;
    }

    .thumbnail {
        height: 190px;
    }

    #settings-menu {
        right: 15px;
        width: 240px;
    }
}