propernaming/css/main.css

#title-text {
  text-align: center;
  font-size: xxx-large;
  padding-bottom: 2em;
  padding-top: 0.5em;
  color: white;
  margin: 0;
  font: 72px normal; }

.padding-left-and-right {
  padding: 0 1em; }

.blue-button:hover, .blue-button {
  background-color: #242c6c;
  border: solid transparent 0px;
  color: white;
  padding: 1em;
  cursor: pointer;
  box-shadow: 5px 5px 10px #000000; }

@keyframes button-hover {
  from {
    box-shadow: 5px 5px 10px #000000; }
  to {
    box-shadow: 10px 10px 10px #000000, 2px 3px 5px rgba(36, 44, 108, 0.3) inset; } }

.blue-button:hover {
  animation-name: button-hover;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

.background-grey {
  background-color: grey; }

.background-white {
  background-color: white; }

img {
  max-width: 100%; }

.img-center {
  display: block;
  margin: auto; }

.parallax {
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

.text-white {
  color: white; }

@media (min-width: 800px) {
  #title-text {
    max-width: 50%;
    padding-left: 25%; } }

@media (max-width: 800px) {
  #title-text {
    max-width: 50%;
    padding-left: 25%;
    font: 35px normal; }
  h1, h2, h3, h4, h5, h6, h7 {
    text-align: center; }
  .hidden-mobile {
    display: none; }
  .flex {
    flex-direction: column;
    align-items: center; } }