*{

  box-sizing: border-box;

}



h1, h2, h3, html, body, p{

  font-family: 'Rhodium Libre';

  letter-spacing: 0.1em;

  margin: 0px;

  padding: 0px;

  color: #E3E6FF;

}



h2{

  color: #4CC4DE;

  font-size: large;

}



html, body{

  height: 100%;

  background-color: #222136;

}



img{

  color: red;

}



.fixed-bg{

  flex-wrap: wrap;

  flex-direction: column;

  justify-content: space-around;

  align-items: center;

  display: flex;

  overflow: hidden;

  min-height: 100%

}



.top-line-card{

  margin-right: 10%;

  width: 700px;

}



.bottom-line-card{

  margin-left: 10%;

  width: 700px;

}



.line-white-horizontal{

  height: 1px;

  background-color: #E3E6FF;

}



.line-white-vertical{

  width: 1px;

  background-color: #E3E6FF;

}



.header{

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding-top: 50px;

}



.card{

  width: 100%;

  max-width: 500px;

  min-width: 500px;

  margin-left: -15px;

  display: flex;

  flex-wrap: wrap;

  flex-direction: column;

  align-self: center;

  padding: 32px;

  padding-left: 42px;

  justify-content: center;

  z-index: 999;

  overflow: hidden;

}



@media (max-width: 600px) {

  .card {

    max-width: auto;

    min-width: auto;

  }

}



.vertical-lines-row{

  display: flex;

  flex-wrap: nowrap;

  flex-direction: row;

  align-self: center;

  margin-left: 30px;

  margin-right: 30px;

  padding-left: 15px;

}



.terminal-icon{

  max-width: 30px;

  margin-left: -15px;

  margin-top: 32px;

  align-self: flex-start;

  padding-top: 15px;

  padding-bottom: 15px;

  background: #222136;

}



.links-icons{

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  max-width: 30px;

  margin-left: -15px;

  margin-bottom: 20px;

}



.overlay-icon{

  background: #222136;

  padding: 3px;

}



.top-icon{

  padding-top: 15px;

}



.bottom-icon{

  padding-bottom: 15px;

}



.mail-icon{

  margin-left: -10px;

  margin-right: -10px;

}



.links{

  display: flex;

  flex-direction: column;

  align-items: flex-end;

}



a:link {

  color: #E3E6FF;

  background-color: transparent;

  text-decoration: none;

  align: end;

}



a:visited {

  color: #E3E6FF;

  background-color: transparent;

  text-decoration: none;

}



a:hover {

  color: #4CC4DE;

  background-color: transparent;

  text-decoration: none;

}



.pictures{

  padding-top: 32px;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  align-items: flex-end;

  column-gap: 150px;

}



@media (max-width: 600px) {

  .pictures{

    column-gap: 0px;

  }

}



.pictures-bottom{

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: flex-end;

}



.pictures-right{

  align-self: end;

}



.online-gallery{

  padding-top: 30px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.margin-top-25{

  margin-top: 25px;

}



.margin-right-300{

  margin-right: 300px;

}



.margin-left-300{

  margin-left: 300px;

}



.margin-bottom-minus-25{

  margin-bottom: -25px;

}



.margin-top-minus-25{

  margin-top: -25px;

}



.margin-top-minus-300{

  margin-top: -300px;

}