/* Color scheme */
/* Primary: #E6F2FF (50) */
/* https://material.io/design/color/the-color-system.html#tools-for-picking-colors */
/* TEMPORARY */

:root {
  --light-hue: #adadc7;
  --dark-hue: #3d4561;
  --middle-hue: #646f93;
  --white: #FAF9F6;
}

@import "palette.css";

.filler {
  display: block;
  width: auto;
  height: 200px;
  margin: 8px 0 8px 0;
  background: #F0F0F0;
  width: calc(1/2 * 100vw - 2 * 36px);
}

/* Layout Main */

body {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0;
  background-color: #FFF;

  overflow-x: hidden;

  background-image: url("Images/IMG_20220519_230729.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
  background-color: var(--middle-hue)
}

main {
  background-color: var(--white);

  position: relative;
  top: 250px;
  width: calc(.75 * 100vw);
  min-height: calc(100vh - 250px);

  z-index: 0;

  -webkit-transition: transform .3s; /* Safari */
  transition: transform .3s;

  border-radius: 16px 16px 0 0;
  /* overflow: hidden; */

  /* box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); */
  /* box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20); */
  /* border-bottom: 1px solid rgb(0, 0, 0, 0.1); */

}

main section:first-of-type{
  border-radius: 16px 16px 0 0;
}

@media (max-width: 960px) {
  main {
    top: 150px;
    min-height: calc(100vh - 150px);
    left: 0;
    align-self: center;
    width: calc(100vw - 16px);
  }
}

@media (min-width: 1739px) {
  main {
    align-self: center;
    width: calc(1/2*100vw);
    }
}

section {
  display: flex;
  text-align: left;
  flex-direction: column;
  justify-content: left;

  /* min-height: calc(100vh - 100px); */
  /* min-height: -webkit-fill-available; */
  padding: 50px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  /* border-left: solid 1px rgba(0, 0, 0, 0.1);
  border-right: solid 1px rgba(0, 0, 0, 0.1); */

  /* background-color: #FFF; */
  /* box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); */
  /* z-index: 999; */

  /* margin-bottom: 16px; */
}

/* Header */

header {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;

  height: 300px;
  width: 100vw;

  flex-direction: row;
  justify-content: center;
  overflow: hidden;
}

header a {
  z-index: 3;
  -webkit-transition: opacity .1s; /* For Safari 3.1 to 6.0 */
  transition: opacity .1s;
}

header img {
  max-height: 300px;
  width: auto;
  height: auto;
}

/* Sidebar */

#sidebarbutton {
  z-index: 1000;

  position: fixed;
  left: 0;
  top: 0;

  height: 48px;
  width: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  -webkit-transition: background-color .3s; /* Safari */
  transition: background-color .3s;
}

#sidebarbutton:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#sidebarbutton ::selection {
  background-color: rgba(0,0,0,0);
}

#minime {
  z-index: 1000;
  position: fixed;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 48px;
  width: 48px;

  top: 0;
  left: -48px;

  -webkit-transition: transform .3s; /* Safari */
  transition: transform .3s;
}

@media (max-width: 960px) {
  #minime {
    display: none;
  }
}

#minime .img {
  width: 24px;
  height: 24px;
  border-radius: 100%;

  margin-left: auto;
  margin-right: auto;

  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);

  background-image: url("Images/Fotooo.png");
  background-size: 24px 24px;

  -webkit-transition: background-image .3s ease-in-out .5s; /* Safari */
  transition: background-image .3s ease-in-out .5s;
}


#sidebar {
  background-color: #fff;

  z-index: 50;
  display: flex;
  flex-direction: column;

  position: fixed;
  left: 0;
  width: 300px;
  height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: scroll;
  border-right: solid 1px rgba(0, 0, 0, 0.1);

  -webkit-transition: transform .3s; /* Safari */
  transition: transform .3s;
}

@media (max-width: 960px) {
  #sidebar {
    transform: translateX(-300px);
    border-right: 0;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);
  }
}

#sidebar #sidebartitle {
  height: 48px;
  width: calc(100% - 48px - 16px);
  padding-left: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 16px;

  opacity: .67;
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05rem;
}

#sidebar #sidebardescription {
  display: flex;
  flex-direction: column;
  padding: 16px;

  margin: 0 0 8px 0;
  color: rgba(0, 0, 0, 0.87);
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04rem;
  line-height: 1.25rem;

  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  border-top: solid 1px rgba(0, 0, 0, 0.1);
}

#sidebar #sidebardescription .img {
  width: 200px;
  height: 200px;
  border-radius: 100%;

  margin-left: auto;
  margin-right: auto;

  margin-bottom: 16px;

  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);

  background-image: url("Images/Fotooo.png");
  background-size: 200px 200px;

  -webkit-transition: background-image .3s ease-in-out .5s; /* Safari */
  transition: background-image .3s ease-in-out .5s;
}

#sidebar #sidebardescription .img:hover {
  background-image: url("Images/Fotooo2.png");
}

#sidebar a {
  width: calc(100% - 32px);
  height: 48px;

  display: flex;
  align-items: center;
  padding: 0 16px 0 16px;

  text-decoration: none;

  margin: 0 0 8px 0;
  color: rgba(0, 0, 0, .87);
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04rem;
  line-height: 1.25rem;

  -webkit-transition: background-color .3s; /* Safari */
  transition: background-color .3s;
}

#sidebar a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#sidebar span {
  width: calc(100% - 32px);
  height: 48px;

  display: flex;
  align-items: center;
  padding: 0 16px 0 16px;

  text-decoration: none;

  margin: 0 0 8px 0;
  color: rgba(0, 0, 0, .87);
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 1.25rem;
}

/* Tab selection */

#tabs {
  position: relative;
  /* background-color: #a0caff; */
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 300px 16px 0px 16px;
  z-index: 2;


  height: 48px;
  width: calc(100vw);
}

@media (min-width: 1221px) {
  #tabs {
    align-self: center;
    width: calc(3/4*100vw);
  }
}

@media (min-width: 1739px) {
  #tabs {
    align-self: center;
    width: calc(1/2*100vw);
    }
}

#tabs a {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  width: auto;
  height: 100%;

  z-index: 1;

  justify-content: space-around;
  align-items: center;

  /* background-color: #0000000d; */

  text-decoration: none;
  color: #00000089;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;

  -webkit-transition: color .1s, border .3s, padding .3s; /* Safari */
  transition: color .1s, border .3s, padding .3s;
}

#tabs .active {
  box-sizing: border-box;

  /* background-color: #00000000; */
  color: #4a44a0;
  border-bottom: 3px solid #4a44a0;
  /* box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20); */
  z-index: 1;

  -webkit-transition: color .1s, border .3s, padding .3s; /* Safari */
  transition: color .1s, border .3s, padding .3s;
}


#tabs a:hover {
  /* background-color: #0000000d; */
  color: #000000dd;
  border-bottom: 3px solid #4a44a089;
  padding-bottom: 2px;
}

#tabs .active:hover {
  /* background-color: #0000000d;
  color: #000000de; */
  border-bottom: 3px solid #4a44a0;
  padding-bottom: 6px;
}

#divider {
  display: block;
  width: 100vw;
  height: 1px;
  background-color: rgba(0,0,0,0.1);
  margin-bottom: 25px;
}

#tabs .socialmedia {
  flex-grow: 0.2;
  display: flex;
}

#tabs .socialmedia img {
  margin: auto;
  width: 24px;
  height: 24px;
}

#tabs .socialmedia a {
  text-decoration: none;
  opacity: .67;

  -webkit-transition: opacity .3s, transform .3s; /* Safari */
  transition: opacity .3s, transform .3s;
}

#tabs .socialmedia a:hover {
  opacity: .87;
  border-bottom: 0;
  padding-bottom: 0;
  transform: translateY(-4px);
}

/* Footer */

footer {
  background-color: #212121;

  display: flex;
  height: 200px;
  width: 100vw;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-top: 50px;
}

footer .top {
  background-color: #424242;
  padding: 8px;
}

footer div {
  margin-bottom: auto;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}


footer img {
  height: calc(200px - 42px);
}

footer p {
  color: #FFF;
  opacity: .87;
  font-size: 10px;
}

footer p a {
  color: #FFF;
  opacity: .87;
  font-size: 10px;
}

/* Typography */

h1 { /* Main titles */
  margin: 8px 0px 24px 0px;
  opacity: .87;

  display: flex;
  align-items: center;

  font-family: "Roboto", sans-serif;
  font-weight: 600;

  /* font-style: italic; */

  /* font-family: 'Roboto', sans-serif;
  font-weight: 300; */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 42px;


  letter-spacing: 0.2rem;
}

h2 { /* Secondary titles */
  margin: 0px 0px 16px 0px;
  opacity: .67;
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05rem;
}

h3 { /* Secondary titles */
  margin: 0px 0px 16px 0px;
  opacity: .67;
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05rem;
}

p { /* General Text */
  max-width: 560px;

  margin: 0 0 8px 0;
  opacity: .87;
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04rem;
  line-height: 1.4rem;
}

p:last-child { margin-bottom: 0 !important}

p b {
  font-weight: 500;
}

p a { /* inline links */
  color: #5463c1;

  opacity: .87;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 1.25rem;

  -webkit-transition: opacity .1s; /* Safari */
  transition: opacity .1s;
}

p a:hover {
  opacity: .67;
}

/* PopDown */

#popdown {
  position: fixed;
  bottom: -48px;
  height: 48px;
  display: flex;
  width: 344px;
  max-width: calc(100vw - 32px);
  background-color: #000000dd;
  border-radius: 4px;
  padding: 0 16px 0 16px;
  box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
  border-bottom: 1px solid rgb(0, 0, 0, 0.1);

  z-index: 1000;

  align-items: center;
  justify-content: left;

  font-size: 14px;
  color: #ffffffde;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;

  -webkit-transition: bottom .2s; /* For Safari 3.1 to 6.0 */
  transition: bottom .2s; /* For Safari 3.1 to 6.0 */
}

/* Downloadable content */

.content {
  z-index: 10;
  display: flex;
  flex-direction: column;

  margin: 16px 25px 0 25px;

  width: calc(100% - 50px);

  background-color: #FFF;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 4px;
  /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20); */
}

.content h3 {
  margin-bottom: 0;
}

.content div {
  z-index: 11;
  height: 52px;
  width: calc(100% - 16px);

  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 16px;

  background-color: #FFF;
  border-bottom: 1px solid rgba(0, 0, 0, .10);


  font-size: 14px;
  color: #000000de;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;

  -webkit-transition: background-color .1s; /* For Safari 3.1 to 6.0 */
  transition: background-color .1s; /* For Safari 3.1 to 6.0 */

  /* cursor: pointer; */
}

.content div:last-of-type {
  border-bottom: 0;

}

.content .row:hover {
  /* background-color: #EEEEEE; */
}

.content  .filetype {
  margin-left: auto;
  margin-right: 16px;
  font-weight: 400;
  opacity: .56;
}

.content a {
  height: 20px;
  width: 20px;
  opacity: .67;
  margin-right: 8px;
  margin-left: -8px;
  color: #000;

  background-color: rgba(0,0,0,0);
  padding: 8px;
  border-radius: 50%;
  -webkit-transition: background-color .3s; /* For Safari 3.1 to 6.0 */
  transition: background-color .3s;
}

.content a:hover {
  background-color: rgba(0,0,0,0.1);
}

.content .download {
  font-size: 20px;
  opacity: .67;
  margin-right: 16px;


}

.content div i {
  font-size: 20px;
  opacity: .67;
  margin-right: 8px;

  /* -webkit-transition: opacity .1s; /* For Safari 3.1 to 6.0 */ */
  /* transition: opacity .1s; /* For Safari 3.1 to 6.0 */ */
}

.content content {
  -webkit-transition: height .3s; /* For Safari 3.1 to 6.0 */
  transition: height .3s;
}

.content content div {
  -webkit-transition: opacity .3s; /* For Safari 3.1 to 6.0 */
  transition: opacity .3s;
}

.content .expand {
  cursor: pointer;
  -webkit-transition: background-color .1s; /* For Safari 3.1 to 6.0 */
  transition: background-color .1s;
}

.content .expand:hover {
  background-color: #e6f2ff89;
}

/* .content .row:hover i {
  font-size: 20px;
  opacity: .67;
} */

/* .content form {
  height: 52px;
  width: auto;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
} */

/* Galleries */

.galleries {
  display: flex;
  height: 48px;

  margin-bottom: 16px;
  margin-left: -16px;
}

.galleries a {
  display:flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  flex-grow: 1;
  margin-left: 16px;

  text-decoration: none;
  font-size: 14px;
  color: #000000de;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;

  background-color: #FFF;
  border-radius: 4px;
  background-color: #FFF;
  box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
  z-index: 999;
}


/* Links (cards) */

.card {
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;

  box-sizing: border-box;
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;

  overflow: hidden;

  width: calc(1/4 * 100% - 16px);
  margin: 0 16px 16px -4px;

  -webkit-transition: box-shadow .3s, transform .3s; /* For Safari 3.1 to 6.0 */
  transition: box-shadow .3s, transform .3s;
}

.card:hover {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
  transform: scale(1.01);
}

.card img {
  height: auto;
  width: 100%;
}

.card .title {
  width: calc(100% - 24px);
  padding: 12px;

  display: flex;
  align-items: center;
}

.card .title h3 {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #000;
  opacity: .67;
}

/* websites */

.websites {
  margin: 0 -16px 16px 4px;
  width: calc(100% + 16px);

  display: block;
}

/* Education */

#education .block {
  padding-left: 8px;
  width: calc(100% - 8px);
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;

  border: solid 1px rgba(0, 0, 0, 0);


  margin-bottom: 16px;


  -webkit-transition: box-shadow .3s, transform .3s; /* For Safari 3.1 to 6.0 */
  transition: box-shadow .3s, transform .3s;
}

#education .block:hover {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
  transform: scale(1.01);
}

#eduction .block:last-of-type {
  margin-bottom: 0px;
}

#education .item {
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  width: calc(100%);
  background-color: var(--white);
  border-radius: 7px;

  padding-bottom: 16px;
}

#education .inbetween {
  margin-top: 4px;
  height: 4px;
  border-left: 8px solid #000;
  margin-bottom: 4px;
}

#education .item .date {
  text-decoration: none;
  color: #000;
  opacity: .67;
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05rem;
  margin-bottom: 8px;
}

#education .item .school {
  text-decoration: none;
  color: #000;
  opacity: .87;
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05rem;

  margin-top: 16px;
  margin-bottom: 12px;
}

#education .item .location {
  text-decoration: none;
  font-size: 14px;
  color: rgba(0,0,0,.67);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;

  margin-top: -4px;
  margin-bottom: 8px;
}

#education .item .type {
  text-decoration: none;
  color: #000;
  opacity: .67;
  font-family: 'Roboto', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05rem;

  margin-top: 8px;
  margin-bottom: 8px;
}

#education .item .details {
  text-decoration: none;
  font-size: 16px;
  color: rgba(0,0,0,.67);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;

  margin-top: 8px;
  margin-bottom: 8px;
}

/**/