indexStyle.css

/* Keyframes */

@-webkit-keyframes myanim {
    0%  {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
  100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes myanim {
    0%  {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
         -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes myreverseanim {
    0%  {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
         -webkit-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
-webkit-@keyframes typewriter{
  from{width: 0;}
  to{width: 290px;}
}
-ms-@keyframes typewriter{
  from{width: 0;}
  to{width: 290px;}
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 290px;}
}

-webkit-@keyframes blinkTextCursor{
  from{border-right-color: rgba(0,0,0,0.8);}
  to{border-right-color: transparent;}
}
-ms-@keyframes blinkTextCursor{
  from{border-right-color: rgba(0,0,0,0.8);}
  to{border-right-color: transparent;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(0,0,0,0.8);}
  to{border-right-color: transparent;}
}

-webkit-@keyframes fadeOutEffect {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

-ms-@keyframes fadeOutEffect {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes fadeOutEffect {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

-webkit-@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

-ms-@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

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

/* Loading Screen */

.line-1{
    position: relative;
    top: 50%;
    margin: 0 auto;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    color: blue;
    font-family: 'Anonymous Pro', monospace;
    border-right: 2px solid black;

    font-family: Megrim;
  font-size: 180%;
  color: rgb(76, 79, 77);
font-size: 40px;
  font-weight: 200;
}

/* Animation */
.anim-typewriter{
  -webkit-animation: typewriter 3s steps(20) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
    -ms-animation: typewriter 3s steps(20) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
    -webkit-animation-delay: 1s;
    -ms-animation-delay: 1s;
}


#loading{
    z-index: 1000;
    height: calc (100vh + 40px);
    width: 100vw;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: white;
  color: white;
  opacity: 1;
  transition: 0.5s;
  visibility: visible;

    -webkit-animation: fadeOutEffect;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 5s;

    -ms-animation: fadeOutEffect;
    -ms-animation-duration: 3s;
    -ms-animation-delay: 5s;

    animation: fadeOutEffect;
    animation-duration: 3s;
    animation-delay: 5s;
}
#loading.hidden{
    visibility: hidden;
    opacity: 0;
}
.loading-screen-text {
     position: relative;
    top: 43%;
    margin: 0 auto;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);

    font-family: Megrim;
  font-size: 40%;
  color: rgb(76, 79, 77);
font-size: 25px;
  font-weight: 200;
}

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: rgb(247, 247, 247);
}
.landing {
  z-index: 0;
  height: 100vh;
  width: 100vw;
  position: fixed;
  background-color: rgb(247, 247, 247);
}
.header-div {
  -webkit-flex-direction: column;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-justify-content: center;
  -ms-align-items: center;
  -ms-flex-pack: center;
  -webkit-display: flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-pack: center;
}
.header-div h1 {
  font-family: Megrim;
  font-size: 60px;
  color: rgb(76, 79, 77);
  margin: 0;
  padding: 0;
  font-size: 40px;
}
.line {
  color: rgb(48, 211, 82);
}
  .motto {
    font-weight: lighter;
    width: auto;
    height: auto;
    text-align: center;
    color: rgb(76, 79, 77);
    font-size: 22px;
    margin: 10px 0 0 0;
    padding: 0 10px 25px 10px;
    border-bottom: .5px solid rgb(217, 217, 217);
    border-width: thin;
    font-weight: 200;
  }
  .social-media-container {
    z-index: 10;
    width: auto;
    height: auto;
    position: absolute;
    top: 20px;
    left: 10px;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-justify-content: center;
    -ms-align-items: center;
    -ms-flex-pack: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-pack: center;
  }
  .social-media-container a {
    margin: 0 10px 0 10px;
  }
  .social-media-logo:hover {
    cursor: grab;
  }
  .social-media-logo {
    height: 60px;
    width: 60px;
    z-index: 10;
  }
  #instagram {
    height: 60px;
    width: 60px;
    margin: -8px;
  }
  #facebook {
    height: 70px;
    width: 70px;
    margin: -10px;
  }
  #twitter {
    height: 65px;
    width: 65px;
    margin: -10px;
  }
  .contact-button {
    height: 80px;
    width: 75px;
    position: absolute;
    top: 0;
    right: 20px;
    background-color: rgb(45, 210, 81);
  }
  .contact-button p {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
    font-family: Poiret One;
    font-weight: bold;
    font-size: 18px;
    color: white;
  }
  .navigation ul {
    -webkit-flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-justify-content: center;
    -ms-align-items: center;
    -ms-flex-pack: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-pack: center;
  }
  .navigation ul li {
    margin: 0 15px 0 15px;
  }
  #active-a {
    color: rgb(45, 210, 81);
  }
  .navigation ul li a {
    font-size: 20px;
    color: rgb(76, 79, 77);
  }
  .navigation ul li a:hover {
    text-decoration: none;
    color: rgb(45, 210, 81);
  }
  .home {
    z-index: 100;
    background-color: rgb(45, 210, 81);
    position: absolute;
    top: 70vh;
    height: auto;
    width: 100%;
    overflow: hidden;
  }
  .person-icon-container {
    height: 230px;
    width: 230px;
    margin: 0px 0 10px 0;
    border-radius: 50%;
    border: 5px solid;
    border-top-color: rgb(150, 233, 168);
    border-right-color: rgb(150, 233, 168);
    border-bottom-color: rgb(31, 147, 56);
    border-left-color: rgb(31, 147, 56);
    -webkit-flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-justify-content: center;
    -ms-align-items: center;
    -ms-flex-pack: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-pack: center;
    -webkit-animation: myanim 1s linear infinite;
  }
  .person-icon {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    margin: auto;
    -webkit-animation: myreverseanim 1s linear infinite;
  }
  .title-row {
    width: 100%;
    margin: 20px auto 20px auto;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-justify-content: center;
    -ms-align-items: center;
    -ms-flex-pack: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-pack: center;
  }
  .title-row img {
    margin: 0;
    height: 60px;
    width: 50px;
    opacity: 1;
  }
  .title-message {
    color: white;
  }
  .about-p {
    color: white;
    font-size: 18px;
    text-align: justify;
    width: 85%;
    font-family: Questrial;
    margin: 0;
    padding-left: 20px;
    border-left: 5px solid rgb(150, 233, 168);
  }
  .contact-container {
    margin: 20px 0 0 0;
    width: 100%;
    height: auto;
    padding-bottom: 60px;
    background-color: rgb(247, 247, 247);
  }
  .contact-button:hover {
    cursor: pointer;
  }
  .header-text {
    width: 100%;
    text-align: center;
    padding: 20px 0 0 0;
    font-family: Megrim;
    font-size: 70px;
  }
  .spacer {
    height: 50px;
  }
  .contact-image {
    text-align: center;
    padding: 30px 0 30px 0;
  }
  .contact-header {
    color: rgb(76, 79, 77);
    margin: -20px 0 70px 0;
  }
  .form-container {
    margin: auto;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-justify-content: center;
    -ms-align-items: center;
    -ms-flex-pack: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-pack: center;
  }
  input {
    width: 50%;
    font-size: 50px;
  }
  form {
    margin: auto;
  }
  label {
    font-size: 40px;
  }
  .input-field label {
    font-size: 20px;
    top: -10px;
    left: 5em;
  }
  .input-field {
    margin-bottom: 2.2em;
  }
  input[type=text]:not(.browser-default) {
    height: 30px;
  }
  .input-field .prefix {
    font-size: 3em;
  }
.input-field .prefix~input {
    font-size: 20px;
    margin-left: 2.5em !important;
}
.input-field .prefix~textarea {
    font-size: 20px;
    margin-left: 2.5em !important;
}
  .input-field .prefix~input {
    margin-left: 5em;
  }
  /*labels in input box */
  .input-field .prefix~label, .input-field .prefix~.validate~label, .input-field .prefix~.autocomplete-content {
    left: 1.5em;
  }
  .input-field .prefix~textarea {
    margin-left: 5em;
  }
  .submit-button {
    width: 100%;
  }
    .footer-container {
    background-color: rgb(45, 210, 81);
        height: auto;
        padding: 20px 0 20px 0;

}
.footer-container-a, .footer-container-b {
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-justify-content: center;
    -ms-align-items: center;
    -ms-flex-pack: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-pack: center;
}
.footer-container h1, p {
    color: white;
    font-family: Questrial;
}
.footer-container h1 {
    font-size: 30px;
    border-left: 5px solid rgb(150, 233, 168);
    padding-left: 10px;
}
.footer-container p {
    font-size: 20px;
}
.inner-footer {
    width: 380px;
    -webkit-flex-direction: column;
    -webkit-justify-content: left;
    -webkit-align-items: left;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-justify-content: left;
    -ms-align-items: left;
    -ms-flex-pack: left;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    flex-pack: left;
}
.footer-social-media-container {
    padding: 10px 0;
    -webkit-flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-justify-content: center;
    -ms-align-items: center;
    -ms-flex-pack: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-pack: center;
}
.footer-social-media-container a {
    margin: 0 10px;
}
  @media screen and (min-width: 500px) {
    .about-p {
      width: 800px;
    }
    .form-container {
      width: 800px;
    }
    .contact-button {
      right: 50px;
    }
  }
  @media screen and (max-width:414px) {
    ::-webkit-scrollbar {
      width: 0px;
      /* remove scrollbar space */
      background: transparent;
      /* optional: just make scrollbar invisible */
    }
      .line-1{
top: 46%;
}
      .footer-social-media-container {
-webkit-flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-justify-content: center;
    -ms-align-items: center;
    -ms-flex-pack: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-pack: center;
}
      .footer-social-media-container {
-webkit-flex-direction: row;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-justify-content: center;
    -ms-align-items: center;
    -ms-flex-pack: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-pack: center;
}
  }
  @media screen and (max-width: 375px) {
    .title-message {
      font-size: 60px;
    }
    .contact-button {
      right: 10px;
    }
  }
  @media screen and (max-width: 320px) {
    .motto {
      font-size: 20px;
    }
    .header-div {
      margin-top: -60px;
    }
    .header-div h1 {
      font-size: 35px;
    }
    .navigation ul li a {
      font-size: 17px;
    }
    .social-media-container a {
      height: 30px;
      width: 30px;
    }
    .social-media-container {
      margin: 0;
      left: 0;
      width: 90vw;
    }
    .contact-button {
      display: none;
    }
    .title-message {
      font-size: 50px;
    }
  }