/* Overwrite some properties */

body {
    background: #242424 url('../images/Background.png');
    background-size: 250px;
}

#LoadingScreen {
    visibility: inherit;
    animation: none;
}

/* Animated Styles */

#OrangeBKGD {
    position: absolute;
    width: 80vw;
    height: 125vh;
    left: -14vw;
    top: -18vh;
    z-index: -3;

    animation: Intro_BKGD 1s ease .25s forwards;
}

@keyframes Intro_BKGD {
    0% {
        z-index: -1;
        width: 145vw;
        height: 150vh;
    }

    99% {
        z-index: -1;
        width: 80vw;
        height: 125vh;
    }

    100% {
        z-index: -3;
    }
}

#Circle1 {
    position: absolute;
    width: 17vw;
    height: 17vw;
    left: -3vw;
    top: 20vh;

    /* White Linear */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);

    border-radius: 9vw;
    display: flex;
    justify-content: center;
    align-items: center;

    animation: Intro_Circles 1.5s ease forwards;
}

#InnerCircle1 {
    width: 68%;
    height: 68%;

    /* White Linear */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);

    border-radius: 6vw;

    animation: 5s CircleScaling infinite cubic-bezier(.6, .5, .4, .5);
}

#Circle2 {
    position: absolute;
    width: 17vw;
    height: 17vw;
    left: 29.5vw;
    top: 74.5vh;

    background-image: url("../images/DottedCircle.png");
    background-size: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    animation: Intro_Circles 1.5s ease .25s forwards;
}

#InnerCircle2 {
    width: 79%;
    height: 79%;

    /* White Linear */
    background: rgba(255, 255, 255, 0.1);

    border-radius: 6.5vw;
}

@keyframes Intro_Circles {
    0% {
        margin: 4.25vw;
        width: 8.5vw;
        height: 8.5vw;
        opacity: 0;
    }

    33% {
        margin: 4.25vw;
        width: 8.5vw;
        height: 8.5vw;
        opacity: 0;
    }

    100% {
        margin: 0vw;
        width: 17vw;
        height: 17vw;
        opacity: 1;
    }
}

@keyframes CircleScaling {
    0% {
        transform: scale(.95);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(.95);
    }
}

@keyframes CircleRotating {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#Icons {
    top: 2vh;

    animation: Intro_SlideFromTop 1s ease .25s forwards;
}

@keyframes Intro_SlideFromTop {
    from {
        top: -15vh;
    }

    to {
        top: 2vh;
    }
}

#FIRSTIllinois {
    position: absolute;
    height: 5vw;
    left: 1.5vw;
    top: inherit;
}

#FTCLogo {
    position: absolute;
    height: 5vw;
    left: 9.5vw;
    top: inherit;
}

#MainText {
    left: 2.5vw;

    animation: Intro_SlideFromLeft 1s ease .25s forwards;
}

@keyframes Intro_SlideFromLeft {
    from {
        left: -35vw;
    }

    to {
        left: 2.5vw;
    }
}

#TitleText {
    position: absolute;
    width: 35vw;
    left: inherit;
    top: 30vh;

    font-family: Jura;
    font-style: normal;
    font-weight: 600;
    font-size: 3vw;
    line-height: 8.5vh;
    display: flex;
    align-items: center;

    /* White */
    color: #FFFFFF;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 4vh 0px;
}

#VersionText {
    position: absolute;
    height: 10vh;
    width: 35vw;
    left: inherit;
    margin-left: .75vw;
    top: 60.5vh;

    /* Nav Buttons */
    font-family: Jura;
    font-style: normal;
    font-weight: normal;
    font-size: 1vw;
    line-height: 2vh;
    /* identical to box height */

    /* White */
    color: #FFFFFF;
}

#NavItems {
    position: absolute;
    top: 0px;
    right: 95px;
    display: flex;
    z-index: -2;
}

.NavButtons {
    margin: 2vh .25vw;
    height: 30px;
    width: 33.7px;
    font-size: 17px;
    
    /* Included is button1 style from default.css */
}

.NavButtonContext {
    position: absolute;
    z-index: 1;
    width: 18.5px;
    margin-left: .25vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    
    pointer-events: none;

    transition-duration: .1s;
    height: 29.5px;
    opacity: 0;
}

.NavButtons:hover > div {
    height: 32.5px;
    opacity: 1;
}

.NavButtons > svg > path {
    transition-duration: .1s;
}

.NavButtons:hover > svg > path {
    fill: #242424;
}

.NavButtonContext > div {
    border: 2px #ff9800 solid;
    background-color: #242424;
    box-shadow: #00000080 2.5px 2.5px;
    padding: 1px 5px;

    font-size: 17px;
    color: white;
    white-space: nowrap;
    text-wrap: nowrap;
}

#howToBttn {
    width: 35px;
    height: 35px;
    font-size: 25px;
    border-color: #FFD500;
    background-color: #4C3F00;
}

#howToBttn:hover {
    background-color: #FFD500;
}

.howToIconBKGD {
    color: #242424;
    transition-duration: 0.4s;
}

#howToBttn:hover > .howToIconBKGD {
    color: #FFD500;
}

#VRSLogo {
    position: absolute;
    top: 2vh;
    right: .75vw;
    width: 85px;
    border: 2px solid gray;
    border-radius: 8px;
    z-index: -2;
}

/* Styles for the main selections */

.selections {
    position: absolute;
    display: inline-flex;
    justify-content: center;
}

.selectionPanel {
    width: 16vw;
    height: 38.5vh;
    border-radius: 2vw;
    color: #242424;
    text-align: center;
    font-family: Jura;
    font-weight: bold;
    text-decoration: none;
    font-size: 2.25vw;
    margin: 0px 1vw;
    margin-bottom: 0px;
    cursor: pointer;
    color: rgb(255, 255, 255);
    text-shadow: .2vw .2vw .5vw #000000;
    border: .15vw solid rgb(255, 255, 255);
    padding: 0px;

    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    /*Temporary*/
    background-color: #242424;
}

.selectionPanel:disabled {
    border-color: rgb(255, 255, 255, .5);
    color: rgb(255, 255, 255, .5) !important;
    cursor: auto;
}

.selectionPanel:disabled > .selectionIcon {
    opacity: .5;
}

.selectionPanel:hover {
    transition-duration: 0.4s;
    color: #00fd72;
}

.selectionPanel:focus {
    transition-duration: 0.4s;
    color: #00fd72;
    outline: none;
    box-shadow: none;
}

#learnButton {
    animation: Intro_Selections 1.5s ease forwards;
}

#competeButton {
    animation: Intro_Selections 1.5s ease .05s forwards;
}

#challengeButton {
    animation: Intro_Selections 1.5s ease .1s forwards;
}

#programButton {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../images/pagePreviews/programming.png") no-repeat center;
    background-size: 66vh;

    animation: Intro_Selections 1.5s ease .15s forwards;
}

#arenaButton {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../images/pagePreviews/arena.png") no-repeat center;
    background-size: 66vh;

    animation: Intro_Selections 1.5s ease .2s forwards;
}

#configButton {
    animation: Intro_Selections 1.5s ease .25s forwards;
}

@keyframes Intro_Selections {
    0% {
        position: relative;
        top: 15vh;
        opacity: 0;
    }

    50% {
        position: relative;
        top: 15vh;
        opacity: 0;
    }

    100% {
        position: relative;
        top: 0px;
        opacity: 1;
    }
}

.selectionTitle {
    padding-top: 6vh;
    padding-bottom: 6vh;
}

.selectionIcon {
    flex: 0 1 9vw;
    min-height: 0;
    margin-bottom: 3vh;
}

.selectionHint {
    width: 10vw;
    padding: 1.5vh .1vw;
    margin-bottom: 1vh;
    color: black;
    background-color: white;
    border-radius: 100px;
    text-align: center;
    font-family: Jura;
    text-decoration: none;
    font-size: 1.25vw;
    font-weight: normal;
    text-shadow: none;
}

.selectionDesc {
    height: 0px;
    
    background-color: white;
    font-size: 1.25vw;
    color: black;
    text-shadow: none;
    padding-left: .5vw;
    padding-right: .5vw;
    
    min-width: fit-content;
    min-width: -webkit-fill-available;
}

@keyframes DescReveal {
    from {
        height: 0vw;
        padding-top: 0vw;
        margin-top: 0vw;
    }

    to {
        height: 6.5vw;
        padding-top: .75vw;
        margin-top: 2vh;
    }
}

@keyframes DescHide {
    from {
        height: 6.5vw;
        padding-top: .75vw;
        margin-top: 2vh;
    }

    to {
        height: 0vw;
        padding-top: 0vw;
        margin-top: 0vw;
    }
}

/* Config Button */

#RobotConfig {
    /* Auto layout */
    flex-direction: row;
    align-items: center;

    position: absolute;
    height: 6.5vh;
    left: inherit;
    top: 62vh;

    padding-left: 1.5vw;
    padding-right: 1.5vw;

    font-family: Jura;
    font-style: normal;
    font-weight: 500;
    font-size: 1.5vw;
    line-height: 28px;
    display: flex;
    justify-content: center;

    /* White */
    color: #FFFFFF;

    /* Linear Style 1 */
    background: linear-gradient(200deg, #FF7300 -14.49%, #FF2702 112.73%);

    border: none;
    cursor: pointer;
    
    text-shadow: .2vw .2vw .5vw #000000;
    border-radius: 2vw;
    overflow: hidden;
    white-space: nowrap;
    
    animation: ConfigFade 1.5s ease forwards;
}

#RobotConfig:hover:hover {
    color: #7ffdb8;
    transition-duration: 0.4s;
    border: .15vw white solid;
}

#RobotConfig:focus:focus {
    color: #7ffdb8;
    transition-duration: 0.4s;
    border: .15vw white solid;
    outline: none;
    box-shadow: none;
}

@keyframes ConfigFade {
    0% {
        max-width: 0vw;
        opacity: 0;
    }

    75% {
        max-width: 0vw;
        opacity: 0;
    }
    
    100% {
        max-width: 23.5vw;
        opacity: 1;
    }
}