/*color variables*/
/*font variables*/
/*mobile first  320px--898px*/
/*is used to make flex sections and give the sections the right dimensions
*/
.section-style {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/*These ids are used to move the items around them and to give the sections their particular shape and background color*/
#top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  background-color: #4f6367ff;
}

#top .personal-photo {
  -webkit-animation: shimmy 3s infinite;
          animation: shimmy 3s infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

#top .personal-photo img {
  width: 300px;
  background-image: -webkit-gradient(linear, left top, right top, from(#7a9e9f), color-stop(#89acad), color-stop(#99bbbb), color-stop(#a8c9c9), to(#b8d8d8));
  background-image: linear-gradient(to right, #7a9e9f, #89acad, #99bbbb, #a8c9c9, #b8d8d8);
  -webkit-box-shadow: #1a1a1d 4px 4px 5px 0;
          box-shadow: #1a1a1d 4px 4px 5px 0;
  border-top-right-radius: 90px;
  border-top-left-radius: 90px;
  border-bottom-right-radius: 90px;
  border-bottom-left-radius: 90px;
}

@-webkit-keyframes shimmy {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0px, 50px);
            transform: translate(0px, 50px);
  }
}

@keyframes shimmy {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0px, 50px);
            transform: translate(0px, 50px);
  }
}

#About {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: center;
      align-content: center;
  background-color: #7a9e9fff;
}

#Skills {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: center;
      align-content: center;
  background-color: #4f6367ff;
}

#Skills .media-display {
  height: 100%;
}

#Works {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-line-pack: center;
      align-content: center;
  background-color: #7a9e9fff;
  /*---------------------------------------------------------------------------------------------------------------*/
}

#Works .media-display {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

#Works img {
  width: 150px;
}

.typewriter {
  color: #fff;
  font-family: "source sans pro";
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  -webkit-animation: typing 3.5s steps(40, end), blink-caret 0.5s step-end infinite;
          animation: typing 3.5s steps(40, end), blink-caret 0.5s step-end infinite;
}

/* The typing effect */
@-webkit-keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

/*this class defines the titles of the various sections*/
.style-title {
  color: #eef5dbff;
  font-family: "quicksand";
  padding: 10px;
  font-size: 2rem;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-bottom: #1a1a1d 2px solid;
  text-shadow: 2px 1px 2px #1a1a1d;
  margin-top: 70px;
  margin-bottom: 40px;
}

.style-title:hover {
  width: 60%;
  text-align: center;
  border-radius: 35px;
  background-color: #fe5f55ff;
  -webkit-transition: 500ms;
  transition: 500ms;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

/*this class is able to defins the about me text container*/
.about-me-container {
  width: 230px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
  padding: 3px;
  margin-bottom: 150px;
}

.about-me-container:hover {
  -webkit-transition: 1s;
  transition: 1s;
  border-radius: 10px;
  -webkit-box-shadow: #1a1a1d 3px 3px 5px 0;
          box-shadow: #1a1a1d 3px 3px 5px 0;
  background-color: #4f6367ff;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

/*this class difines the text in the section "ABOUT ME"*/
.about-me-text {
  color: #eef5dbff;
  font-family: "source sans pro";
  line-height: 1.7em;
  font-size: .9em;
}

/*this class defines the text in the section "TOP" and the text in the section "MY WORKS"*/
.presentation-text {
  color: #eef5dbff;
  font-family: "source sans pro";
  font-size: 2em;
  width: 300px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  text-shadow: #1a1a1d 5px 5px 5px;
  text-align: center;
  margin: 0 auto;
  -webkit-animation: skew 3s infinite;
          animation: skew 3s infinite;
  -webkit-transform: skew(20deg);
          transform: skew(20deg);
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

.presentation-text span {
  background-color: #fe5f55ff;
}

@-webkit-keyframes skew {
  0% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
  }
  100% {
    -webkit-transform: skewX(-20deg);
            transform: skewX(-20deg);
  }
}

@keyframes skew {
  0% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
  }
  100% {
    -webkit-transform: skewX(-20deg);
            transform: skewX(-20deg);
  }
}

/*defines the icon in the section "MY SKILLS"*/
.icon-container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.animation-icon:hover {
  border-bottom: #1a1a1d 1px solid;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
  -webkit-transition: 1000ms;
  transition: 1000ms;
}

/*defines the text in the section "MY WORKS"*/
.work-text-container {
  text-shadow: #1a1a1d 5px 5px 5px;
}

/*this class is able to move the form*/
.center-form {
  background-color: #4f6367ff !important;
  font-family: "source sans pro" !important;
}

button a {
  text-decoration: none;
  font-family: "source sans pro";
  color: #eef5dbff;
}

button a:hover {
  color: #eef5dbff;
}

nav {
  font-family: "quicksand";
}

.footer-style {
  background-color: #2e2e2e;
  color: #fff;
  width: 100%;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "source sans pro";
}

.footer-icons {
  width: 30px;
  height: 30px;
  padding: 6px;
}

/*for laptop and tablet 899px ..*/
@media screen and (min-width: 899px) {
  .section-style {
    height: 100vh;
    width: 100%;
  }
  .about-me-text {
    font-size: 1.2em;
  }
  #top .personal-photo img {
    width: 300px;
  }
  #About .about-me-container {
    width: 400px;
  }
  #Works .media-display {
    margin-top: 80px;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .icon-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
  }
  .icon-container img {
    width: 80px;
  }
}

/*for extra large screen, tv   1201px and more*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
}
/*# sourceMappingURL=main.css.map */