/* General About Us Info*/

main > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

main > div hr {
    position: absolute;
    top: 50%;
    left: 11%;
}

main img { width: 45%; }

/* --------------------------------------------------------------------------------------------- */

.button.raise:hover {
    background: linear-gradient(0.25turn, #C10A0A7A, #5401017A);
}

/* Desktop UI ---------------------------------------------------------------------------------- */

@media(min-width: 701px) {
    .dev-boxes { display: none; }

    main > div > div {
        width: 45%;
        transform: translateY(15%);
    }

    main > div p { margin: 5% 3%; }

    /* Container for list of devs */
    .dev-slideshow > div {
        padding: 20% 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        bottom: -20%;
    }

    /* Name */
    .dev-slideshow > div h2 {
        color: #3A5A7D;
        font-size: 3.9vw;
        position: absolute;
        bottom: 86%;
        left: 22%;
    }

    /* Roles */
    .dev-slideshow > div h3 {
        color: #773F64;
        font-size: 2vw;
        position: absolute;
        top: 82%;
        left: 22.3%;
    }

    /* Nicknames */
    .dev-slideshow > div h4 {
        color: #A6294F;
        font-size: 1.7vw;
        position: absolute;
        top: 17%;
        left: 22.3%;
    }

    /* Descriptions */
    .dev-slideshow > div p {
        color: white;
        font-size: 1.25vw;
        position: absolute;
        top: 28%;
        left: 43.3%;
        width: 33%;
        text-align: right;
    }

    /* Horizontal Line */
    .dev-slideshow > div hr {
        width: 8.5vw;
        border: 3px solid #f3BAFD;
        position: absolute;
        top: 10%;
        left: 67%;
    }

    /* Read More Button */
    .dev-slideshow > div a {
        position: absolute;
        top: 80%;
        left: 60%;
    }

    .button { font-size: 1.5vw; }

    .dev-slideshow { margin: 10% 0; }

    /* Div container for the profile picture. */
    .profile-pic {
        display: inline-block;
        position: absolute;
        width: 15vw;
        height: 15vw;
        overflow: hidden;
        border-radius: 50%;
        top: 28%;
        left: 22%;
    }

    /* Profile Picture Image Element */
    .profile-pic img {
        width: auto;
        height: 120%;
        left: 50%;
        top: 47%;
    }

    main > p { 
        margin: 5% 8%;
        position: relative;
        z-index: 1; 
    }

    #left-arrow { left: 3.75%; }

    #right-arrow { right: 3.75%; }

    #left-arrow, #right-arrow {
        scale: 1;
        position: absolute;
        z-index: 6;
        width: 8vw;

        transition: 0.5s ease-in-out;
    }

    #left-arrow:hover, #right-arrow:hover { scale: 1.2; }

    #left-arrow-circle {
        left: 5%;
        animation: clockwise 8s linear infinite;   
    }

    #right-arrow-circle {
        right: 5%;
        animation: counterclockwise 8s linear infinite;
    }

    #left-arrow-circle, #right-arrow-circle {
        scale: 1;
        position: absolute;
        z-index: 5;
        width: 8vw;
    }

    /* ----------------------------------------------------------------------------------------- */

    #abt-inner-circle {
        position: absolute;
        scale: 0.3;

        width: 45vw;
        height: auto;

        animation: 
            abt-circles 6s linear,
            clockwise 15s linear infinite;
    }

    #abt-outer-circle {
        position: absolute;
        scale: 0.5;

        width: 60vw;
        height: auto;

        animation: 
            abt-circles 6s linear,
            counterclockwise 30s linear infinite;
    }

    #frame-outside {
        width: 70%;
        left: 50%;
    }

    #frame-inside {
        mask-image: url(../../images/vfx/ui-frame-2-fill-in.svg);
        mask-size: 90%;
        mask-repeat: no-repeat;

        width: 77%;
        left: 54%;
        opacity: 0.4;
    }

    #ui-frame-2 {
        width: 70%;
        mask-repeat: no-repeat;
        mask-size: 100%;
        transform-origin: center;
    }

    #ui-frame-2 img {
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .orb#light-blue {
        top: 26vh;
        left: -32vw;
        width: 60%;
        opacity: 0.75;

        animation: orb-pulse 10s linear infinite;
    }

    .orb#pink {
        top: 56vh;
        right: -30vw;
        width: 60%;
        opacity: 0.75;

        animation: orb-pulse 18s linear infinite;
    }

    .orb#purple {
        top: 88vw;
        left: -28vw;
        width: 45%;
        opacity: 0.6;

        animation: orb-pulse 14s linear infinite;
    }
}

/* Mobile UI ----------------------------------------------------------------------------------- */

@media(max-width: 700px) {

    main { margin-top: 8%; }

    main > div { padding-bottom: 65%; }

    .dev-slideshow { display: none; }

    main p { padding: 0 1%; }

    main > div > div {
        position: absolute;
        background: linear-gradient(-45deg, #0A53F22A, #C600A53E);
        width: 45%;
        min-width: 70%;
        min-height: 36vw;
        padding: 0 3%;
        right: 20%;
        text-align: left;
    }

    main > div p {
        text-align: left;
        font-size: 2.4vw;
        margin: 3% 4%;
    }

    main > div hr { display: none; }

    main > div h1 {
        font-size:  6.25vw;
        padding-left: 4%;
        margin-left: 1%;
    }

    main img {
        position: absolute;
        top: 58vw;
        left: 36%;
        width: 60%;
        height: auto;
    }

    main > p { padding: 8% 8%; }

    .dev-box > div { margin: 5% 8%; }

    .dev-boxes {
        padding: 10% 0 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .dev-box {
        width: 75vw;
        height: 95vw;
        text-align: left;
        position: relative;
        background-size: cover;
        background-position-x: center;
    }

    .dev-box > div > div { 
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .profile-pic {
        display: inline-block;
        position: relative;
        width: 25vw;
        height: 25vw;
        overflow: hidden;
    }

    .profile-pic img {
        width: auto;
        height: 120%;
        position: relative;
    }

    .dev-box h2 {
        font-size: 9vw;
        padding: 4% 0;
    }

    .dev-box h3 {
        font-size: 4vw;
        padding-top: 8%;
    }

    .dev-box h4 { font-size: 5vw; }

    .dev-box p {
        font-size: 3vw;
        margin: 5% 0 7%;
    }

    .dev-box a { 
        font-size: 3vw;
        padding: 2vw 5.25vw; 
    }

    /* ----------------------------------------------------------------------------------------- */

    .dev-box.adrian {
        background-image: url(../../images/devs/Minimal.jpg);
        right: 7%;
        z-index: 4;
    }

    .dev-box.adrian h2 { color: #3A5A7D; }

    .dev-box.adrian h3 { color: #C21471; }

    .dev-box.adrian h4 { color: #A6294F; }

    .adrian .profile-pic img { bottom: 12%; }

    /* ----------------------------------------------------------------------------------------- */

    .dev-box.dan {
        background-image: url(../../images/devs/Nordic.jpg);
        z-index: 5;
        left: 5%;
        margin: -6% 0;
    }

    .dan .dev-name { text-align: right; }

    .dev-box.dan h2 { color: #1D71F2; }

    .dev-box.dan h3 { color: #19C3FB; }

    .dev-box.dan h4 { color: #1C9CF6; }

    .dan .profile-pic img { 
        bottom: 12%;
        right: 3%; 
    }

    .dev-box.dan a { left: 50%; }

    /* ----------------------------------------------------------------------------------------- */

    .dev-box.speedster {
        background-image: 
            linear-gradient(#72ab948f, #b6ddac83),
            url(../../images/devs/cosmic_cove.png);

        z-index: 6;
        margin: -3% 0;
        height: 115vw;
    }

    .dev-box.speedster h2 { 
        color: #131FAA;
        font-size: 5vw; 
    }

    .dev-box.speedster h3 { color: #25540d; }

    .dev-box.speedster h4 { color: white; }

    .dev-box.speedster p { color: #040b5e; }

    .speedster .profile-pic img { 
        bottom: 10%;
        right: 10%; 
    }

    /* ----------------------------------------------------------------------------------------- */

    .dev-box.ryan {
        background-image: linear-gradient(#1C48F669, #1D2BF266), url(../../images/devs/deep-blue-sky.png);
        z-index: 7;
        left: 8%;
        margin: -6% 0;
    }

    .ryan .dev-name { text-align: right; }

    .dev-box.ryan h2 { color: #BDFCFE; }

    .dev-box.ryan h3 { color: #66D9D1; }

    .dev-box.ryan h4 { color: #98F4F4; }

    .ryan .profile-pic img { 
        bottom: 16%;
        right: 22%;
        height: 145%; 
    }

    .dev-box.ryan a { left: 50%; }
}

@media(max-width: 400px) {
    main img { top: 60vw; }
}

/* --------------------------------------------------------------------------------------------- */

@keyframes abt-circles {
    0% { opacity: 0; }
    60% { opacity: 0; }
    100% { opacity: 1; }
}