*,
::after,
::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0
}

html:focus-within {
    scroll-behavior: smooth
}

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

@media (prefers-reduced-motion:reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,
    ::after,
    ::before {
        -webkit-animation-duration: 0s !important;
        animation-duration: 0s !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0s !important;
        -o-transition-duration: 0s !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important
    }
}

body,
html {
    height: 100%
}

.section-home div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.home-container {
    background-image: url(https://www.jasongunn.com/_img/blocks2.svg), -webkit-gradient(linear, left top, right top, color-stop(0, #24252d), color-stop(50%, #24252d), color-stop(50%, #1f1d22), to(#1f1d22));
    background-image: url(https://www.jasongunn.com/_img/blocks2.svg), -o-linear-gradient(left, #24252d 0, #24252d 50%, #1f1d22 50%, #1f1d22 100%);
    background-image: url(https://www.jasongunn.com/_img/blocks2.svg), linear-gradient(to right, #24252d 0, #24252d 50%, #1f1d22 50%, #1f1d22 100%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto
}

.section-home {
    position: static;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-image: url(/_img/bg-facec.svg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 90% 90%
}

.left-home {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    padding: 0;
}

.right-home {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    padding: 0;
    color: #ddd;
    height: 100vh
}

.right-home p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: left;
    color: #ddd;
    font-size: 12px
}

.right-home h1 {
    /* font-size: min(max(2rem, 5vw), 122px); */
    font-size: calc(1.375rem + ((1vw - 0.259375rem) * 5.3456));
    font-size: -webkit-calc(1.375rem + ((1vw - 0.259375rem) * 5.3456));
    min-height: 0vw;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 3%;
    padding-left: 20px;
    font-family: 'Maiden Orange', sans-serif;
    -webkit-transform: skew(360deg, 358deg);
    -ms-transform: skew(360deg, 358deg);
    transform: skew(360deg, 358deg)
}

.portal-btn {
    display: block;
    position: absolute;
    top: 30px;
    left: 30px;
    width:200px;
    padding: 10px 15px;
    border: 3px solid #24252d;
    background: #1f1d22;
    color: #ddd;
    text-decoration: none;
    text-align:center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.25rem;
    transition: background 300ms;
}

.portal-btn:hover, .portal-btn:focus {
    border: 3px solid #24252d;
    background: #111013;
}

.hometext {
    width: 60%;
    padding-left: 20px
}

.hometext a{
color:skyblue;
text-decoration:none;
transition:300ms;
}

.hometext a:hover, .hometext a:focus{
    color:rgb(135, 235, 165);
    }
    

@media (max-width:500px) {
    .section-home {
        background-image: url(/_img/bf-face-dark.svg);
        padding: 0;
        text-align: center;
    }

    .right-home p {
        text-align: center;
    }
    
    .right-home {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 99%;
        -ms-flex: 1 1 99%;
        flex: 1 1 99%;
    }

    .portal-btn {
        display: block;
        position: absolute;
        top: 30px;
        left: calc(50% - 100px);
        width:200px;
        padding: 10px 15px;
        border: 3px solid #24252d;
        background: #1f1d22;
        color: #ddd;
        text-decoration: none;
        text-align:center;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 1.25rem;
        transition: background 300ms;
    }    
}


@media all and (max-width:700px) {
    .hometext {
        width: 90%;
    }
}

@media (min-width:500px) {
    .right-home {
        padding: 1rem;
        -webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0;
    }

    .right-home p {
        font-size: -webkit-calc(1rem + ((1vw - 4.15px)));
        font-size: calc(1rem + ((1vw - 4.15px)));
        min-height: 0
    }

    .left-home {
        padding: 1rem;
    }
}

@media (min-width:1500px) {
    .right-home {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2
    }

    .right-home p {
        font-size: 31px
    }

    .right-home h1 {
        font-size: 5rem;
    }
}

.container {
    max-width: 1500px;
    margin: 0 auto
}

h1 {
    margin-top: 0;
    margin-bottom: .4em
}

.noscroll {
    overflow: hidden
}