body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    font-family: Inter, "SF Pro", "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: black;
}

.back-link {
    color: #42B5FF;
    cursor: pointer;
    width: 75px;
    display: flex;
    gap: .2em;
    align-items: baseline;
    font-size: min(1.25vw, 2vh);
}

    .back-link svg {
        fill: #42B5FF;
        height: .75em;
        width: .75em;
        position:relative;
        top:1px;
    }
 
.back-link:hover {
    color: #fff;
}

    .back-link:hover svg {
        fill: #fff;
    }


/* Desktop styling */
@media (min-width: 769px) {
    .mobile {
        display: none;
    }

    .desktop {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
    }

    .panels {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
    }

    .panel-one {
        width: 33.33vw;
        height: 100%;
        background: #141414;
    }

    .panel-two {
        width: 33.33vw;
        height: 100%;
        background: #232323;
        display: flex;
        flex-direction: column;
    }

    .panel-three {
        width: 33.33vw;
        height: 100%;
        background: url('../images/Public Page half_face_photo.jpg');
        background-position: center right;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .content-container {
        height: 80vh;
        width: 100%;
        margin-top: 4vh;
        border: 2px solid white;
    }

        .content-container.left {
            border-right: 0;
            margin-left: 1.75vw;
        }

        .content-container.center {
            border-left: 0;
            border-right: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .content-container.right {
            border-left: 0;
            width: calc(100% - 1.75vw);
        }

    .text-content {
        height: calc(100% - 4vh);
        padding: 4vh 1.75vw 0 1.75vw;
        color: #42B5FF;
        display: flex;
        flex-direction: column;
        gap: 3.5vh;
    }

    .inner-panel {
        display: flex;
        flex-direction: column;
        gap: 1vh;
    }

    .about-jacks-panel {
        display: none;
    }

    .jpeo-panel {
        display: none;
    }

    .irc-panel {
        display: none;
    }

    .privacy-panel {
        display: none;
        height: 85vh;
        overflow: hidden;
    }

        .privacy-panel > .info-text {
            font-size: 1.4vmin;
            overflow-y: auto;
            overflow-x: hidden;
        }

    hr {
        width: 100%;
    }

    .text-item {
        display: flex;
        flex-direction: column;
        gap: 0.5vh;
    }

    .text-title {
        font-size: min(1.25vw, 2.9vh);
        text-decoration: none;
        color: #42B5FF;
    }

        .text-title.clickable:hover {
            cursor: pointer;
            color: white;
        }

    .text {
        font-size: min(0.75vw, 1.7vh);
    }

    .info-text {
        color: white;
        padding-right: 3vw;
    }

        .info-text > a {
            color: #42B5FF;
        }

    .irc-contact-container {
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        gap: 1vh;
        align-items: flex-start;
        margin-top: auto;
        margin-bottom: 4vh;
        font-size: 1.5vh;
    }

    .irc-text {
        width: fit-content;
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: center;
        justify-content: flex-start;
        border-top: 1px solid white;
        padding-top: 1vh;
        font-weight: bold;
        color: white;
    }

    .irc-email {
        width: fit-content;
        display: flex;
        justify-content: center;
        gap: 0.25vw;
        color: white;
    }

        .irc-email > img {
            width: 1vw;
        }

        .irc-email > a {
            color: white;
        }

    .irc-phone {
        width: fit-content;
        display: flex;
        align-content: center;
        gap: 0.25vw;
        color: white;
        text-align: center;
    }

        .irc-phone > img {
            width: 1vw;
        }

    .jacks-log-in-container {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: fit-content;
        justify-content: center;
        align-self: center;
    }

    .sign-in-button {
        margin-top: 2vh;
        color: white;
        text-decoration: none;
        border: 2px solid white;
        padding: 0.5vh 1.2vw 0.5vh 1.2vw;
        border-radius: 5px;
        font-size: 1.75vh;
    }

        .sign-in-button:hover {
            background: #0F5EA8;
        }

    .sign-in-types {
        color: lightgray;
        font-size: 1.2vh;
        padding-top: 0.75vh;
    }

    .jacks-log-in-container > img {
        width: min(33vw, 75vh);
        height: auto;
    }

    .white-line {
        padding: 1px;
        width: 115%;
        background: white;
        z-index: 1;
    }

    .content-panel-two > div:last-child {
        width: calc(100% / 3);
        height: fit-content;
        display: flex;
        align-items: baseline;
        align-self: center;
    }

    .seals {
        height: 5vh;
        margin-left: 33.33vw;
        width: 33.33vw;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        position: absolute;
        left: 0;
        bottom: 13.25vh;
    }

        .seals > img {
            height: min(7vw, 14vh);
            width: auto;
        }

        .seals > img:hover {
            cursor: pointer;
        }

            .seals > img:nth-child(1) {
                align-self: center;
            }

            .seals > img:nth-child(2) {
                height: min(10vw, 20vh);
                width: auto;
                align-self: center;
            }

    .footer {
        height: 5vh;
        align-items: center;
        padding-left: 1vw;
        padding-right: 1vw;
        background: #162128;
        display: flex;
        flex-direction: row;
        z-index: 2;
    }

    .footer-panel-one {
        width: 33.33vw;
        display: flex;
        height: 2.5vh;
        align-items: center;
        font-size: 1.75vh;
    }

        .footer-panel-one > .text-link {
            text-align: left;
            color: #41B3FC;
        }

    .footer-panel-two {
        width: 33.33vw;
        height: 2.5vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: min(1.75vw, 1.75vh);
    }

    .footer-panel-three {
        width: 33.33vw;
        height: 2.5vh;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 1.75vh;
    }

    .text-link {
        color: #41B3FC;
        width: calc(33.33vw / 3);
        text-align: center;
    }

        .text-link:hover {
            color: white;
            cursor: pointer;
        }

    .social-media {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 2vw;
    }

        .social-media > a {
            text-align: center;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

            .social-media > a > img {
                width: auto;
                height: 3.5vh;
            }
}

/* Mobile device styling */
@media (max-width: 768px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: flex;
        width: 100vw;
        height: 100vh;
    }

    .container {
        width: 100%;
        height: 100%;
    }

    .login-page {
        width: 100vw;
        height: 99vh;
        padding-top: 1vh;
        display: flex;
        flex-direction: column;
        gap: 2em;
        justify-content: space-between;
        page-break-after: always;
        page-break-before: always;
        background: #232323;
    }

    .seals {
        height: fit-content;
        width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

        .seals > img {
            height: min(25vw, 35vh);
            width: auto;
        }

            .seals > img:nth-child(1) {
                align-self: center;
            }

            .seals > img:nth-child(2) {
                height: min(30vw, 40vh);
                width: auto;
                align-self: center;
            }

    .log-in-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .log-in-container > img {
            width: min(100vw, 100vh);
        }

    .white-line {
        width: 90vw;
        padding: 1px;
        background: white;
        margin: auto;
    }

    .sign-in-button {
        margin-top: 1em;
        color: white;
        text-decoration: none;
        border: 2px solid white;
        padding: 0.25em 1.5em 0.25em 1.5em;
        border-radius: 5px;
    }

        .sign-in-button:hover {
            background: #0F5EA8;
        }

    .sign-in-types {
        color: lightgray;
        font-size: 0.7em;
        padding-top: 0.25em;
    }

    .link-area {
        padding: 1vh;
        display: flex;
        gap: 1em;
        color: white;
        flex-wrap: wrap;
        justify-content: center;
        color: #41B3FC;
        background: #232323;
        justify-self: flex-end;
    }

    .links {
        display: flex;
    }

    .text-link {
        text-align: center;
        text-decoration: none;
        color: #41B3FC;
    }

    .social-media {
        display: flex;
        justify-content: center;
        align-items: baseline;
        height: 50%;
        text-align: center;
        
    }

        .social-media img {
            height: 61px;
            width:auto;
        }

        .page {
        max-width: 100%;
        height: fit-content;
        background: #232323;
        padding: 1em;
        border-bottom: 1px solid #232323;
        border-top: 1px solid #232323;
    }

    .page-header {
        width: 100%;
        text-align: center;
        padding: 0.5em 0 0.5em 0;
        color: #41B3FC;
    }

        .page-header > a {
            color: #41B3FC;
            text-decoration: none;
        }

        .page-header > span {
            font-size: 1.25em;
            background: #232323;
        }

    .title {
        font-size: 1.5em;
        padding: 0.5em 0 0.5em 0;
        color: white;
    }

    .page-text {
        width: 100%;
        padding: 0.5em 0 0.5em 0;
        color: white;
    }

        .page-text > a {
            color: #41B3FC;
        }
}