:root {
  --mainColor1: #77aaf0;
  --mainColor2: #643173;
  --subColor1: #88439D;
  --subColor2: #061b37;
  --chosenWhite: #F7F8F2;
  
} /*use with var(--mainColor1)*/

html {
  scroll-behavior: smooth;
}

body::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

* {
  font-family: 'ocr-b-std', monospace;
  font-weight: 400;
  font-style: normal;
}

.sidebar {
  position: absolute;
  width: .8vw;
  right: 0;
  height: 100%;
}

#green {
  background-color: var(--mainColor1);
}

#purple {
  background-color: var(--mainColor2);
}


/* ---------------------------------------------------- INTRO ---------------------------------------------------- */

#intro {
  position: relative;
  width: 100vw;
  height: 50.5vw;
}

#logo {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 3%;
}

#intro_info {
  position: absolute;
  left: 15%;
  top: 25%;
  width: 65%;
}

  #intro_info h1 {
    font-size: 6vw;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
  }

  #intro_info p {
    font-size: 2.2vw;
  }
  
  #intro_info button {
    border: solid black .2vw;
    background-color: var(--chosenWhite);
    width: 17vw;
    height: 3vw;
    font-size: 1.7vw;
  }

#star_upper{
  position: absolute;
  right: 5%;
  bottom: 30%;
  width: 5vw;
}

#star_under{
  position: absolute;
  right: 5%;
  bottom: 15%;
  width: 5vw;
}


#info {
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
}

#line {
  position: absolute;
  transform: translate(-50%, 0);
  left: 50%;
  width: 85%;
  height: 2px;
  
  border-top: dashed .2vw #8E8A8A;
  border-image: url("http://i.stack.imgur.com/wLdVc.png") 1 round;
}

#numbers {
  position: absolute;
  left: 4%;
  top: 7vw;
}

#numbers p {
  margin-top: 0px;
  margin-bottom: 10px;
  font-size: 1.6vw;
  color: #8E8A8A;
}


.info_part {
  margin-left: 13%; 
  margin-top: 5vw;
  width: 60%;
}

 .info_part h2 {
    font-size: 3vw;
    margin: 0;
  }
  
 .info_part p {
    margin: 15px;
    margin-left: 5vw;
    font-size: 1.5vw;
 }
 

#discord {
  background-color: var(--mainColor1);
  height: 20vw;
  width: 100vw;
  position: relative;
}

#discord_logo {
  width: 15%;
  position: absolute;
  top: 50%;
  left: 5vw;
  transform: translate(0, -50%);
}

#discord_info {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(0, -50%);
  width: 60%;
}

#discord_info h1 {
  font-size: 3vw;
  color:var(--chosenWhite);
  margin: 0;
}

#discord_info p {
  font-size: 1.5vw;
  color:var(--chosenWhite);
}


footer {
  width: 100vw;
  height: 7vw;
  background-color: var(--mainColor2);
  position: relative;
}

#icon_box {
  position: absolute;
  transform: translate(0, -50%);
  width: 100%;
  top: 50%;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}

.icon {
  width: 4vw;
}


#photos {
  position: relative;
  width: 100vw;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  margin-bottom: 2vw;
}

#bild {
  width: 100%;
  display: block;
}

#frame {
  width: 12.5%;
  position: relative;
}

#name {
  position: absolute;
  bottom: 1.5vw;
  width: 100%;
  color: var(--chosenWhite);
  text-align:center;
  font-size: .85vw;
  margin: 0;
}