:root {
  --funky-blue: #000F44;
  --astronaut: #2b3d7b;
  --oxford-blue: #0E1428;
  --dim-gray:  #626267;
  --ivory: #FFFFEE;
  --xiketic: #111122;
  --red-crayola: #e84855;
  --purple: #6824D3;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;800&display=swap');

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
 display: none;
}

h1 {
  font-weight: 800;
  font-size: 7vw;
}

h2 {
  font-size: 4vw;
}

h3 {
  font-size: 3vw;
}


body {
  opacity: 0.0;
  background-color: #242424;
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;
  overflow-x: hidden;
  color: ivory;
  font-family: OpenSans, Arial;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  transition: opacity 0.2s;
}

#background-div {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(70,1,105,1);
    background-image: linear-gradient(62deg, #460169 0%, #000652 89%);
  z-index: -1;
  pointer-events: none;
}

.disclaimer {
  position: absolute;
  left: 2vw;
  top: 95vh;
  opacity: 0.75;
}

/* Loading Anim Stuff */

#loa-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: -100vw;
  background: #242424;
  z-index: 10000;
  pointer-events: none;
  opacity: 1.0;
  transition: opacity 0.3s;
}

#loa-image {
  position: absolute;
  width: 25vw;
  height: 25vw;
  left: 50vw;
  top: 45vh;
  opacity: 1.0;
  transition: opacity 0.2s;
}

#loa-image img {
  transform: translate(-50%, -50%);
  width: 100%;
}

#loa-text1 {
  position: absolute;
  width: max-content;
  max-width: 90vw;
  height: 25vw;
  left: 50vw;
  top: 71vh;
  opacity: 0.0;
  transition: opacity 0.2s;
  pointer-events: none;
  text-align: center;
}

#loa-text1 h2 {
  font-size: 3.5vh;
  transform: translate(-50%, -50%);
  width: 100%;
}

#loa-text2 {
  position: absolute;
  width: max-content;
  max-width: 90vw;
  left: 50vw;
  height: max-content;
  top: 85vh;
  opacity: 0.0;
  transition: opacity 0.2s;
  pointer-events: none;
  text-align: center;
}

#loa-button {
  font-size: 6vh;
  transform: translate(-50%, -50%);
  padding: 1vh;
  width: 100%;
  height: 100%;
  background-color: #737373;
  border-radius: 1vw;
  cursor: pointer;
}

#loa-button:hover {
  background-color: #999999;
}

#loa-button:active {
  background-color: #00cc66;
}

/* Menu Related */

#menu-bar {
  height: 3vh;
  left: 0%;
  position: fixed;
  width: 100vw;
  background: #242424;
  overflow: hidden;
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  z-index: 1000;
  /*Transition Timings*/
  transition: height 0.5s, box-shadow 0.5s;
}

.menu-button {
  cursor: pointer;
}

.menu-button:hover {
  background-color: #404040;
}

.menu-button:active {
  background-color: #666666;
}

/* HOME BUTTON */

#home-button {
  display: inline-block;
  position: absolute;
  opacity: 0.0;
  pointer-events: none;
  left: 0vw;
  height: 7vh;
  width: 13vw;
  /* Transition Timings */
  transition: opacity 0.25s ease;
  /*transition-delay: 0.05s;*/
}

#nav-button-img-home {
  top: 10%;
  height: 75%;
  position: absolute;
  /* Transition Timings */
  transition: height 0.6s;
}

#nav-button-img-home img  {
  height: 100%;
}

#nav-button-text-home {
  display: inline-block;
  position: absolute;
  margin-left: 4vw;
  font-size: 2vw;
  overflow: hidden;
  white-space: nowrap;
  top: 0.5vh;
}

/* HOME BUTTON END*/

/* DESIGN BUTTON */

#design-button {
  display: inline-block;
  position: absolute;
  opacity: 0.0;
  pointer-events: none;
  left: 13.5vw;
  height: 7vh;
  width: 10.8vw;
  /* Transition Timings */
  transition: opacity 0.25s ease;
  /*transition-delay: 0.07s;*/
}

#nav-button-img-design {
  top: 10%;
  height: 75%;
  position: absolute;
}

#nav-button-img-design img  {
  height: 100%;
}

#nav-button-text-design {
  display: inline-block;
  position: absolute;
  margin-left: 4vw;
  font-size: 2vw;
  overflow: hidden;
  white-space: nowrap;
  top: 0.5vh;
}

/* DESIGN BUTTON END*/

/* PROTOTYPE BUTTON */

#prototype-button {
  display: inline-block;
  position: absolute;
  opacity: 0.0;
  pointer-events: none;
  left: 24.8vw;
  height: 7vh;
  width: 13vw;
  /* Transition Timings */
  transition: opacity 0.25s ease;
  /*transition-delay: 0.09s;*/
}

#nav-button-img-prototype {
  top: 10%;
  height: 75%;
  position: relative;
}

#nav-button-img-prototype img  {
  height: 100%;
}

#nav-button-text-prototype {
  display: inline-block;
  position: absolute;
  margin-left: 3.8vw;
  font-size: 2vw;
  overflow: hidden;
  white-space: nowrap;
  top: 0.5vh;
}

/* PROTOTYPE BUTTON END*/

/* CONTACT BUTTON */

#contact-button {
  display: inline-block;
  position: absolute;
  opacity: 0.0;
  pointer-events: none;
  left: 38.3vw;
  height: 7vh;
  width: 11.8vw;
  /* Transition Timings */
  transition: opacity 0.25s ease;
  /*transition-delay: 0.11s;*/
}

#nav-button-img-contact {
  top: 10%;
  height: 75%;
  position: relative;
}

#nav-button-img-contact img  {
  height: 100%;
}

#nav-button-text-contact {
  display: inline-block;
  position: absolute;
  margin-left: 4vw;
  font-size: 2vw;
  overflow: hidden;
  white-space: nowrap;
  top: 0.5vh;
}

/* CONTACT BUTTON END*/

/* CREDITS BUTTON */

#credits-button {
  display: inline-block;
  position: absolute;
  opacity: 0.0;
  pointer-events: none;
  right: 0vw;
  height: 7vh;
  width: 10.5vw;
  /* Transition Timings */
  transition: opacity 0.25s ease;
  /*transition-delay: 0.13s;*/
}

#nav-button-img-credits {
  top: 10%;
  height: 75%;
  position: relative;
}

#nav-button-img-credits img  {
  height: 100%;
}

#nav-button-text-credits {
  display: inline-block;
  position: absolute;
  margin-left: 3.8vw;
  font-size: 2vw;
  overflow: hidden;
  white-space: nowrap;
  top: 0.5vh;
}

/* CREDITS BUTTON END*/

/* End Menu Related */

/* Credits Related */

#credits-container {
  padding-top: 10vh;
  position: fixed;
  left: 100vw;
  width: 100vw;
  height: 100vh;
  opacity: 0.0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 1100;
  /* Transition Timings */
  transition: opacity 0.2s;
}

#dismiss-credits {
  background-image: url("../img/LabelX.svg");
  position: absolute;
  width: 3.5vw;
  height: 3.5vw;
  right: 29vw;
  top: 8vh;
  cursor: pointer;
  z-index: 1000;
}

#dismiss-credits:hover {
  background-image: url("../img/LabelX-Hover.svg");
}

#credits-content {
  background-color: #4d001f;
  top: 10vh;
  padding: 1%;
  width: 40vw;
  height: 80vh;
  border-radius: 5%;
  margin-left: auto;
  margin-right: auto;
  top: 10vh;
}

#credits-scroll-mask {
  padding: 1%;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 50% 50%;
  grid-row-gap: 1%;
  grid-auto-rows: 20vh;
  width: 100%;
  height: 80vh;
  border-radius: 5%;
  margin-left: auto;
  margin-right: auto;
  top: 10vh;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  -webkit-mask-image: linear-gradient(0deg, transparent 4%, black 15%);
  mask-image: linear-gradient(0deg, transparent 4%, black 15%);
  padding-bottom: 15%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#credits-scroll-mask::-webkit-scrollbar {
  display: none;
}

.grid-item-cm {
  background-color: #660029;
  text-align: center;
}

.grid-item-cm img {
  height: 100%;
  padding: 3%;
}

.grid-item-cm h3 {
  font-size: 2vw;
  padding-top: 7%;
  font-weight: 800;
}

.grid-item-cm p {
  font-size: 1.3vw;
  padding-top: 1%;
}

.cg-l {
  border-radius: 2vh 0% 0% 2vh;
}

.cg-r {
  border-radius: 0% 2vh 2vh 0%;
}

.grid-credits-links {
  display: grid;
  grid-auto-flow: column;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
  height: 25%;
  overflow: hidden;
  grid-column-gap: 2%;
}

.grid-credits-links-item {
  background-color: #800033;
  height: 5vh;
  border-radius: 1vh;
  cursor: pointer;
}

.grid-credits-links-item:hover {
  background-color: #99003d;
}

.grid-credits-links-item:active {
  background-color: #b30047;
}

.grid-credits-links-item img {
  opacity: 0.7;
  height: 100%;
  padding: 0.5vh;
}

/* END Credits Related */

/* Nav Indicator */

#nav-indicator {
  pointer-events: none;
  position: fixed;
  opacity: 1.0;
  height: 3vh;
  width: 3vh;
  left: 0.2vh;
  z-index: 1000;
  /* Transition Timings */
  transition: opacity 0.05s;
}

/* End Nav Indicator */

/* Share Button Styling */

.share-button {
  position: absolute;
  border-radius: 1vw;
  top: 15vh;
  left: 30vw;
  width: 6vw;
  opacity: 0.5;
  cursor: pointer;
}

.share-button:hover {
  opacity: 0.7;
}

.share-button:active {
  opacity: 0.8;
}

.share-button img {
  width: 100%;
}

/* End Share Button Styling */

/* Nav Arrow Related */

#nav-arrow-up {
  background-image: url("../img/NavArrowUp.svg");
  cursor: pointer;
  position: fixed;
  margin-top: 9vh;
  right: 1vw;
  width: 3.5vw;
  height: 3.5vw;
  z-index: 1000;
  opacity: 0.0;
  transition: opacity 0.3s;
  pointer-events: none;
}

#nav-arrow-up:hover {
  background-image: url("../img/NavArrowUp-Hover.svg");
}

#nav-arrow-up:active {
  background-image: url("../img/NavArrowUp.svg");
}

#nav-arrow-down {
  background-image: url("../img/NavArrowDown.svg");
  cursor: pointer;
  position: fixed;
  margin-top: 89vh;
  right: 1vw;
  width: 3.5vw;
  height: 3.5vw;
  z-index: 1000;
  opacity: 1.0;
  transition: opacity 0.3s;
  pointer-events: all;
}

#nav-arrow-down:hover {
  background-image: url("../img/NavArrowDown-Hover.svg");
}

#nav-arrow-down:active {
  background-image: url("../img/NavArrowDown.svg");
}

/* END Nav Arrow Related */

/* MAIN CONTENT 1*/

#main-content-1 {
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin-top: 2vh;
  top: 0vh;
  transition: margin-top 0.5s, top 0.5s;
}

#main-content-1-dividerBG {
  position: absolute;
  width: 100vw;
  height: 95vh;
  background: #a84a73;
  background-image: linear-gradient(45deg, #0d0887, #41049d, #6a00a8, #8f0da4, #b12a90, #cb4679, #e16462, #f1834c, #fca636, #fcce25, #fcce25);
  overflow: hidden;
}

#tag-line {
  position: absolute;
  padding-top: 1.5%;
  padding-left: 30%;
}

#controller-inside-img {
  width: 40vw;
  position: absolute;
  top: 25%;
  margin-left: -6%;
}

#controller-inside-img img {
  width: 100%;
  transform: scaleX(-1);
}

#controller-shell-img  {
  width: 40vw;
  position: absolute;
  top: 18%;
  margin-left: 7%;
}

#controller-shell-img  img {
  width: 100%;
  transform: scaleX(-1);
}

#controller-modules-img {
  width: 40vw;
  position: absolute;
  top: 35%;
  margin-left: 20%;
}

#controller-modules-img img {
  width: 100%;
  transform: scaleX(-1);
}

#modular-tagline-line {
  position: absolute;
  width: 10vw;
  top: 35vh;
  right: 38vw;
  opacity: 0.2;
  transition: all 0.3s;
}

#durable-tagline-line {
  position: absolute;
  width: 35vw;
  top: 50vh;
  right: 38vw;
  opacity: 0.2;
  transition: all 0.3s;
}

#precise-tagline-line {
  position: absolute;
  width: 50vw;
  top: 68vh;
  right: 38vw;
  opacity: 0.2;
  transition: all 0.3s;
}

#extra-taglines-container {
  position: absolute;
  width: 25vw;
  left: 63vw;
  top: 32.5vh;
  height: 39vh;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.0);
}

#extra-taglines-container h4 {
  font-size: 1.5vw;
}

#modular-tagline-content {
  position: absolute;
  border-radius: 2vh;
  padding-left: 3%;
  background-color: rgba(255, 255, 255, 0.1);
  top: 0%;
  height: 17%;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s;
}

#modular-tagline-content:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#durable-tagline-content {
  position: absolute;
  border-radius: 2vh;
  padding-left: 3%;
  background-color: rgba(255, 255, 255, 0.1);
  top: 37%;
  height: 17%;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s;
}

#durable-tagline-content:hover {
  background-color: rgba(255, 255, 255, 0.2);
}


#precise-tagline-content {
  position: absolute;
  border-radius: 2vh;
  padding-left: 3%;
  background-color: rgba(255, 255, 255, 0.1);
  top: 83%;
  height: 17%;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s;
}

#precise-tagline-content:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#call-to-action {
  position: absolute;
  top: 88vh;
  right: 6vw;
  opacity: 0.75;
}

#main-content-1-divider {
  position: absolute;
  background-color: black;
  top: 95vh;
  width: 100vw;
  height: 3vh;
}

/* END MAIN CONTENT 1 */

/* MAIN CONTENT 2 */

#main-content-2 {
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin-top: 2vh;
  top: 100vh;
  transition: margin-top 0.5s, top 0.5s;
}

#tagline-maincontent2 {
  position: absolute;
  left: 2vw;
  opacity: 1.0;
  transition: opacity 0.1s;
}

#tagline-extra-maincontent2 {
  position: absolute;
  width: 35vw;
  top: 15vh;
  left: 3vw;
}

#tagline-extra-maincontent2  h4 {
  font-size: 2.5vw;
}

#tagline-extra-maincontent2  p {
  font-size: 1.7vw;
}
.designer {
  /*background-color: rgba(255, 128, 128, 0.3); /* Debug */
}

.slot {
  position: absolute;
  width: 17%;
  height: 17%;
  cursor: pointer;
}

.dynamic-controller-part {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dynamic-controller-part img {
  left: 0%;
  width: 100%;
}

.jsbevel {
   mix-blend-mode: overlay;
}

.no-touchy {
  position: absolute;
  pointer-events: none;
  left: 0%;
}

.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;

  /*
    Introduced in IE 10.
    See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
  */
  -ms-user-select: none;
  user-select: none;
}

#controller-buttons-container {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 5% 33%;
  grid-row-gap: 0.25vw;
  z-index: 1001;
  background-color: rgba(255, 255, 255, 0.0);
  position: absolute;
  top: 47vh;
  left: 3vw;
  width: 58vw;
  height: 35vh;
}

.button-labels {
  margin-top: -0.5vh;
  transform: skewX(15deg);
}

#body-color-buttons {
  background-color: rgba(255, 255, 255, 0.2);
  transform: skewX(15deg);
  display: grid;
  grid-auto-flow: column;
  /*grid-auto-columns: 4vw;*/
  grid-column-gap: 0.5vw;
  border-radius: 1vw;
  padding: 0.5vw;
  width: 75%;
  height: 100%;
}

#buttons-label2 {
  margin-left: 2vw;
}

#faceplate-color-buttons {
  background-color: rgba(255, 255, 255, 0.2);
  transform: skewX(15deg);
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 0.5vw;
  margin-left: 2vw;
  border-radius: 1vw;
  padding: 0.5vw;
  width: 100%;
  height: 100%;
}

#buttons-label3 {
  margin-left: 4vw;
}

#module-color-buttons {
  background-color: rgba(255, 255, 255, 0.2);
  transform: skewX(15deg);
  display: grid;
  grid-auto-flow: column;
  border-radius: 1vw;
  padding: 0.5vw;
  grid-column-gap: 0.5vw;
  margin-left: 4vw;
  width: 75%;
  height: 100%;
}

.color-button {
  background-color: white;
  margin: auto;
  width: 80%;
  height: 80%;
  opacity: 0.7;
  border-radius: 0.3vw;
  cursor: pointer;
  transition: all 0.1s;
  overflow: hidden;
}

.color-button:hover {
  opacity: 1.0;
  width: 100%;
  height: 100%;
}

.color-button:active {
  width: 110%;
  height: 110%;
}

.c1 { /* Silver */
  background-color: #f2f2f2;
}
.c2{ /* Black */
  background-color: #000000;
}
.c3 { /* Orange */
  background-color: #ff6600;
}
.c4 { /* Purple */
  background-color: #9900cc;
}
.c5 { /* Blue */
  background-color: #1a1aff;
}
.c6 { /* Red */
  background-color: #e60000;
}
.c7 { /* Green */
  background-color: #00b300;
}
.c8 { /* Cyan */
  background-color: #00e6e6;
}
.c9 { /* Yellow */
  background-color: #ffff00;
}
.s1 {
  background-color: #313131;
  background-image: url("../img/Script/PC10.png");
  background-size: 400% 400%;
  background-position: 50% 15%;
  background-repeat: no-repeat;
}
.s2 {
  background-color: #313131;
  background-image: url("../img/Script/PC11.png");
  background-size: 400% 400%;
  background-position: 50% 15%;
  background-repeat: no-repeat;
}
.s3 {
  background-color: #313131;
  background-image: url("../img/Script/PC12.png");
  background-size: 400% 400%;
  background-position: 50% 15%;
  background-repeat: no-repeat;
}

#controller-designer-container {
  position: absolute;
  top: 10vh;
  width: 45vw;
  height: 45vw;
  left: 50vw;
}

#controller-designer-container img {
  position: absolute;
  width: 100%;
}

#controller-body {

}

#controller-faceplate {

}

#controller-modules img {
  width: 100%;
}

#jsbevel-slot-1 {
  opacity: 1.0;
}

#jsbevel-slot-2 {
  opacity: 0.0;
}

#jsbevel-slot-3 {
  opacity: 1.0;
}

#jsbevel-slot-4 {
  opacity: 0.0;
}

#controller-slot-1 {
  opacity: 1.0;
  transition: opacity 0.1s;
}

#controller-slot-2 {
  opacity: 1.0;
  transition: opacity 0.1s;
}

#controller-slot-3 {
  opacity: 1.0;
  transition: opacity 0.1s;
}

#controller-slot-4 {
  opacity: 1.0;
  transition: opacity 0.1s;
}

#slot-1-click {
  left: 20%;
  top: 5%;
}

#slot-2-click {
  left: 22%;
  top: 24%;
}

#slot-3-click {
  left: 40%;
  top: 37%;
}

#slot-4-click {
  left: 60%;
  top: 24%;
  width: 23%;
  height: 20%;
}

/* END MAIN CONTENT 2 */

/* MAIN CONTENT 3 */

#main-content-3 {
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin-top: 2vh;
  top: 100vh;
  transition: margin-top 0.5s, top 0.5s;
}

#mainContent3-grid-container {
  position: absolute;
  left: 3vw;
  top: 3vh;
  width: 90vw;
  height: 90vh;
  overflow: hidden;
}

.mainContent3-grid-item {
  overflow: hidden;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40% 60%;
  min-height: 0px;
  transition: opacity 0.4s, height 0.4s;
}

.mainContent3-grid-item img {
  position: relative;
  min-height: 0px;
  padding: 1%;
  padding-right: 10%;
  height: 100%;
  width: 100%;
  transition: inherit;
}

.mainContent3-grid-item-text {
  min-height: 0px;
  position: relative;
  border-radius: 3vw;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 1vh;
  background-color: rgba(255, 255, 255, 0.1);
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.mainContent3-grid-item-text h2 {
  background-color: rgba(255, 255, 255, 0.0);
  border-radius: 2vw;
  padding-left: 1vw;
  cursor: pointer;
}

.mainContent3-grid-item-text h2:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.mainContent3-grid-item-text h2:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.mainContent3-grid-item-text h4 {
  padding-left: 1vw;
}

#mainContent3-grid-item1 {
  height: 64%;
}

#mainContent3-grid-item1-img {
  opacity: 0.9;
}

#mainContent3-grid-item1-h4 {
  height: 70%;
  overflow-y: auto;
  padding-right: 1vw;
  opacity: 1.0;
  transition: opacity 0.4s;
}

#mainContent3-grid-item2 {
  height: 12%;
}

#mainContent3-grid-item2-img {
  opacity: 0.4;
}

#mainContent3-grid-item2-h4 {
  height: 70%;
  overflow-y: auto;
  padding-right: 1vw;
  opacity: 0.0;
  transition: opacity 0.4s;
}

#mainContent3-grid-item3 {
  height: 12%;
}

#mainContent3-grid-item3-img {
  opacity: 0.4;
}

#mainContent3-grid-item3-h4 {
  height: 70%;
  overflow-y: auto;
  padding-right: 1vw;
  opacity: 0.0;
  transition: opacity 0.4s;
}

#mainContent3-grid-item4 {
  height: 12%;
}

#mainContent3-grid-item4-img {
  opacity: 0.4;
}

#mainContent3-grid-item4-h4 {
  height: 70%;
  overflow-y: auto;
  padding-right: 1vw;
  opacity: 0.0;
  transition: opacity 0.4s;
}

/* END MAIN CONTENT 3 */

/* MAIN CONTENT 4 */

#main-content-4 {
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin-top: 2vh;
  padding-top: 2vh;
  top: 100vh;
  transition: margin-top 0.5s, top 0.5s;
  text-align: center;
}

#main-content-4 p {
  font-size: 2vw;
}

#contact-form {
  display: grid;
  grid-template-areas:
  'emaillabel emaillabel namelabel namelabel'
  'emailinput emailinput nameinput nameinput'
  'messagelabel messagelabel messagelabel messagelabel'
  'messageinput messageinput messageinput messageinput'
  'messageinput messageinput messageinput messageinput'
  'sendemail sendemail sendemail sendemail';
  grid-gap: 3%;
  padding: 5%;

}

input {
  border-radius: 1vw;
  padding: 1vw;
  font-size: 1.5vw;
}

label {
  font-size: 1.5vw;
  color: rgba(255,255,255,0.6);
}

textarea {
  border-radius: 1vw;
  padding: 1vw;
  font-size: 1.5vw;
}

#email-label {
  grid-area: emaillabel;
}

#email-input {
  grid-area: emailinput;
}

#name-label {
  grid-area: namelabel;
}

#name-input {
  grid-area: nameinput;
}

#message-label {
  grid-area: messagelabel;
}

#message-input {
  grid-area: messageinput;
  height: 20vh;
  resize: none;
}

#send-email {
  grid-area: sendemail;
  margin-left: 24vw;
  margin-right: 24vw;
  margin-top: 3vh;
}


/* END MAIN CONTENT 4 */