site/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;
  max-width: 1200px;
  flex-direction: row;
  margin: auto;
}

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

@media screen and (max-width: 800px) {
  body {
    flex-direction: column
  }

  .computer_block {
    display: none
  }

  .mobile_block {
    display: block
  }

  .mobile_inline {
    display: inline
  }
}

/*
 * CORE TEMPLATE
 */

/* Header + Menu */
body>aside>header {
  color: white;
  background: rgb(12, 144, 110);
  background: linear-gradient(0deg, rgb(21, 65, 73) 0%, rgb(55, 141, 100) 50%, rgb(12, 144, 110) 100%);
  padding: 1.5rem;
  margin: 0.8rem;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 30px rgba(31, 38, 103, 0.2);
}

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

body>aside>header>h1 {
  display: inline
}

body>aside>header a {
  color: white;
  text-decoration: none;
}

body>aside>header>nav ul {
  list-style-type: none;
  padding-left: 1em;
}

body>aside>header>nav>ul {
  padding-left: 0px
}

body>aside>header>nav a:hover {
  text-decoration: underline
}

body>aside>header>nav .selected {
  font-weight: bold
}

body>aside>header>nav .selected::before {
  content: "» "
}

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
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 1rem
}

section,
p,
ul,
ol,
table,
pre {
  margin-bottom: 1rem
}

ul,
ol {
  padding-left: 1.5em
}

a {
  color: rgb(12, 144, 110)
}

table {
  border-collapse: collapse
}

th {
  background-color: #fafafa
}

td,
th {
  border: 1px solid #ddd;
  padding: 0.3rem 0.5rem;
}

pre {
  background-color: #1e1e1e;
  padding: 1rem;
  overflow-x: auto;
}

code {
  font-family: Monospace;
  background-color: #1e1e1e;
  color: #fff;
  padding: 0.25rem 0.4rem;
}

img {
  border-radius: 0.5rem;
  box-shadow: 0px 0px 30px rgba(31, 38, 103, 0.2);
  margin: 0.5rem;
}

img.simple {
  border-radius: 0px;
  box-shadow: none;
  margin: 0px;
}

strong {
  background-color: rgb(12, 144, 110);
  color: #fff;
  padding: 0.20rem 0.4rem;
}

/*
 * UTILS
 */

/* float */
.left {
  float: left
}

.right {
  float: right
}

section::after,
p::after {
  clear: both;
  display: block;
  content: "";
}

/* center */
.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/*
 * 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: 1px solid #ddd;
  border-radius: 0.5rem;
  width: 250px;
  text-align: center;
  margin: 1em 1em 0em 0em;
  display: block;
}

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

.callout {
  font-size: 1.2rem;
  text-align: center;
  position: relative;
  margin: 2rem 0;
  padding: 1rem;
  border: 1px solid rgba(10, 10, 10, 0.25);
  border-radius: .2rem;
  background-color: #cbf0e6;
}

.frame {
  border-left: 1rem solid #ddd;
  padding-left: 1rem;
}