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(125,205,141);
  background: linear-gradient(0deg, rgba(125,205,141,1) 0%, rgba(81,156,96,1) 50%, rgba(12,144,110,1) 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 { 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;
}
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;
}


/*
 * 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;
}

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