StyleSheet.css

/* START - Text Styles */     
    
    body {
        font-family: 'Comfortaa', sans-serif;
        margin: 0;
        color: #272727;
        background: #f8f7ff;
    }

    .HomeTitle {
        font-size: 2.3em;
        font-weight: 600
    }

    .OtherTitle {
        font-size: 4em;
        font-weight: 600;
    }

    .HomeText {
        width: 25%;
        height: 30%;
        background-color: transparent;
        padding: 10px 10px;
        margin: 10px;
        border-radius: 20px;
        text-align: center;
        line-height: 1.6em;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 500;
        position: relative;
    }
    
    .BoxTitle {
        font-size: 1.4em;
        font-weight: 500;
    }
    
    .BoxText {
        font-size: 0.8em;
    }

    .HomeDesc {
        width: 40%;
        font-size: 1.3em;
        font-weight: 400;
        line-height: 1.6em;
    }


    .HomeSub {
        font-size: 1.35em;
        font-weight: 600;
        line-height: 1.2em;
        color: #90ee90;
    }
    
/* END - Text Styles */ 

/* START - Media Modification */       
    
    .imgMagGlass {
        width: 13%;
        position: relative;
        padding: 0px;
    }
    
    .imgCogWheel {
        width: 13%;
        position: relative;
        padding: 0px;
    }
    
    .imgPeople {
        width: 13%;
        position: relative;
        padding: 0px;
    }

    .imgHome {
        width: 70%;
        position: absolute;
        padding: 0px;
    }

.imgWhiteLogo{
    width: 20%;
    padding: 0px;
    z-index: 100;
    position: absolute;
    top: 0.1%;
    left: 8%;
}
    
/* END - Media Modification */ 

/* START - Positioning Elements */    
   
    .P13LD {
        position: absolute;
        top: 65%;
        left: 5%;
    }
    
    .P13MD {
        position: absolute;
        top: 65%;
        left: 37.5%;
    }
    
    .P13RD {
        position: absolute;
        top: 65%;
        left: 70%;
    }

    .P11LU {
        position: absolute;
        top: 13%;
        left: 4%;
    }

    .P14RU {
        position: absolute;
        top: -7%;
        right: 0%;
        z-index: -5;
    }

    .P12LU {
        position: absolute;
        top: 21%;
        left: 4%;
    } 

    .P16LC {
        position: absolute;
        top: 51%;
        left: 2.7%;
    }

    .P16LD {
        position: absolute;
        top: 51%;
        left: 17%;
    }

    .P12LD {
        position: absolute;
        top: 43%;
        left: 4%;
    }

.P36LU {
    position: absolute;
    top: 30%;
    left: 35%;
}

.P36MU {
    position: absolute;
    top: 30%;
    left: 51.9%;
}

.P35MC {
    position: absolute;
    top: 35%;
    left: 20%;
}

.P36LD {
    position: absolute;
    top: 52%;
    left: 29%;
}

.P36RD {
    position: absolute;
    top: 52%;
    left: 43%;
}



    
/* END - Positioning Elements */ 


/* START - Video Chat

   
   
    video {
      max-width: calc(50% - 100px);
      margin: 0 50px;
      box-sizing: border-box;
      border-radius: 2px;
      padding: 0;
      box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
    }
    .copy {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      color: rgba(0, 0, 0, 0.5);
    }

END - Video Chat */

/* START - Button types */

.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #90ee90;
  border-radius: 2em;
  color: #90ee90;
  cursor: pointer;
  display: flex;
  align-self: center;
font-weight: 400;
        font-size: 1.05em;
  line-height: 1;
     font-family: 'Comfortaa', sans-serif;
  margin: 20px;
  padding: 0.4em 2.7em;
  text-decoration: none;
  text-align: center;
  font-family: 'Comfortaa', sans-serif;
}
.btn:hover, .btn:focus {
  color: #90ee90;
  outline: 0;
}   

 .fourth {
  border-color: #90ee90;
  color: #90ee90;
  background-image: linear-gradient(120deg, #90ee90 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  transition: background 600ms ease-in-out;
}
.fourth:hover {
  background-position: 0;
    color: #f8f7ff;
}    


.tweetArea {
    background-color:black;
}

/* END - Button types */

/* START - New Nav Bar */

.container {
	width: 90%;
	margin: 0 auto;
}

header {
  background: #90ee90;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 30px;
  padding-top: 23px;
  position: relative;
}

nav a { 
  color: #424242;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #424242;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #424242;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

/* END - New Nav Bar */


/* START - Loading Animation

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.loadingText {
  color: #90ee90;
  display: inline-block;
  margin-left: 5px;
    font-size: 1.5em;
}

.bounceball {
  position: relative;
  display: inline-block;
  height: 37px;
  width: 15px;
}
.bounceball:before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #90ee90;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-animation: bounce 500ms alternate infinite ease;
          animation: bounce 500ms alternate infinite ease;
}

@-webkit-keyframes bounce {
  0% {
    top: 30px;
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    -webkit-transform: scaleX(2);
            transform: scaleX(2);
  }
  35% {
    height: 15px;
    border-radius: 50%;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}

@keyframes bounce {
  0% {
    top: 30px;
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    -webkit-transform: scaleX(2);
            transform: scaleX(2);
  }
  35% {
    height: 15px;
    border-radius: 50%;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}

END - Loading Animation */