/* basic media stuff */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    html,
    body {
        width: 100vw !important;
        overflow-x: hidden !important;
    }
}


/* setting up fonts for the webpage */

@font-face {
    font-family: "neutra";
    src: url("../fonts/neutratext-book.woff") format("woff");
}

@font-face {
    font-family: "neutra-bold";
    src: url("../fonts/neutratext-bold.woff") format("woff");
}

@font-face {
    font-family: "robot";
    src: url("../fonts/Robot Renegades.woff") format("woff");
}


/* setting up basic properties for html and body */


/* making scrolling smooth */

html {
    scroll-behavior: smooth;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: #AA0723;
    font-family: "neutra-bold";
}


/* hiding scroll bar */


/* body::-webkit-scrollbar {
    display: none;
    width:0;
} */

body::-webkit-scrollbar {
    width: 1.9vw;
    background-color: rgba(255, 255, 255, 0);
}

body::-webkit-scrollbar-track,
body::-webkit-scrollbar-thumb {
    border: 0.85vw solid rgba(255, 255, 255, 0);
    background-clip: padding-box;
}

body::-webkit-scrollbar-track {
    background-color: #790218;
}

body::-webkit-scrollbar-thumb {
    background-color: #F9D38B;
    border: 0.6vw solid transparent;
    border-radius: 3vw;
    transition: 1s ease-in-out;
}

body::-webkit-scrollbar-thumb:hover {
    border: 0.45vw solid transparent;
}


/* start of of SECTION 1 CSS. Splash Page */


/* container for section 1, splash page */

#splash {
    height: 100%;
    width: 100%;
}


/* light red split left half of the background */

.leftBG1 {
    background-color: #AA0723;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 52%;
    position: absolute;
    z-index: 0;
}


/* dark red split right half of the background */

.rightBG1 {
    background-color: #790218;
    padding: 0;
    margin: 0;
    margin-left: 50%;
    height: 100%;
    width: 50%;
    position: absolute;
    z-index: 0;
}


/* textured image background for the page */

.texture {
    background-image: url("../images/background-texture.png");
    background-size: 9vw 9vw;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    position: absolute;
}


/* top navigation including the team logo, and the contact button */

.topnav {
    z-index: 100;
}


/* the 2381 black and white logo on the top left of the screen */

.logo2381 {
    position: absolute;
    top: 25px;
    left: 35px;
    width: 80px;
    height: 80px;
    border-radius: 10px;
}


/* the team logo in the top center of the screen*/

.teamLogo {
    color: #F9D38B;
    position: relative;
    border: 2px solid #F9D38B;
    padding: 6px;
    display: inline-block;
    margin-top: 0px;
    margin-top: 25px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 15px;
    z-index: 200;
}


/* get in touch button on the top right of the screen */

.contactUsButton {
    position: absolute;
    color: #F9D38B;
    font-size: 15px;
    right: 40px;
    top: 25px;
    z-index: 100;
    opacity: 1;
    transition: 0.2s ease-in-out;
    text-decoration: none;
    background-color: rgb(18, 91, 165);
    border-radius: 5px;
    padding: 10px;
}


/* hover effect for the contact button */

.contactUsButton:hover {
    background-color: #403F4C;
    cursor: pointer;
}


/* Text on the bottom right of the splash page which says VEX 2019 */

.vex2019text {
    position: absolute;
    float: right;
    color: #F9D38B;
    transition-delay: 0.5s;
    transition-duration: 1s !important;
    right: 40px;
    bottom: 31px;
    z-index: 100;
}


/* The word VEX which is bigger */

.vexText {
    font-size: 40px;
}


/* beige title that says Kernel Bye*/

.mainTitle1 {
    margin-top: 20px;
    position: relative;
    font-size: 70px;
    color: #F9D38B;
    text-align: center;
    z-index: 100;
    font-family: "neutra";
}


/* large text that saus 2381 */

.mainTitle2 {
    font-family: 'robot', sans-serif;
    margin-top: -45px;
    margin-right: 2.5%;
    position: relative;
    font-size: 240px;
    text-align: center;
    z-index: 100;
    opacity: 0.9;
    letter-spacing: 40px;
}


/* "23" in a darker text */

.mainTitle2dark {
    color: #790218;
}


/* "81" in a lighter text */

.mainTitle2light {
    color: #AA0723;
}


/* image of the robot in the center of the splash page */

.robotImage {
    margin-top: -317px;
    position: relative;
    z-index: 100;
    opacity: 0.85;
    width: 500px;
    height: 500px;
}


/* side navigation menu */

#sidenav {
    position: absolute;
    top: 30%;
    left: 45px;
    z-index: 100;
    transition: 1.5s ease-in-out;
    overflow: hidden;
}


/* container for links in the sidenav menu */

.sidenavContent {
    line-height: 30px;
}


/* Table datas in the sidenav menu containing links*/

.sidenavContent .menuTD {
    padding: 0.4vw 0;
    overflow: hidden;
    display: block;
    transition: 0.5s ease-in-out;
}


/* links in the sidenav menu */

.link {
    text-decoration: none;
    color: #F9D38B;
    font-size: 15px;
    opacity: 0.7;
    transition: 0.2s ease-in-out;
}


/* Hover effects for the links */

.link:hover {
    opacity: 1;
    font-size: 16px;
    padding-left: 5px;
}

#mobileNav .activeLink {
    font-weight: bold;
    font-size: 30px;
}

#mobileNav .activeLink:hover {
    font-size: 30px;
}

#mobileNav {
    display: none;
}


/* Special class for the link of the page which the use is currently on. (displays larger) */

.sidenavContent .activeLink {
    opacity: 1;
    font-size: 30px;
    padding-left: 5px;
}


/* container for the list of teams in the sidenav menu */

#menuTeamList {
    position: absolute;
    top: 34%;
    left: 0;
    margin-left: -30px;
    width: 30px;
    z-index: 200;
    transition: 0.75s ease-in-out;
    background-color: #F9D38B;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
    text-align: center;
    line-height: 30px;
    border-radius: 0 10px 10px 0;
    padding: 5px;
}


/* links in the menuteamlist */

#menuTeamList a {
    color: #790218;
    font-size: 20px;
}


/* section containing the sponser images */

.sponsorsContainer {
    height: 200px;
    position: relative;
    background-color: #AA0723;
    width: 100%;
    border-top: 10px solid #F9D38B;
    border-bottom: 10px solid #F9D38B;
}


/* used for spacing of the text */

.sponsorsSubContainer {
    margin-left: 75px;
    margin-top: 25px;
}


/* thanks to all our sponsors */

.sponsorsSubContainer h1 {
    color: #F9D38B;
    position: relative;
    font-family: 'neutra';
    font-size: 30px;
}


/* start of of SECTION 2 CSS. The information section about VRC */


/* container of the seconds section of the page */

#vexInfoSection {
    width: 100%;
}

#vexInfoSection .texture {
    height: 150%;
}


/*light red split left half of the background */

.leftBG2 {
    background-color: #AA0723;
    padding: 0;
    margin: 0;
    height: 40vw;
    width: 52vw;
    position: absolute;
    z-index: 0;
}


/*darkred split right half of the background */

.rightBG2 {
    background-image: linear-gradient(#790218, #AA0723 80%);
    padding: 0;
    margin: 0;
    margin-left: 50%;
    height: 40vw;
    width: 50%;
    position: absolute;
    z-index: 0;
}

.infoText {
    text-align: center;
    width: 80vw;
    margin-left: 10vw;
    margin-right: 10vw;
    position: absolute;
    padding-top: 4vw;
}

.infoText td {
    padding: 0 2.6vw;
    width: 33%;
}

.infoText .extraBottomPadding {
    padding-bottom: 2.1vw;
}

.infoText img {
    width: 5.2vw;
    height: 5.2vw;
}

.infoText h1 {
    color: #F9D38B;
    font-family: "neutra";
    font-size: 2vw;
}

.infoText p {
    color: #F9D38B;
    font-family: "neutra";
    font-size: 1.3vw;
}

.infoText a {
    background-color: #F9D38B;
    color: #AA0723;
    font-size: 1.3vw;
    font-weight: bold;
    font-family: "neutra";
    padding: 0.5vw 1vw;
    border: none;
    border-radius: 1.56vw;
    text-decoration: none;
}

.statsTable {
    text-align: center;
    width: 80vw;
    margin-left: 10vw;
    margin-right: 10vw;
    position: absolute;
    margin-top: 31.3vw;
    padding-top: 5vw;
}

.statsTable td {
    padding: 1.56vw 2.6vw;
    width: 33.3vw;
    text-align: left;
    font-family: 'neutra';
}

.statsTable .leftBox {
    background-color: #F9D38B;
    color: #AA0723;
    width: 48%;
}

.statsTable .leftBox h1 {
    font-size: 3vw;
}

.statsTable .leftBox p {
    font-size: 1.3vw;
    padding-top: 0.5vw;
}

.statsTable .leftBox hr {
    border-color: #AA0723;
    width: 20%;
    margin-left: 5%;
}

.statsTable .rightBox {
    background-color: #AA0723;
    color: #F9D38B;
    width: 28%;
}

.statsTable .rightBox table {
    color: #F9D38B;
}

.statsTable .rightBox td {
    text-align: center;
    padding: 0;
}

.statsTable .rightBox h1 {
    margin-top: 2.1vw;
    font-size: 7vw;
    line-height: 0;
}

.statsTable .rightBox h2 {
    font-size: 2vw;
}


/* start of of SECTION 3 CSS. The 2381 team gallery/slider  */


/* container of section 3, team gallery */

#teamImage {
    width: 100vw;
    height: 45vw;
    padding: 0;
    margin: 0;
}

#teamImage .texture {
    height: 45vw;
}

#teamImage img {
    width: 80vw;
    height: 36.5vw;
    margin-top: 4vw;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    border-top: 0.6vw solid #F9D38B;
    border-bottom: 0.6vw solid #F9D38B;
}

.infoCards {
    height: 42vw;
    width: 100vw;
}

.infoCards .texture {
    height: 42vw;
}

.infoCards table {
    width: 100vw;
    position: absolute;
    padding-top: 0;
    font-family: 'neutra';
    margin-left: 5vw;
}

.infoCards td {
    padding: 0 1.7vw;
    background-color: #F9D38B;
    color: #AA0723;
    width: 16vw;
    margin: 1.2vw;
    display: inline-block;
    height: 38vw;
    transition: 0.2s ease-in-out;
}

.infoCards td:hover {
    transition: 0.2s ease-in-out !important;
    transition-delay: 0s !important;
    transform: translateY(-15px) !important;
    background-color: #AA0723;
    color: #F9D38B;
}

.infoCards td:hover hr {
    background-color: #F9D38B;
    border-color: #F9D38B;
}

.infoCards h2 {
    font-size: 2.8vw;
}

.infoCards p {
    font-size: 1.1vw;
}

.infoCards hr {
    border-color: #AA0723;
    width: 30%;
    background-color: #AA0723;
}

.vexGameInfo {
    width: 100vw;
    height: 55vw;
}

.vexGameInfo .texture {
    height: 55vw;
}

.vexGameInfo hr {
    border-color: #F9D38B;
    width: 25%;
    margin-left: 0;
}

.vexGameInfo table {
    position: absolute;
    color: #F9D38B;
    font-family: 'neutra';
    width: 90vw;
    margin-left: 5vw;
    margin-top: 1vw;
}

.vexGameInfo td {
    padding: 1vw 1vw;
    padding: 30px;
}

.vexGameInfo p,
.vexGameInfo a {
    font-size: 1.1vw;
    color: #F9D38B;
}

.vexGameInfo h1 {
    font-size: 3vw;
}

.vexGameInfo iframe {
    width: 36vw;
    height: 20vw;
    border-radius: 1vw;
}

.vexGameInfo .backgroundRed {
    background-color: #AA0723;
}

.vexGameInfo .backgroundYellow {
    background-color: #F9D38B;
}

#teams {
    height: 50vw;
    width: 100vw;
    border-bottom: 0.7vw solid #F9D38B;
}

#teams .texture {
    height: 50vw;
}

#teams .mobileOnly {
    display: none;
}

#teamsContainer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#teamContent td {
    padding: 30px;
}

#teamsContainer .tab {
    padding: 2vw 1.5vw 0.5vw 1.5vw;
    background-color: #F9D38B;
    transition: 0.1s ease-in-out;
    width: 5vw;
}

#teamsContainer .tab h1 {
    font-family: 'neutra';
    color: #AA0723;
    font-size: 2.3vw;
}

#teamsContainer .activeTab {
    background-color: #AA0723 !important;
    transform: translateX(0.8vw);
}

#teamsContainer .activeTab h1 {
    color: #F9D38B !important;
}

#teamsContainer .tab:hover {
    background-color: #AA0723;
    transform: translateX(0.8vw);
    cursor: pointer;
}

#teamsContainer .tab:hover h1 {
    color: #F9D38B;
}

#teamsContainer #teamInfo {
    background-color: #AA0723;
    width: 75vw;
    height: 45vw;
}

#teamsContainer #teamInfo img {
    width: 40vw;
    border-radius: 0.52vw;
}

#teamsContainer #teamInfo h1 {
    color: #F9D38B;
    font-size: 7vw;
    padding-top: 3vw;
    font-family: 'neutra';
    line-height: 0;
    padding-bottom: 0.8vw;
}

#teamsContainer #teamInfo hr {
    border-color: #F9D38B;
    background-color: #F9D38B;
    width: 50%;
    margin-bottom: 2.4vw;
    float: left;
}

#teamsContainer .backgroundYellow {
    background-color: #AA0723;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    padding: 1.5vw;
    height: 35vw;
    width: 27vw;
}

#teamsContainer #teamInfo p {
    color: #F9D38B;
    font-size: 1.4vw;
    font-family: 'neutra';
}

#teamsContainer #teamInfo h2 {
    color: #F9D38B;
    font-size: 2.1vw;
    font-family: 'neutra';
    line-height: 0.5em;
}

#teamsContainer #teamInfo li {
    color: #F9D38B;
    font-size: 1.4vw;
    font-family: 'neutra';
}

#teamsContainer #teamInfo a {
    color: #F9D38B;
    font-size: 1.4vw;
    font-family: 'neutra';
}


/* start of of SECTION 4 CSS. Slideshow gallery*/


/* container of section 4, slideshow gallery */

.slideshowContainer {
    height: 50vw;
    width: 100vw;
}


/* slideshow area which displays the images in the slider */

.slideshow {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    padding: 0;
    margin: 0;
    position: relative;
}


/* container of images in the slideshow */

.slides {
    width: 1000%;
    height: 100%;
    display: flex;
}


/* class for a slide inside the slideshow */

.slide {
    width: 10%;
    transition: 1.2s ease-in-out;
}


/* class for images in the slideshow */

.slide img {
    position: absolute;
    width: 100%;
}


/* container on the bottom of the slideshow which contains the buttons to switch slides */

.slideNavigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}


/* the clickable buttons in the slidenavigation to change slides */

.bar {
    width: 50px;
    height: 10px;
    border: 4px solid #F9D38B;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}


/* hover effect for bars */

.bar:hover {
    background: #F9D38B;
}


/* input buttons for bars */

input[name="r"] {
    position: absolute;
    visibility: hidden;
}


/* start of of SECTION 6 CSS. Footer*/


/* container for the footer section of the page */

.footer {
    width: 100%;
    height: 250px;
    background-color: #AA0723;
    position: relative;
    border-top: 10px solid #F9D38B;
}


/* text logo that says 2381 robotics in a rectangle */

.footer .logo {
    margin-top: 35px;
    color: #F9D38B;
    position: relative;
    border: 2px solid #F9D38B;
    padding: 6px;
    font-size: 15px;
    z-index: 200;
    display: inline-block;
}


/* media image links in the footer (insta, github, youtube) */

.footer img {
    position: relative;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    padding: 15px;
}


/* button which brings the user back to top, in the bottom right of the screen */

#topButton {
    padding: 10px;
    background-color: #F9D38B;
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 300;
    border-radius: 50%;
    opacity: 0;
    bottom: -50px;
    transition: 0.3s ease-in-out;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
}