/* font */

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-regular.woff2') format('woff2'),
         url('../fonts/madleentext-regular.woff') format('woff'),
         url('../fonts/madleentext-regular.otf') format('opentype');
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-semiwide.woff2') format('woff2'),
         url('../fonts/madleentext-semiwide.woff') format('woff'),
         url('../fonts/madleentext-semiwide.otf') format('opentype');
    font-weight: normal;
    font-stretch: semi-expanded;
    font-style: normal;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-wide.woff2') format('woff2'),
         url('../fonts/madleentext-wide.woff') format('woff'),
         url('../fonts/madleentext-wide.otf') format('opentype');
    font-weight: normal;
    font-stretch: expanded;
    font-style: normal;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-slanted.woff2') format('woff2'),
         url('../fonts/madleentext-slanted.woff') format('woff'),
         url('../fonts/madleentext-slanted.otf') format('opentype');
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-semiwideslanted.woff2') format('woff2'),
         url('../fonts/madleentext-semiwideslanted.woff') format('woff'),
         url('../fonts/madleentext-semiwideslanted.otf') format('opentype');
    font-weight: normal;
    font-stretch: semi-expanded;
    font-style: italic;

}

@font-face {
    font-family: 'madleentext';
    src: url('../fonts/madleentext-wideslanted.woff2') format('woff2'),
         url('../fonts/madleentext-wideslanted.woff') format('woff'),
         url('../fonts/madleentext-wideslanted.otf') format('opentype');
    font-weight: normal;
    font-stretch: expanded;
    font-style: italic;

}

body {
  background-color: white;
  color: black;
  font-family: 'madleentext', times, serif;
  font-size: 18px;
  color: #ceffe4;
  background: #000;
}

section {
  display: flex;
  flex-wrap: wrap;
  max-width: 1400px;
  gap: 10px;
  box-sizing: border-box;
}

div {
  flex-basis: 40%;
  background: black;
  padding: 20px;
  box-sizing: border-box;
  box-shadow:3px 3px 4px #acddc2;
}

div.intro {

}

div.intro img:first-child {
max-width: 300px;
width: 100%;
}

div.buttons {

}

div.buttons ul {
  display: flex;
  flex-direction: row;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: yellow;
}

a.button {
  color: white;
  margin-bottom: 12px;
  display: inline-flex;
  height: 2rem;
  line-height: 2rem;
  vertical-align: middle;
  min-width: 200px;
  border-image: url(../img/button_stone.png) 18 18 18 18 fill / 18px 18px 18px 18px;
  padding: 18px 18px 18px 18px;
  justify-content: center;

}


a.button:hover {
  background: white;
  color: black;
}

div.projects {
}

div.projects a {
  color: white;
}

div.projects a:hover {
  color: yellow;
}

span.info {
  font-size:0.8em;
}

div.projects li {
  margin-bottom: 12px;
}

div.fullwidth {
  width: 100%;
  height:200px;
  background: #0000ff;
  color: white;
  box-shadow: none;
}

.footer {
  font-size:10pt;
  padding:30px 16px;
}