@font-face {
  font-family: "Averox";
  src: url("./../font/Averox-rgY9y.ttf");
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  color: rgba(193, 101, 75, 0.7);
  background-image: url("../imgs/red_planet_bg.jpg");
  background-repeat: no-repeat;
  background-color: black;
  min-height: 100vh;
  background-size: cover;
}

h1 {
  font-size: 75px;
}

h3 {
  font-family: "Averox", Helvetica, Arial, sans-serif;
}

/* ***** Check for if Javascript is enabled or not ******

/* Start off with display none. If JavaScript is working, the JavaScript code will change the display to flex. Else, the main content will not display and the noscript image will show up. */
#main {
  display: none;
}

/* If JavaScript doesn't work, display an image */
#noJavaScript > img {
  height: 400px;
  width: 500px;
  border-radius: 50px;
}

/*  End with javascript and no javascript code */
/* ******************************************* */

/******* Main Content & Carousel  ***************/
div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div > header,
.rowLabel,
#tableHeader {
  font-size: 50px;
  font-family: "Averox", Helvetica, Arial, sans-serif;
  align-content: center;
}

form > div {
  flex-direction: row;
  margin: 20px;
  justify-content: center;
}

/* Calendar picker & submit button */
#start,
#submitBut {
  padding: 3px;
  margin: 3px;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0);
  color: rgba(193, 101, 75, 0.8);
  border: 1px solid rgb(193, 101, 75, 0.8);
}

/* since using a black background, need to invert the 
calendar icon so user can see it */
::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
}

/* Table styling */
.rowLabel,
#tableHeader {
  font-size: 30px;
  font-weight: 700;
}

#solNum,
.rowVal {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
}

table,
th,
td {
  border: 1px solid rgba(193, 101, 75, 0.8);
  border-collapse: collapse;
}

/* center the frames & table in the carousel */
.carousel-inner {
  flex-direction: row;
}

/* put border around the 3 carousel images and give a large radius*/
.borderImgs {
  border: 4px solid rgba(193, 101, 75, 0.8);
  border-radius: 50px;
}

/* some top margin for the animated rover & table */
#carRover {
  margin-top: 100px;
}

#tableForm {
  margin-top: 15px;
}

/* **** Mobile Responsive code  *********** */
/* For cell phones */
@media screen and (max-width: 500px) {
  .borderImgs {
    border: 4px solid rgba(193, 101, 75, 0.8);
    border-radius: 50px;
    width: 400px;
  }
  div > header,
  .rowLabel,
  #tableHeader {
    font-size: 15px;
    font-family: "Averox", Helvetica, Arial, sans-serif;
    align-content: center;
    font-weight: 700;
  }

  #solNum,
  .rowVal {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
  }
  h1 {
    font-size: 30px;
  }

  h3 {
    font-size: 14px;
  }
}