/* FONT DEFINITIONS ----------- */
@font-face { font-family: 'name'; src: url('Balham.otf'); }
@font-face { font-family: 'section'; src: url('Quicksand.otf'); }
@font-face { font-family: 'caviar'; src: url('CaviarDream.ttf'); }
@font-face { font-family: 'book'; src: url('LeftistMonoSerif.ttf'); }

/* COLOR DEFINITIONS */
:root {
  --color-green: #00bcb8;
  --color-darkgreen: #217878;
  --color-red: #fe2e64;
  --color-gray: #666;
  --color-lightgray: #f9f2f6;
}

/* GENERAL STYLES ----------- */
section       { width:100%; }
header        { padding-top: 1px; padding-bottom: 0px; text-align: center; display:flex; align-items: center; flex-direction: column;}
body, html    { height:100%; width:100%; margin:0px; padding:0px;}
body, .normal { font-family: caviar, sans-serif; }
footer        { margin:auto; text-align:center; margin-bottom:30px; }
h2            { font-family: section, sans-serif; font-size: 220%; text-align:left;}
p, ul, table  { font-size: 130%; text-align: left; word-wrap: break-word; }
p ul          { margin-bottom: 0px;}
a             { transition: .35s; text-decoration: none; }
.anchor       { padding-top: 40px; }
a:hover       { text-decoration: none; }
/* h3            { font-size: 110%; font-weight: bold; letter-spacing: 0.1625em; text-transform: uppercase; margin: 60px 60x; } */

/* COLOR TEMPLATE */
body, h1, h2                { color:black; }
a                           { background: none; color: var(--color-red); }
footer a, header a          { color: inherit; }
footer a:hover              { color: var(--color-red); }
nav a:hover                 { color: white; background-color: var(--color-red); }
p, ul, li                   { color: var(--color-gray); }
header, #name, #menu, nav a { background-color: white; color:inherit }
#name                       { color: var(--color-green); }
footer                      { color: var(--color-gray); }
html                        { background-color: white; }

#menu {
  display: flex;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  height: 40px;
  overflow: hidden;
}
.address {
  padding-bottom: 10px;
}
nav ul { padding: 0; list-style-type: none;}
nav li { display: inline-block; letter-spacing: 0.0625em; text-transform: uppercase; text-align: center; }

.bodycontent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size:12pt;
  max-width: 750px;
  padding:10pt;
  margin: auto; /* centering */
}
.sticky {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 10;
}
.sticky + .bodycontent {
  padding-top: 56px;
}


/* lastname and firstname */
#name {
  font-family: name, sans-serif;
  text-decoration: none;
  font-size: 140%;
  letter-spacing: 0.1625em;
  text-transform: uppercase;
}
/* the subtitle, of course */
.subtitle {
  font-size: 140%;
  padding-bottom: 10px;
}

/* ico using fontawesome for beautiful linked */
.ico {
  letter-spacing: 0.0625em;
  font-size: 120%;
  padding-top:10px;
  padding-bottom:20px;
}
.ico i {
  font-size: 180%;
}

/* curriculum vitae */
.cv {
  line-height: 28px;
  font-size: 130%;
  text-align: left;
  margin-bottom:1px;
}

.cvtext {
  font-size: 100%;
  font-weight: normal;
}

.collapsible {
  background-color: inherit;
  font-weight: bold; letter-spacing: 0.1625em; text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  padding: 1px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 110%;
  margin: 10px 10px;
}

.collapsiblecontent {
  padding: 0 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: inherit;
}

@media all and (orientation: landscape) and (max-width: 840px)  {
  header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; width: 100%;
    padding:1px; margin:auto;
  }
}

@media all and (max-width: 280px)
{
  #menu { display: none; }
  .anchor               { padding-top: 1px; }
  .sticky + .bodycontent { padding-top: 2px; }
}
@media all and (max-width: 510px)
{
  nav li                { font-size: 4vw; }
  #name                 { font-size: 7.6vw; }
  nav                   { font-size: 3.5vw; }
  .subtitle             { font-size: 180%; font-size: 15px; font-size: 5vw; margin: 0px; }
  body, section         { font-size: 14px;}
  .anchor               { padding-top: 1px; }

  #wave-container, .ico, .address, #menu, .sticky { display: none; }
  .subtitle { padding-bottom:20px; }
  .sticky + .bodycontent { padding-top: 10px; }
}