html {
  background: rgb(255,255,255);
  background: linear-gradient(130deg, rgba(245,245,245,1) 0%, rgba(234,242,248,1) 35%, rgba(255,255,255,1) 100%);
}

:root {
  --color-red: #946153;
  --color-blue: #466a75;
  --color-green: #4C6B45;
  --color-gray: #444647;
  --color-white: #fff;
  --btn-pad: 0.6em;
  @media only screen and (max-width: 767px) { --btn-pad: 0.8em; }
}

body {
  text-align: center;
  margin: 0;
}
body {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  padding: 3em 0;
  @media only screen and (max-width: 500px) { font-size: calc(14px + 0.1vw); padding: 2em 0; }
  @media only screen and (min-width: 500px) and (max-width: 799px) { font-size: calc(14px + 0.5vw); }
  @media only screen and (min-width: 800px) { font-size: 18px; }
}
cc-body {
  @media only screen and (max-width: 800px) { font-size: 120%; }
}

body {
  color: var(--color-gray);
  background-color: transparent;
  transition: background-color 0.3s ease;
}
body.inverted {
  background-color: #111;
  --color-red: #c78471;
  --color-blue: #71a2b1;
  --color-green: #78a76e;
  --color-gray: #444647;
  --color-white: #fff;
}

body:before {
  background-image: url('./images/mountains3.jpg');
  content: '';
  position: fixed;
  top:0;left:0;width:100vw;height:100vh;
  background-size: cover;
  z-index:0;
  opacity: 0.4;
  filter: blur(8px);
  transform: scale(1.05);
}
body.inverted:before { opacity: 0.2; }

* { box-sizing: border-box; }
button { font-family: inherit; line-height: inherit; font-size: inherit; cursor: pointer }
a {
  color: var(--color-blue);
  text-decoration: none;
}
a:not(.btn):hover {
  text-decoration: underline;
}
a.btn {
  cursor: pointer;
  text-decoration: none; 
  border-radius: 0;
  background: var(--color-green);
  color: #fff;
  font-weight: bold;
  padding: var(--btn-pad) calc(var(--btn-pad)*1.2);
  display:inline-block;
  vertical-align: middle;
  /*text-transform: uppercase;*/
  icon { margin-right: 0.15em; font-size: 150%; vertical-align: middle; }
}
a.btn.img img { height: 1.56em }
a.btn.blue {background: var(--color-blue);}
a.btn.red {background: var(--color-red);}
a.btn.gray {background: var(--color-gray);}

.btn-set a.btn { margin: 0 0.33em 0.75em 0; }

contact-card cc-header img {
  width: 11em;
  border-radius: 100%;
  border: 1px solid rgba(255,255,255,0.2);
}
body.inverted contact-card { border-color: #555; }

contact-card {
  display: inline-block;
  max-width: calc(100% - 3em);
  width:30em;
  --breathing-room: 2em;
  @media only screen and (min-width: 800px) { width: calc(28em + 12vw); --breathing-room: calc(3em + 2vw); }
  @media only screen and (min-width: 1800px) { width: 44em; }
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 4px 8em rgba(0,0,0,0.2), 0 0 3px rgba(0,0,0,0.2);
  border: 1px solid #eee;
  line-height: 150%;
  position: relative;
  z-index:1;
}
contact-card cc-header h1 {
  display: inline-block;
  white-space: nowrap;
  font-weight: 150;
  font-size: 280%;
  margin:0;
  line-height:1.8em;
  border-bottom: 2px solid #fff;
  padding: 0 0.5em 0.15em 0.5em;
}
contact-card cc-header p { font-size: 130%; margin-bottom: 0; line-height: 150%;}
contact-card cc-header {
  display:block;
  background-color: var(--color-green);
  border-radius: inherit;
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  padding: var(--breathing-room) 1em;
  background-image: url('./images/mountains3.jpg');
  background-size: cover;
  color: #fff;
}

contact-card cc-body {
  position: relative;
  --color-fore: var(--color-gray);
  --color-bkg: var(--color-white);
  display: block;
  text-align: left;
  padding: var(--breathing-room);
  padding-top: 2em;
  color: var(--color-fore);
  background-color: var(--color-bkg);
  border-end-end-radius: inherit;
  border-end-start-radius: inherit;
  font-size: 100%;
  font-weight: 300;
  transition: color 0.25s ease, background-color 0.25s ease;
}
contact-card cc-body.inverted {
  --color-fore: #eee;
  --color-bkg: #111;
}

content h1 { font-size: 100%; font-weight: 800; /*text-transform: uppercase;*/ }
content[name=projects] h1 { text-transform: none; }
content h2 { font-size: 100%; font-weight: 800; }
content p { line-height: 150%; margin: calc(var(--breathing-room) / 3) 0; }

tabs { display: block; margin-bottom: 1em; }
tabs tab {
  display: inline-block;
  padding: 0.5em 0;
  border-bottom: 2px solid transparent;
  font-weight: bold;
  margin-right: 1em;
  color: var(--color-fore);
  opacity: 0.7;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
tabs tab.selected {
  border-color: var(--color-fore);
  opacity: 1.0;
}

img.gallery {
  position: relative;
  width: 100%;
  border-radius: 11px;
  /* box-shadow: 0 0 12px rgba(0,0,0,0.6); */
}

.img-container {
  position: relative;
  display: flex;
  margin: 2em 0 3em 0;
}

img.gallery.fx {
  display: block;
  position: absolute;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}
img.gallery.reflect {
  transform: translateX(0) translateY(55%) perspective(1900px) rotateX(-96deg) scale(1.1);
  filter: blur(16px);
  mix-blend-mode: hard-light;
  opacity: 0.2;
}
img.gallery.glow {
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: 0.2;
  transform: scale(1.015);
}

content[name=projects] h1 {
  margin-top: calc(var(--breathing-room) * 1.25);
  font-size: 125%;
}

content[name=experience] h1 {
  text-decoration: underline;
  font-size: 125%;
  margin: 1.5em 0 1em;
}

hr {
  display: block;
  border: 0;
  height: 1px;
  background: #999;
  margin: 2em 0;
}