:root {
    --rotate: -5deg;
    --skew: -5deg;
    --bg: rgb(23, 95, 95);
    --bg-2: rgb(9, 40, 40);
    touch-action: pan-x pan-y;
    height: 100% 
}

/* GLOBALS */
a {
    text-decoration:none;
}

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

.spacer {
    display:none;
}

.top {
    height:35%;
    width:100%;
}

.main-body {
    position:relative;
    overflow-y:scroll;
    width:100%;
    height:50%;
    margin:5% 0 5% 0;
}
/* Main thing that needs to adjust with this layout at different device heights - leaves a HUGE gap at the bottom of the page. Currently trying to keep a consistent height percentage and play with the bottom padding in order to keep the code consistent.

Wait. It's going to keep changing as I change the text in there. I need to finalize the mobile home page before anything else.

WAIT WAIT. I can make a fake element that perfectly overlaps the footer, but exists within the hierarchy of the page, and have the rest of the elements margin off of that. Delightfully devilish, Seymour!*/

.feet {
    width:100%;
    height:10%;
}

.header {
    position:absolute;
    margin: 100px 0 0 -2px;
    margin-right:auto;
    width:101vw;
    background-color:black;
    color:white;
    z-index:1;
}

.header-bb {
    position:absolute;
    font-family:sans-serif;
    font-size:3em;
    text-align:center;
    line-height:100px;
    font-weight:1000;
    width:101vw;
    height:50px;
    background-color:black;
    color:white;
    z-index:2;
}

.header-assist {
    position:absolute;
    margin: 100px 0 0 0;
    width:100vw;
    background-color:black;
    color:white;
    z-index:1;
    height:339.367;
}

.header-a {
    font-size: 8em;
    font-family: sans-serif;
    font-weight: 1000; 
    padding: 0 0 10px 50px;
}

.header-text {
    padding-top:2.5%;
}
.header-drk {
    background-color:var(--bg-2);
    height:200px;
    width:101vw;
    position:absolute;
    top:0;
    z-index:1;
}

.border {
    border: 20px black solid;
    width:97.6vw;
    height:100vh;
    position:fixed;
    z-index:2;
    pointer-events:none;
}

.ph-maintext {
    position:absolute;
    font-family:sans-serif;
    font-size:3em;
    line-height:75px;
    top:850;
    right:40;
    width:101vw;
    height:fit-content;
    background-color:black;
    color:white;
    z-index:1;
}

.ph-maintext p {
    padding: 2% 2% 2% 10%;
}

.ph-headlink {
    position:relative;
    font-family:sans-serif;
    font-size:3em;
    font-weight:1000;
    line-height:3em;
    right:40;
    width:86vw;
    padding: 1% 0 1% 10%;
    margin: 5% 0 5% 0;
    height:fit-content;
    background-color:black;
    color:white;
    z-index:1;
}

    .ph-headlink a {
        text-decoration:none;
        color:white;
    }

    .ph-headlink a {
        text-decoration:none;
        color:white;
    }

.new-content {
    position:relative;
    z-index:1;
    height: 25%;
    width: 100vw;
    background-color:black;
    color:white;
    bottom: 0;
}

    .nc-header {
        height:40%;
        width:100%;
    }

        .nc-header h1 {
            font-size:3em;
            font-family:sans-serif;
            font-weight:1000;
            padding:5%;
        }

        .nc-header p {
            font-size:2em;
            font-family:sans-serif;
            padding: 0 5% 0 5%;
        }

    /* SITES/ABOUT PAGES */

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

    /* SITES PAGE */

    .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;
    }

/* BOTTOM MENU */
.ph-menu {
    position:fixed;
    font-family:sans-serif;
    bottom:0;
    width:100%;
    background-color:black;
    height:11.5%;
    z-index:3;
}

    .ph-menu-hm {
        position:fixed;
        font-family:sans-serif;
        bottom:-30;
        width:100%;
        background-color:black;
        height:5%;
        z-index:3;
    }

    .blk-spc-hm {
        position:absolute;
        width:101vw;
        height:7.5%;
        background-color:black;
        color:white;
        z-index:0;
        bottom:0;
    }

.bouncer {
    position:relative;
    transform: rotate(var(--rotate)) skew(var(--skew));
    width:101vw;
    height:7.5%;
    background-color:black;
}

.ph-row {
    display:inline-block;
    width:100%;
    text-align:center;
    font-size:5em;
    font-weight:1000;
    color:white;
}

.ph-column {
    position:relative;
    width:20%;
    float:left;
    margin:40px 0 0 0;
    color:white;
}

.ph-column a {
    color:white;
    text-decoration:none;
}

a.active {
    color:var(--bg-2);
}

.ph-column p {
    margin:10px 0 0 0;
    font-size:.5em;
}

.ph-column p.active {
    color:var(--bg-2);
    cursor:pointer;
}

/* IMAGE SCROLL */
.scroll-parent {
    padding:700px 0 0 0;
    position: relative;
    width: 100vw;
    overflow-x: hidden;
    background-color:black;
}

.scroll-element {
    padding-top:428px;
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0%;
    top: 0%;
    animation: primary 12s linear infinite;
}

.primary {
    animation: primary 14s linear infinite;
}
  
.secondary {
    animation: secondary 14s linear infinite;
}

.scroll-element img {
    width:19.6%;
    max-height:15em;
}

/* IMAGE SCROLL ANIMATIONS */
@keyframes primary {
    from {
      left: 0%;
    }
    to {
      left: -100%;
    }
  }
  
  @keyframes secondary {
    from {
      left: 100%;
    }
    to {
      left: 0%;
    }
  }


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

/* TESTING */

.uc-banner {
    position:fixed;
    padding-top:80px;
    transform:rotate(-20deg) skew(-20deg);
    top:50%;
    left:-50;
    background-color:yellow;
    width:110%;
    height:150px;
    font-family:sans-serif;
    font-size:4em;
    font-weight:1000;
    text-align:center;
}