body {
    background-color: #ffffff;
    height:100%;
    margin:0; 
    padding:0; 
    font-family: 'Open Sans', sans-serif;
}

/* 

.pageTitle h1 {
    padding: 15px;
    text-align: center;
    background-color: rgb(0, 9, 129);
    color: white;
}

.pageTitle h3 {
    margin-top: 4%;
    text-align: center;
}

.buttonPad {
    margin-top: 4%;
    margin-bottom: 4%;
}

.footerClass {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: darkblue;
    color: white;
}

.footerText {
    text-align: center;
} */

@media only screen and (max-width: 1024px) {
    /* Mobile Menu */
    .mattsnavbar {
        display: none;
    }
    .mobgrid {
        display: grid;
    }
    #EVICircle {
        position:fixed;
        right:0;
        top:-35vh;
        z-index:-1;
    }
    .contentContainer {
        width: 98vw;
        padding-left: 2%;
        padding-right: 2%;
        margin-left: 0;
    }
    .contentContainer h1 {
        font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
    }
    .mattsmobnavbar ul {
        line-height: 3;
    }
    .mattsmobnavbar a {
        font: 20px 'Merriweather', serif;
        color: rgb(255, 255, 255);
        padding: 15px;
    }

    .mobsocialList {
        display: inline;
        transform: translateX(120%);
    }
    .mattsmobnavbar {
  
        background: linear-gradient(85deg, rgb(102, 18, 18) 9%, rgb(97, 0, 0) 100%);

    }
    .graphicNavbar {
        background: linear-gradient(85deg, rgb(102, 18, 18) 9%, rgb(97, 0, 0) 100%);
        z-index: -2;
        position: absolute;
        height:8vh;
        width: 100vw;
        transform: skewY(-1deg);
        transform-origin: top left;
        left: 0;
    }
    .largeMarg {
        margin: 20%;
        background-color: rgba(255,255,255,0.5);
        padding: 5%;
    }
}


@media only screen and (max-width: 990px) {
    .mobsocialList {
        font-size: small;
        transform: translateX(0%);
    }
    .graphicNavbar {
        height: 12vh;
    }
}
@media only screen and (max-height: 660px) {
    .mattsnavbar #logo {
        display:none;

    }
    
}
@media only screen and (min-width: 1025px) {
    /* Desktop Menu */
    .mattsmobnavbar {
        display: none;
      
    }
    #EVICircle {
        position:absolute;
        right:0;
        top:0;
        z-index:-1;
    }
    .largeMarg {
        margin-bottom: 3%;
        background-color: rgba(255,255,255,0.5);
        padding: 1%;
    }
    .mattsnavbar {
        z-index: 1;
        position: fixed;
        height: 100%;
        width: 20vw;
    }
    .graphicNavbar {
        background: rgb(218, 229, 255);
        background: linear-gradient(85deg,rgb(165, 32, 32) 9%, rgb(77, 0, 0) 100%);
        z-index: -2;
        position: fixed;
        height: 100%;
        width: 22vw;
        transform: skewX(-6deg);
        transform-origin: top left;
    }
    .alignR {
        text-align: right;
    }
    .alignC {
      text-align: center;
  }
    .mattsnavbar a {
        font-family: 'Merriweather', serif;
        font-size: 35px;
    font-weight: 700;
    font-style: italic;
        color: rgb(255, 255, 255);
        
    }
    .mattsnavbar a:hover {
        font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 35px;
    text-decoration: none;
        background-color: #000000;
        color: transparent;
        text-shadow: 0px 3px 1px gold;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
    }
    .mattsnavbar .mainLinks {
        margin-top: 11vh;
        width: 100%;
    }
    .mattsnavbar ul {
        padding: 0;
        list-style-type: none;
    }
    .socialList {
        position: fixed;
        bottom: 0.5vh;
    }
    .mattsnavbar #logo {
        position: fixed;
        top: 2vh;
        left: 2vw;

    }
    .pad0 {
        padding-right: 1vw;
    }
    .pad1 {
        padding-right: 2vw;
    }
    .pad2 {
        padding-right: 3vw;
    }
    .pad3 {
        padding-right: 4vw;
    }
    .socialItem img {
        width: 2.3vw;
        height: 2.3vw;
    }
    .contentContainer {
        color: rgb(0, 0, 0);
        padding-top: 10vh;
        padding-left: 20vw;
    }
    .contentContainer h1 {
        font-size: 2.2vw;
        font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
    }
    .contentContainer p {
        font-size: 1.2vw;
    }
    .lineSpacing {
        padding-bottom: 3vh;
    }
    

}
.mattsButton {
    font-size: larger;
    font-weight: bolder;
    color: rgb(0, 0, 0);
    border-radius: 8px;
    border-width: 4px;
    border-style: solid;
    border-color:rgb(185, 33, 33);
    background-color: rgb(255, 255, 255);
    padding: 8px;
}
.mattsButton:hover {
    font-size: larger;
    font-weight: bolder;
    color: rgb(0, 0, 0);
    border-radius: 8px;
    border-width: 5px;
    border-style: solid;
    border-color:rgb(185, 33, 33);
    background-color: rgb(250, 236, 236);
    padding: 8px;
    text-decoration: none;
    
}
.socialItem {
    margin-left: 2.4vw;
}

.glowCircle {
    transform-origin: 55vw 110vh;
}

.spinR {
    -webkit-animation: rotatingR 60s linear infinite;
}

.spinL {
    -webkit-animation: rotatingL 60s linear infinite;
}

.wedgeClass {
    transform: rotate(90deg);
    transition: transform 2.35s;
}

@-webkit-keyframes rotatingL {
    from {
        -webkit-transform: rotate(360deg);
    }
    to {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes rotatingR {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
/* 
.hideme {
    opacity: 0;
  } */




.bubble::before {
    position: absolute;
    z-index: -1;
    content: '';
    left: calc(20% - 10px);
    bottom: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: rgb(185, 33, 33) transparent transparent transparent;
    -webkit-transform: translateY(11px);
  transform: translateY(11px);
}



/* The below effect is borrowed from https://codepen.io/techshiva/pen/JVbKLM */
  
@-webkit-keyframes buzz-out-on-hover {
    10% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    20% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
    30% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    40% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
    50% {
      -webkit-transform: translateX(2px) rotate(1deg);
      transform: translateX(2px) rotate(1deg);
    }
    60% {
      -webkit-transform: translateX(-2px) rotate(-1deg);
      transform: translateX(-2px) rotate(-1deg);
    }
    70% {
      -webkit-transform: translateX(2px) rotate(1deg);
      transform: translateX(2px) rotate(1deg);
    }
    80% {
      -webkit-transform: translateX(-2px) rotate(-1deg);
      transform: translateX(-2px) rotate(-1deg);
    }
    90% {
      -webkit-transform: translateX(1px) rotate(0);
      transform: translateX(1px) rotate(0);
    }
    100% {
      -webkit-transform: translateX(-1px) rotate(0);
      transform: translateX(-1px) rotate(0);
    }
  }
  @keyframes buzz-out-on-hover {
    10% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    20% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
    30% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg);
    }
    40% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg);
    }
    50% {
      -webkit-transform: translateX(2px) rotate(1deg);
      transform: translateX(2px) rotate(1deg);
    }
    60% {
      -webkit-transform: translateX(-2px) rotate(-1deg);
      transform: translateX(-2px) rotate(-1deg);
    }
    70% {
      -webkit-transform: translateX(2px) rotate(1deg);
      transform: translateX(2px) rotate(1deg);
    }
    80% {
      -webkit-transform: translateX(-2px) rotate(-1deg);
      transform: translateX(-2px) rotate(-1deg);
    }
    90% {
      -webkit-transform: translateX(1px) rotate(0);
      transform: translateX(1px) rotate(0);
    }
    100% {
      -webkit-transform: translateX(-1px) rotate(0);
      transform: translateX(-1px) rotate(0);
    }
  }
  .buzz-out-on-hover {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .buzz-out-on-hover:hover, .buzz-out-on-hover:focus, .buzz-out-on-hover:active {
    -webkit-animation-name: buzz-out-on-hover;
    animation-name: buzz-out-on-hover;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }

/* Below is borrowed from https://github.com/IanLunn/Hover */



/* Bob */
@-webkit-keyframes hvr-bob {
    0% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
    50% {
      -webkit-transform: translateY(-4px);
      transform: translateY(-4px);
    }
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  @keyframes hvr-bob {
    0% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
    50% {
      -webkit-transform: translateY(-4px);
      transform: translateY(-4px);
    }
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  @-webkit-keyframes hvr-bob-float {
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  @keyframes hvr-bob-float {
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  .hvr-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
  }