body, html {
  margin: 0;
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.page {
  position: absolute;
  margin: 0px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.parallax_top {
  background-image: url("../assets/sky_background.jpg");

  width: 100%;
  height: 160%;
  padding-top: 5%;
  padding-bottom: 10%;

  /* Create the parallax scrolling effect */
   background-attachment: fixed;
   background-size: cover;

}

@font-face {
  font-family: IBM;
  src: url("../assets/IBMPlexSans-Thin.ttf");
}

@font-face {
  font-family: Handwritten;
  src: url("../assets/AmaticSC-Regular.ttf");
}

.handwritten {
  font-family: Handwritten;

}

.logo {
  width: 345px;
  height: 366px;
  margin: auto;
  background-size: cover;

  background-image: url("../assets/logo_with_name_HD.png");

  -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

.title_text {
  text-align: center;

  color: #F7F7F5;
  font-family: IBM;
  font-size: 30px;
  margin-bottom: 10%;
  -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 5s; /* Firefox < 16 */
        -ms-animation: fadein 5s; /* Internet Explorer */
         -o-animation: fadein 5s; /* Opera < 12.1 */
            animation: fadein 5s;
}

.big_image_card {

  min-height: 200px;
  max-height: 300px;
  min-width: 100%;
  text-align: center;
  font-family: IBM;
  font-size: 30px;
  padding-top: 10%;
  padding-bottom: 10%;
  color: #F7F7F5;
  background-size: cover;
}

.small_image_card {
  min-height: 100px;
  max-height: 140px;
  text-align: center;
  font-family: IBM;
  font-size: 30px;
  padding-top: 5%;
  padding-bottom: 5%;
  color: #F7F7F5;

}

.word_lines {
  background:#F7F7F5;
  padding:0 10px;
}

.wor_bar {
  background-color: #F7F7F5;
  font-weight: bold;
  color: #404144;
  font-family: IBM;
  min-height: 500px;
  text-align:justify;
  margin-bottom: 0%;
  padding: 50px 50px 50px 50px;
}

.experience_block {
  position: relative;
  margin: auto;
  width: 900px;
  height: 300px;
}

.experience_picture {
  width: 20%;
  height: 60%;
  float: left;
  margin-right: 1%;
  background-size: cover;
}
.experience_picture img {
  max-width: 100%;
  max-height: 100%;
}

.experience_text {
  float: left;
  width: 600px;
  font-weight: bold;
  margin-left: 1%;
}


.about_me_bar {
  font-size: 35px;
  font-weight: 900;
  text-align: center;
  border-bottom: 1px solid #000;
  line-height: 0.1em;
  margin: 10px 0 20px;
}

.side_by_side {
  float: left;
  width: 25%;
  margin-top: 20px;
  margin-right: 8%;
  padding-bottom: 1%;
  margin-bottom: 1%;
}

.image_container {
  background-size: cover;
  width: 100%;
  height: 100%;
}

.image_container:hover {
    opacity: 0.7;
}

.social_bar {
  background-color: #F7F7F5;
  color: #404144;
  padding-top: 20px;
  font-family: IBM;
  min-height: 100px;
}
.centered_box {
  margin: auto;
  height: auto;
  width: 175px;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-linkedin {
  background: #000000;
  color: #F7F7F5;
}

.fa-instagram {
  background: #000000;
  color: #F7F7F5;
}

.fa-github {
  background: #000000;
  color: #F7F7F5;
}




@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}