path: root/src/css/main.css

/*
 * FONTS
 */

@font-face {
  font-family: "Heroes";
  src: url('../fonts/texgyreheros-regular.otf') format('truetype');
}

/*
 * RESET CSS
 */

* {
  font-family: Heroes;
  font-size: 1em; /* We use browser's default */
  margin: 0;
  padding: 0;
}

html { height: 100% }

body {
  display: flex;
  min-height: 100%;
  flex-direction: row;
}

/*
 * RESPONSIVE
 */
.mobile_block, .mobile_inline { display: none }

@media screen and (max-width: 640px) {
  body { flex-direction: column }
  .computer_block { display: none }
  .mobile_block { display: block }
  .mobile_inline { display: inline }
} 

/*
 * CORE TEMPLATE
 */

/* Header + Menu */
body > header {
  color: white;
  background-color: #519c60;
  padding: 1.5rem;
}

body > header > a > svg { 
  fill: white; 
  display: inline;
  vertical-align: sub;
  margin-right: 1em;
}

body > header > h1 { display: inline }
body > header a {
  color: white;
  text-decoration: none;
}

body > main {
  padding: 1.5rem;
  max-width: 1200px;
}

/*
 * TEXT CORE (think markdown)
 */

h1 { font-size: 2.5rem }
h2 { font-size: 2.0rem }
h3 { font-size: 1.75rem }
h4 { font-size: 1.50rem }
h5 { font-size: 1.25rem }
h6 { font-size: 1.10rem }
section, p { margin-bottom: 1rem }

/*
 * UTILS
 */

/* float */
.left { float: left }
.right { float: right }
section::after, p::after { 
  clear: both;
  display: block;
  content: "";
}

/*
 * ELEMENTS
 */

input {
  border: 0.1em black solid;
  width: 50%;
  min-width: 300px;
  font-size: 1.6em;
  border: 0.1em black solid;
  padding: 0.3em;
}

.button {
  padding: 0.3em;
  background-color: #519c60;
  font-size: 1.6em;
  border: 0.1em solid #519c60;
  color: white;
  margin: 0em 0em 0em 1em;
  text-decoration: none;
}

/* service button */

.service-box {
  color: #000;
  text-decoration: none;
  border: 0.2em solid #000;
  width: 250px;
  text-align:center;
  margin: 1em 1em 0em 0em;
  display: block;
}

.service-box:hover {
  background-color: #000;
  color: #fff;
}