* {
  box-sizing: border-box;
}

:root {
  --link_hue: calc(var(--header_hue) - 160);
  --body_hue: 0;
  --header_hue: 160;
}

html {
  min-width: 900px;
  max-width: 1260px;
  margin: auto;
  background-color: lightgray;
}

img{
max-width:100%;
max-height:100%;
vertical-align: middle;
}

body {
  background-color: white;/*hsl(var(--body_hue), 80%, 95%);*/
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}
h2 > span {
  font-weight: normal;
  color: hsl(var(--link_hue), 100%, 70%);
}
.asc {
  width: 80%;
  margin: auto;
}
.asc p {
  text-align: left;
  font-size: 20px;
}
.black {
  border: 6px solid;
  border-color: hsl(220, 80%, 50%);
  width: 60%;
  margin-left: 30%;
  position: absolute;
  top: 10%;
  background-color: hsla(0, 0%, 100%, 100%);
  padding: 10% 2%;

  text-align: left;
  vertical-align: middle;
  color: black;
  font-size: 30px;
  font-weight: 600;
}

.footer {
   margin: 0;
   font-weight: 600;
   font-size: 20px;
   width: 100%;
   height: 380px;
   background-color: black;
   color: white;
   text-align: center;
   padding: 60px 5vw;
}

.postal::after {content: "andrei.chagin@ki.se"}
.postal {text-align: left; float: left;}

.content {
  position: relative;
  min-height: 900px;
  text-align: center;

}

.header {
  position: relative;
  width: 100%;
  height: 150px;
  padding: 30px 30px 0px 30px;
  background-color: white;/* hsl(var(--header_hue), 80%, 80%);*/
}

.logo {
  position: absolute;
  bottom: 0;
  float: left;
  margin: 0px 20px;
  text-shadow: none;
}

.logo a {
  font-size: 50px;
  text-decoration: none;
  font-weight: 800;
  color: black;
}

.moto {
  font-style: italic;
  font-size: 25px;
  margin: 10%;
}

.white_gradient{
  /*background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);*/
  background: linear-gradient(to bottom, white, rgba(0, 0, 0, 0));
}

.navbar {
  border-top: 3px solid;
  width: 100%;
  background-color: hsla(var(--link_hue), 100%, 80%, 50%);
  /*background-color: lightgray;*/
  text-align:center;
  position: relative;
  display: inline-block;
  line-height: 50px;
  font-size: 20px;
  margin: 0 0 50px 0;
}

a.nav {
  position: relative;
  background-color: hsla(var(--link_hue), 100%, 60%, 0%);
  font-weight: 600;
  color: black;
  padding: 0px 15px;
  margin: 0px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 1.0s ease;
}

a.nav:hover {
  background-color: hsl(var(--link_hue), 100%, 70%);
}
.publications {
  text-align: left;
  font-size: 20px;
  padding: 30px;
}
.publications_title {
  font-size: 25px;
  font-weight: bold;
  line-height: 35px;
}

a.pub:link {color:#ff0000;}
a.pub:visited {color:#0000ff;}
a.home_article:visited :link {color: lightblue;}

.social {text-align: right; float:right;}
.social a{
  color:white;
  text-decoration: none;
}
.team-set {
  position: relative;
  padding: 0 2.5% 2.5% 2.5%;
}
.team {
  background-color: hsl(0, 10%, 90%);
  width: auto;
  height: auto;
  margin: 2% 3%;
  padding: 10px;
  /*box-shadow: -4px 4px 0px rgba(250, 50, 50, .4);*/
  display: inline-block;

}
.team_text {
  float:right;
  width: 500px;
  height: auto;
  margin: auto;
}
.team_name {
  font-weight: 600;
}
.team_projects {
  margin-left: 15px;
}
.team img {
  width: 180px;
  float:left;
  border-radius: 50%;
  margin: 10px
}
.team p {
  text-align: left;
  font-size: 20px;
  margin: 15px;
  float: left;
}
.team a {
  color: black;
}
.position {
  color:hsl(var(--link_hue), 100%, 70%);
  /*color:  #cc5050;*/
  font-weight: bold;
}
.vertical-block {
  background-color: hsl(0, 10%, 90%);
  height: 450px;
  width: 350px;
  margin: 10px;
  padding: 10px;
  /*box-shadow: -4px 4px 0px rgba(250, 50, 50, .4);*/
  display: inline-block;
}
.video-descr {
  text-align: left;
  margin: auto;
  width: 700px;
  font-size: 20px;
  font-weight: normal;
}

.margin10 {
  margin: 10px;
}
.video {
  position: relative;
  margin: 30px auto 100px auto;
}
/* slide show part */
.mySlides{
  background-size: 800px auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size:aut;
  height: 700px;
}

.p-mid {
  text-align: left;
  vertical-align: middle;
  color: black;
  font-size: 30px;
  font-weight: 600;
}
.p-bottom {
  background-color: hsla(var(--link_hue), 100%, 80%, 50%);
  width: 100%;
  text-align: left;
  position: absolute;
  bottom: -100px;
  color: black;
  padding: 10px;
  font-size: 20px;
  font-weight: 600;
}
/* Slideshow container */
.slideshow-container {
  width: 90%;
  margin: auto;
  position: relative;
  margin: 0 auto 50px auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  color: black;
  line-height: 700px;
  vertical-align: middle;
  font-weight: bold;
  font-size: 60px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: -5%;

}
.prev {
  left: -5%;
}

.rev:hover, .ext:hover {
  background-color: hsla(0,0%,0%,0.8);
}

.author {
  color: rgba(100, 100, 100, 0.5);
}
.author::after {content: "@proton.me"}