:root {
    --first: black;
    --rotate: -10deg;
    --skew: -10deg;
    --bg: rgb(23, 95, 95);
}

/* GLOBALS */
h1 {
    font-family:sans-serif;
    font-size:3em;
    user-select:none;
}

p {
    font-family: sans-serif;
    user-select:none;
}

    body {
        background-color:var(--bg);
        overflow:hidden;
    }

    .top-title {
        position:relative;
    }

    .bot-title {
        position:relative;
    }

    .header-a {
        position:relative;
        font-size: 6em;
        font-family: sans-serif;
        font-weight: 1000;
        padding:0 0 1% 2%;
        color:white;
        width:100%;
    }

    .links {
        position:relative;
        left:-20;
        padding:30px 30px 30px 0;
        animation-name:loadslide;
        animation-duration:.5s;
    }

    .head-link {
        font-size: 4em;
        font-family: sans-serif;
        font-weight: bold;
        font-style:none;
        color:black;
        margin: 0 0 0 0;
        overflow:hidden;
        text-decoration:none;
        background:none;
        transition: color .1s;
    }

    .head-link h2 {
        float:left;
        color:white;
        background-color:black;
        padding:10px 10px 10px 200px;
        transition: margin .1s;
    }

    .head-link h2:hover {
        margin: 0 0 0 20px;
    }

    .header {
        position:relative;
        background-color:black;
        width:100%;
    }

    .left-sec {
        position:fixed;
        z-index: 3;
        background:linear-gradient(to right, rgb(23, 95, 95, 1) 60%, rgb(23, 95, 95, 0) 60%);
        width:55%;
        height:100%;
        float:left;
        /*The left, solid color section of the page; links, text, main body */
        /*TO DO: This needs to be decoupled from the text; this needs to be fixed in place while the text scrolls. DOn't have time right now. */
    }

    .left-sec-top {
        position:absolute;
        height:100%;
        width:100%;
    }

    .left-sec-txt {
        position:relative;
        height:100%;
        z-index:3;
    }

    .desc-txt {
        font-family:sans-serif;
        position:fixed;
        font-size:1.25em;
        font-weight:bold;
        color:white;
        background-color:black;
        padding:20px;
        left:-10;
        width:100%;
        z-index:3;
        bottom: 0;
        animation-name:loadslide-2;
        animation-duration:.5s;
    }

    .right-sec {
        position:fixed;
        z-index: 1;
        width:45%;
        height:100%;
        right:0;
        overflow:hidden;
        border-left: solid 20px black;
    }

    .right-sec-upper {
        position:fixed;
        z-index:2;
        width:45%;
        height:fit-content;
        right:0;
        overflow:hidden;
    }

    .right-sec img {
        width:100%;
        height:100%;
    }

    .right-sec-upper img {
        width:100%;
        height:100%;
    }

    /* ANIMATIONS */
    @keyframes loadslide {
        from {margin: 0 0 0 -400px;}
        to {margin: 0 0 0 0}
    }

    @keyframes loadslide-2 {
        from {
            margin: 0 0 0 -1000px;
        }
        to {
            margin: 0 0 0 0;
        }
    }

    /* DRAWER */
    .header-cen {
        z-index:2;
        position:relative;
        font-size:3em;
        text-align:center;
        font-weight:1000;
        color:white;
        background-color:black;
        padding:0 0 10px 0;
        top:0;
    }

    .back-slide {
        position:relative;
        top:20;
        float:left;
        z-index:1;
        background-color:black;
        width:455px;
        height:200px;
        transition:scale .5s, top .5s;
        margin:0 0 0 20px;
    }

        .back-slide:hover {
            scale:1.05;
            top:15;
        }

    .drawer-links {
        font-family:sans-serif;
        color:white;
        font-weight:1000;
        margin:5%;
    }

        .drawer-links a {
            text-decoration:none;
            color:white;
        }

        .drawer-links a:visited {
            color:var(--bg);
        }

        .drawer-links li {
            margin: 0 0 5% 0;
        }

    .display {
        position:relative;
        top:0;
        float:left;
        width:98%;
        height:200px;
        background-color:black;
        color:white;
        margin: 1% 1% 0 1%;
        transition:scale .5s, top .5s;
        overflow:hidden;
    }

        .display:hover {
            scale:1.01;
            top:-7.5;
        }

        .display-label {
            text-align:left;
            font-size:2em;
            color:white;
            padding:20px;
            font-weight:1000;
            user-select:none;
        }

        .display-text {
            color:white;
            margin:0 20px 20px 20px;
            line-height:1.2;
            width:50%;
        }

        .img-side {
            position:relative;
            top:-50;
            float:right;
            width:20%;
            padding:1em 5em 1em 1em;
            filter:invert(1);
            opacity:25%;
            object-fit:cover;
        }

        .up-bump {
            top:-150;
        }

    .label-text {
        color:white;
        font-size:1em;
        text-align:center;
        padding:10px 0 0 0;
        font-weight:1000;
        user-select:none;
    }

    .slide-text {
        color:white;
        margin:20px;
        line-height:1.2;
    }

/* EXPERIMENTAL */
.txt-highlight {
    background-color:white;
    color:black;
    margin:0;
    padding:0;
}

.menu-pop {
    position:relative;
    background-color:black;
    color:white;
    font-family: sans-serif;
    width:100%;
}

.menu-links li {
    display:inline-block;
    padding:2.5%;
    margin: auto;
}

.menu-links li a {
    text-decoration: none;
    color:white;
    font-weight:bold;
    transition: color .2s;
}

.menu-links li a:hover {
    color:grey;
}

.menu {
    position:relative;
    top:-25%;
    transition: top .5s;
    font-size:2em;
    max-height:5%;
}

    .menu:hover {
        top: 0;
    }

.menu-links {
    position:relative;
    padding-left:2%;
    max-width:50%;
}

    .menu-links li .active {
        color:grey;
    }

.menu-btn {
    position: relative;
    background-color: black;
    color: white;
    top: 0;
    left: 0;
    height:30px;
    width:30px;
    padding:10px;
}

/* Contact Button */
.contact {
    position:fixed;
    transition: right .5s;
    float:right;
    right:50;
    bottom:0;
    z-index:9999;
}

    .contact:hover {
        right:300;
    }

.contact-pop {
    position:absolute;
    background-color:black;
    color:white;
    font-family: sans-serif;
    width:250px;
    height:50px;
    right:-300;
    bottom:0;
    padding:5px;
}

.contact-btn {
    position: absolute;
    background-color:black;
    font-size:2em;
    right:-45;
    bottom: 0;
    width:fit-content;
    color: white;
    text-align:center;
    line-height:1.6em;
    padding:4px;
    height:52px;
}

.contact-link {
    font-weight:bold;
    font-size:2em;
    text-align:center;
    line-height:1.5em;
}

.subpg {
    bottom:-635;
}

/* KILLERS */
.ls-off {
    display:none;
}

/* EXPERIMENTAL */