:root {
  --blue: #10445c;
  --ltblue: #b8e0d7;
  --red: #d9184b;
  --green: #038c65;
  --cabin: 'Cabin', sans-serif;
  --oswald: 'Oswald', sans-serif;
  --telex: 'Telex', sans-serif;
  --xgreen: rgba(3, 140, 101, 0.5);
  --xblue: rgba(16, 68, 92, 0.5);
}
/*! Top Bar */

.top-bar {
  /* width: 80vw; */
  height: auto;
  display: flex;
  background-image: linear-gradient(
    to right,
    var(--ltblue),
    90%,
    rgba(255, 255, 255, 0)
  );
  border-radius: 100em 0em 0em 100em;
  padding: 0.5vw;
  margin-bottom: 5vh;
  align-items: center;
}
/*! Header */

.selfie {
  width: 10vw;
  height: auto;
  border: 0.25em solid var(--green);
  border-radius: 100%;
}
.selfie:hover {
  border: 0.25em solid var(--red);
}

body {
  background-color: var(--blue);
  background-image: linear-gradient(var(--ltblue) 2px, transparent 2px),
    linear-gradient(90deg, var(--ltblue) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.title {
  display: flex;
  margin-left: 2vw;
}
a {
  color: var(--red);
  font-family: var(--telex);
}
a:hover {
  color: var(--green);
}
h1 {
  color: var(--green);
  font-family: var(--oswald);
  font-size: 5em;
}
img {
  border-radius: 5em;
}
.section-heading {
  color: var(--blue);
  font-family: var(--oswald);
  border-bottom: 0.25em solid var(--blue);
  text-align: center;
}
.section {
  background-color: var(--ltblue);
  padding: 0.5em;
  margin: 1em;
  border-radius: 1em;
}
p {
  font-family: var(--telex);
  background-color: var(--ltblue);
  color: var(--blue);
  font-size: 1.25em;
  text-indent: 2.5em;
  text-align: justify;
}
ul {
  font-family: var(--cabin);
  color: var(--blue);
}
h4 {
  font-family: var(--cabin);
  color: var(--blue);
}
figure.ebay {
  align-self: flex-start;
}

figcaption {
  font-family: var(--cabin);
  color: var(--blue);
}

.xcar {
  float: left;
  padding-right: 1vw;
}
.xcar-text {
  padding-left: 3em;
}
.wb-article {
  font-family: var(--telex);
  display: block;
}
.wb-xcar {
  padding-bottom: 6em;
}

.schematic {
  display: flex;
  /* clear: both; */
}
.bed-text {
  padding: 1vw;
}
.wb-bed-schematic {
  max-width: 30vw;
}
.bed-support {
  float: left;
  padding: 1vw;
}
.bed-roll {
  float: right;
  padding: 1vw;
  max-width: 15vw;
  /* margin-bottom: 10vh; */
}
.wb-print-bed {
  padding-bottom: 3em;
}

.intro {
  display: flex;
}
.intro-text {
  color: var(--blue);
  padding: 1em;
}
.parts-title {
  display: flex;
  justify-content: center;
  border-bottom: 3px solid var(--blue);
}
.parts-list {
  display: flex;
  flex-direction: row;
}
.control-panel {
  display: flex;
}
.control-text {
  padding: 1em;
}
.control-img {
  padding: 0.5em;
}

footer {
  display: flex;
  background: rgb(184, 224, 215);
  background: -moz-radial-gradient(
    circle,
    rgba(184, 224, 215, 1) 20%,
    rgba(252, 70, 107, 0) 100%
  );
  background: -webkit-radial-gradient(
    circle,
    rgba(184, 224, 215, 1) 20%,
    rgba(252, 70, 107, 0) 100%
  );
  background: radial-gradient(
    circle,
    rgba(184, 224, 215, 1) 20%,
    rgba(252, 70, 107, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b8e0d7",endColorstr="#fff",GradientType=1);
  width: 100%;
  height: 6vh;
  margin: auto;
  position: sticky;
  bottom: 0;
}
footer ul {
  font-family: var(--oswald);
  display: flex;
  list-style-type: none;
  margin: auto;
}
footer li {
  padding-right: 2vw;
  font-size: 1.5em;
}

.fa {
  font-size: 2em;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  transition: transform 0.2s;
}

.fa:hover {
  transform: scale(1.5);
  color: var(--blue);
}
.control-software {
  display: flex;
}
.item {
  flex: 1;
  border: solid 3px var(--blue);
  padding: 1em;
  font-family: var(--cabin);
  margin: 1em;
  color: var(--blue);
}
.center-item {
  border-right: solid 3px var(--blue);
  border-left: solid 3px var(--blue);
}
.item h4 {
  border-bottom: solid 3px var(--blue);
  text-align: center;
}
.psu {
  max-width: 300px;
}
.power {
  display: flex;
}
.power-text {
  padding-right: 3em;
}
.relay {
  max-width: 300px;
  border-radius: 50px;
  float: left;
  padding: 1em;
}

.gearbox-shaft {
  max-width: 30em;
  border-radius: 2em;
  padding: 1em;
}
.belt {
  display: flex;
}