@import url("styles/reset.css");
@import url("styles/root.css");

body
{
  /*
    Designer: chiezu
    Source: https://tenor.com/view/white-background-gif-13937469299500864994
  */
  background: url("media/image/background.gif") no-repeat center center / cover;
  overflow: hidden auto;
  visibility: hidden;
  min-height: 100vh;
  padding: 0 1.68vw;
  width: 100vw;
}

#grid {
  display: grid;
  grid-template-areas:
    "a a a a a"
    "b b b b b"
    "d . e f g"
    "h h h h h"
    "i i i i i"
    "j k l m n"
    "o o o o o";
  grid-template-rows: repeat(7, auto);
  grid-template-columns: repeat(5, 1fr);
}

#grid > div > div > h2
{
  text-align: left;
}

#grid > div > div > p
{
  text-align: justify;
}

h1
{
  font-size: 2.52vmax;
  padding: 1.26vw 0;
}

h2
{
  font-size: 2.1vmax;
  padding: 1.05vmax 0;
}

h3, p, a, label, input, option, select, textarea, button
{
  font-size: 1.68vmax;
  padding: 0.84vmax 0;
}

td, th
{
  font-size: 1.68vmax;
  padding: 0 0.84vmax 0 0;
}

input, select, option, textarea
{
  font-family: Arial, Helvetica, sans-serif;
  padding: 0.84vmax;
}

textarea
{
  resize: none;
}

#grid > p:nth-of-type(1)
{
  grid-area: a;
}

#grid > hr:nth-of-type(1)
{
  grid-area: b;
  border-bottom: 0.2vmax dashed #303030;
}

#grid > a:nth-of-type(1)
{
  grid-area: d;
}

#grid > a:nth-of-type(2)
{
  grid-area: e;
}

#grid > a:nth-of-type(3)
{
  grid-area: f;
}

#grid > a:nth-of-type(4)
{
  grid-area: g;
}

#grid > div:nth-of-type(1)
{
  grid-area: h;
}

#grid > div:nth-of-type(1) > div
{
  display: none;
}

#grid > hr:nth-of-type(2)
{
  grid-area: i;
  border-top: 0.2vmax dashed #303030;
}

#grid > a:nth-of-type(5)
{
  grid-area: j;
}

#grid > a:nth-of-type(6)
{
  grid-area: k;
}

#grid > a:nth-of-type(7)
{
  grid-area: l;
}

#grid > a:nth-of-type(8)
{
  grid-area: m;
}

#grid > a:nth-of-type(9)
{
  grid-area: n;
}

#grid > p:nth-of-type(2)
{
  grid-area: o;
}

.nav
{
  border-radius: 1.68vmax 0;
}

.nav:hover
{
  background-color: #303030;
  color: #ffffff; 
}

table, tbody, th, tr, td, h2, h3
{
  text-align: left;
}

#home > div
{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#home > div > video
{
  border-radius: 10vmax 0;
  grid-area: a;
  width: 100%;
}

#home > div > img
{
  position: absolute;
  width: 10vmax;
  height: 10vmax;
  right: 5vmax;
  bottom: 5vmax;
  z-index: 0;
}

#home > div > div
{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0.84vmax;
  z-index: 1;
}

#home > div > div > h1
{
  background-color: #303030cc;
  color: #ffffff;
  border-radius: 2vmax 0;
  font-size: 2vmax;
  padding: 1vmax;
}

#home > div > div > h1 > span
{
  text-shadow: 0.1vmax 0  #ffffff,
              -0.1vmax 0  #ffffff,
               0 0.1vmax  #ffffff,
               0 -0.1vmax #ffffff,
               0.1vmax  0.1vmax #ffffff,
               0.1vmax -0.1vmax #ffffff,
              -0.1vmax -0.1vmax #ffffff,
              -0.1vmax  0.1vmax #ffffff;
  color: #303030;
}

#home > div > div > a
{
  background-color: #ffffff;
  color: #303030;
  border-radius: 1.68vmax 0;
  margin-top: 0.84vmax;
  padding: 0.84vmax;
}

#home > div > div > a:hover
{
  background-color: #303030cc;
  color: #ffffff;
}

figure
{
  text-align: center;
}

figure > img
{
  width: 25vmax;
  height: 25vmax;
  border-radius: 50%;
}

#contact > form {
  display: grid;
  grid-template-areas:
    "a . b ."
    "c c d d"
    "e . f ."
    "g g h h"
    "i . . ."
    "j j j j"
    "k k k k";
  grid-template-rows: repeat(7, auto);
  grid-template-columns: repeat(4, 1fr);
  text-align: left;
}


#contact > form > label:nth-of-type(1)
{
  grid-area: a;
}

#contact > form > label:nth-of-type(2)
{
  grid-area: b;
  margin-left: 0.42vmax;
}

#contact > form > input:nth-of-type(1)
{
  grid-area: c;
  margin-right: 0.42vmax;
}

#contact > form > input:nth-of-type(2)
{
  grid-area: d;
  margin-left: 0.42vmax;
}

#contact > form > label:nth-of-type(3)
{
  grid-area: e;
}

#contact > form > label:nth-of-type(4)
{
  grid-area: f;
  margin-left: 0.42vmax;
}

#contact > form > input:nth-of-type(3)
{
  grid-area: g;
  margin-right: 0.42vmax;
}

#contact > form > select:nth-of-type(1)
{
  grid-area: h;
  margin-left: 0.42vmax;
}

#contact > form > label:nth-of-type(5)
{
  grid-area: i;
}

#contact > form > textarea:nth-of-type(1)
{
  grid-area: j;
}

#contact > form > div:nth-of-type(1)
{
  grid-area: k;
  margin-top: 0.84vmax;
  text-align: center;
  background-color: #303030;
  color: #ffffff;
}

#contact > form > div:nth-of-type(1):hover
{
  background-color: #000000;
  cursor: pointer;
}

#products > div
{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
  white-space: nowrap;
  text-align: left;
}

#products > div > div
{
  flex: 1;
  width: 50%;
}

#products > div > img
{
  flex: 1;
  width: 50%;
}