/* Global config */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

:root {
    --overlay-color: #5050a9; /* <-- Color tint over video background. Use this value: var(--overlay-color) to use
                                 a uniform color that matches the video tint and menu's a:hover color */
    --overlay-compliment-gold: #a9a950;
    --overlay-compliment-green: #50a97c;
    --overlay-compliment-pink: #a9507c;
    --dark-gray: #1c1c1f;
    --dark-lightgray: #3b3b3b;
}

* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
html, body {
    width: 100%;
    height: 100%;
    margin: auto;
}

/* Landing Page */
.showcase {
    position: absolute;
    right: 0;
    width: 100%;
    min-height: 100vh;
    padding: 6.25em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #111;
    color: #fff;
    z-index: 2;
    transition: transform 0.5s;
    transform: translateY(0) translateX(0);
}

    .showcase.active {
        transform: translateX(-300px);
    }

    .showcase.minimize {
        transform: translateY(-100%);
    }

    .showcase header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 40px 100px;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .showcase header div {
            display: flex;
            align-content: center;
            justify-content: left;
        }

.logo-fff, .logo-color {
    max-width: 5em;
    max-height: 5em;
    width: auto;
    height: auto;
}
.logo-color {display:none}

/*
"STOCKTRACKER" in the upper left corner of the landing page
*/
.title-text {
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    margin: 1em 0 1em 1em;
}

/*
This is the hamburger button to open the menu. When it is activated, via amending .active to the element, the icon
switches to an "X" icon
*/
.toggle {
    position: relative;
    width: 60px;
    height: 60px;
    background: url('menu.png') no-repeat center;
    background-size: 30px;
    cursor: pointer;
}

    .toggle.active {
        background: url('close.png') no-repeat center;
        background-size: 25px;
    }

.showcase video, .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
opacity: 1; will make the video not transparent at all. Lowering the value increases transparency.
*/
.showcase video {
    object-fit: cover;
    opacity: 0.8;
}

/*
The overlay puts the color tint over the video background. To change the color, modify the root variable at the top of
this sheet.
*/
.overlay {
    background: var(--overlay-color);
    mix-blend-mode: overlay;
}

/*
This is the text on the landing page. "StockTracker..."
*/
.text {
    position: relative;
    z-index: 10;
}

    .text h2 {
        font-size: 5em;
        font-weight: 600;
        line-height: 1em;
    }

    .text h3 {
        font-size: 2.5em;
        font-weight: 600;
        line-height: 1em;
        text-transform: uppercase;
    }

    .text p {
        font-size: 1.1em;
        margin: 20px 0;
        font-weight: 400;
        max-width: 700px;
    }

.btn-case {display: inline-block}
.btn {
    background-color: transparent;
    position: relative;
    display: block;
    color: #fff;
    font-size: 1em;
    text-decoration: none;
    margin: 30px 0;
    border: 2px solid #fff;
    padding: 14px 60px;
    text-transform: uppercase;
    overflow: hidden;
    transition: 1s all ease;
    letter-spacing: 2px;
    cursor: pointer;
}
    .btn::before{
        background: #fff;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: -1;
        transition: all 0.4s ease;
    }
    .btn1:hover {
        border-color: transparent;
        color: var(--dark-gray);
    }
    .btn1::before {
        width: 0;
        height: 100%;
    }
    .btn1:hover::before {
        width: 100%;
    }
/*
This is the "TEAMXTREME TECHNOLOGIES LLC" link at the bottom of the landing page
*/
.team {
    position: absolute;
    bottom: 20px;
}

    .team a {
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 200;
        color: #fff;
    }

/*
This is the menu that opens from the right at the landing page
*/
.menu {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    align-items: center;
    justify-content: center;
}

    .menu.active {
        display: flex;
    }

    .menu ul {
        position: relative;
        list-style: none;
    }

.menu-button {
    text-decoration: none;
    cursor: pointer;
    color: #111;
    border: none;
    background: none;
    font-size: 24px;
}

    .menu-button:hover {
        color: var(--overlay-color);
    }

/*
Market View - Watch List - Stocks 101 - How to Use
.component is a class shared among these sections. They are all stacked on top of each-other. How to Use is at the top
of the stack (the last section rendered), and therefore, always visible (user can always scroll down to see it).

To make style rules that apply to each section, amend the .component class. Otherwise, amend the individual component
classes.
*/
#container {
    display: grid;
    grid-template-rows: repeat(6, minmax(100vh, auto));
}

.component {
    padding: 6.25em;
    /*transition: 0.5s;*/
}

.market-view.no-transition {
    transition: none;
}

.market-view {
    background-color: #1A4133;
}

.stocks-101 {
    background-color: #95baf5;
}

.how-to-use {
    background-color: #B16189;
}

.credits {
    background-color: deepskyblue;
}

.component header h2, .component header h3 {
    display: inline-block;
}

.component.show {
    transform: translateY(0);
}

.settings-dropdown {
    display: none;
    list-style: none;
    padding-left: 0;
    margin-top: 5px;
}

.settings-dropdown li {
    margin-top: 5px;
}

.settings-button + .settings-dropdown .menu-button {
    font-size: 0.9em;
    padding: 5px 10px;
}

@media(max-width: 2000px) {
    .showcase, .showcase header {
        padding: 40px;
    }

    .text h2 {
        font-size: 3em;
    }

    .text h3 {
        font-size: 2em;
    }

    .component {
        padding: 3em;
    }
}

@media(max-width: 1200px) {
    .showcase, .showcase header {
        padding: 40px;
    }

    .text h2 {
        font-size: 3em;
    }

    .text h3 {
        font-size: 2em;
    }

    .component {
        padding: 2em;
    }
}

@media(max-width: 798px) {
    .showcase, .showcase header {
        padding: 40px;
    }

    .text h2 {
        font-size: 3em;
    }

    .text h3 {
        font-size: 2em;
    }

    .component {
        padding: 1em;
    }
}

@media(max-width: 560px) {
    .showcase, .showcase header {
        padding: 40px;
    }

    .text h2 {
        font-size: 3em;
    }

    .text h3 {
        font-size: 2em;
    }

    .component {
        padding: 0.5em;
    }
}

/* Dark Mode toggle slider stuff */
/* The switch - the box around the slider */
.switch {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 18px;
    vertical-align: middle;
    margin: 0 5px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 18px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}

.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

.toggle-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9em;
    padding-left: 4.2px;
}

#clearLocalStorageButton {
    font-size: 0.9em;
}