/* TABLET */

@media (max-width: 1025px) {

    #home {
        height: 100vh;
        width: 100vw;
        display: flex;
        overflow: hidden;
        max-width: 100vw;
        max-height: 100vh;
        margin: 0;
        padding-top: 0;
        background: linear-gradient(125deg, var(--dark-gray) 10%, var(--medium-gray)50%);
        transition: opacity 0.8s ease-in-out;
    }

    #home.fade-out {
        opacity: 0;
    }

    #home1 {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    #home1-1 {
        display: flex;
    }

    #home1-2 {
        margin-top: 55vh;
        padding-left: 10vw;
    }

    #twirl-l0 {
        height: 100vh;
        width: 30vw;
        margin: 0;
    }

    #name {
        display: flex;
        flex-direction: column;
        margin-left: -12vw;
        margin-top: 3vh;
    }

    .home .hero-text {
        font-size: 7vh;
        color: var(--white);
        font-weight: 800;
        line-height: 7vh;
        margin: 1vh 0vh 0vh -6vh;
    }

    .home .hero-text span {
        font-weight: 100;
        margin: 0vh 0vh 0vh 5vh;
    }

    #welcome {
        font-size: 2.4vh;
        margin: 2.0vh 0vh 0vh 5vh;
        text-transform: lowercase;
        letter-spacing: 0.3vh;
        color: var(--orange);
    }

    .orbit-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow:hidden
    }

    #oz-11 {
        position: absolute;
        top: 4vh;
        left: 30vw;
        height: 88vh;
    }

    .orbit-text {
        position: fixed;
        color: var(--orange);
        z-index: 2;
        white-space: nowrap;
        text-align: center;
        font-weight: bold;
    }

    #home-btn {
        width: 30vw !important;
        max-width: 20rem !important;
        height: 6.5vh;
        border-radius: 1.5rem;
        background-color: var(--orange);
        color: var(--white);
        font-size: 2.5vh;
        font-weight: bold;
        cursor: pointer;
        z-index: 3;
        position: absolute;
        transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    }

    #home-btn:hover,
    .btn:hover,
    #portfolio-btn:hover,
    .fa-window-close:hover {
        transition: all 0.3s ease-in-out;
        background-color: transparent;
        border: 0.1vh solid var(--orange);
        color: var(--orange)
    }

    #home-btn:active,
    .btn:active,
    #portfolio-btn:active,
    .fa-window-close:active {
        transform: scale(0.90);
        background-color: var(--transparent);
    }

}



/* PHONE */

@media (max-width: 450px) {

    #home {
        display: flex;
        overflow: hidden;
        max-width: 100vw;
        max-height: 100vh;
        margin: 0;
        padding-top: 0;
        background: linear-gradient(125deg, var(--dark-gray) 10%, var(--medium-gray)50%);
        transition: opacity 0.8s ease-in-out;
    }

    #home.fade-out {
        opacity: 0;
    }

    #home1 {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    #home1-1 {
        display: flex;
    }

    #home1-2 {
        top: 25vh;
        position: absolute;
        transform: translate(-50%, -50%);
    }

    #twirl-l0 {
        height: 100vh;
        width: 30vw;
        margin: 0;
    }

    #name {
        display: flex;
        flex-direction: column;
    }

    .home .hero-text {
        font-size: 6.5vh;
        color: var(--white);
        font-weight: 800;
        line-height: 5.5vh;
        margin: 1vh 0vh 0vh -3vh;
    }

    .home .hero-text span {
        font-weight: 100;
        margin: 0vh 0vh 0vh 5vh;
    }

    #welcome {
        font-size: 2.3vh;
        margin: 2.5vh 0vh 0vh 0.5vh;
        text-transform: lowercase;
        letter-spacing: 0.3vh;
        color: var(--orange);
    }

    .orbit-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #oz-11 {
        position: absolute;
        top: 12vh;
        left: 8vw;
        height: 84vh;
    }

    .orbit-text {
        position: fixed;
        color: var(--orange);
        z-index: 2;
        white-space: nowrap;
        text-align: center;
        font-weight: bold;
    }

    #home-btn {
        width: 100%;
        min-width: 15rem;
        height: 7vh;
        min-height: 4rem;
        border-radius: 1.5rem;
        background-color: var(--orange);
        color: var(--white);
        font-size: 2.5vh;
        font-weight: bold;
        cursor: pointer;
        z-index: 3;
        transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    }

    #home-btn:hover,
    .btn:hover,
    #portfolio-btn:hover,
    .fa-window-close:hover {
        transition: all 0.3s ease-in-out;
        background-color: transparent;
        border: 0.1vh solid var(--orange);
        color: var(--orange)
    }

    #home-btn:active,
    .btn:active,
    #portfolio-btn:active,
    .fa-window-close:active {
        transform: scale(0.90);
        background-color: var(--transparent);
    }

}