@import url("https://fonts.googleapis.com/css?family=Federo|IM+Fell+DW+Pica&display=swap");
@import url("https://fonts.googleapis.com/css?family=Hind+Madurai:400,600&display=swap");
.bioDiv .head a, .archive ul a, .contact .contactCardContainer .card a, footer a {
  color: #c23934;
  text-decoration: none; }

.card,
.skill,
.table,
.tit {
  opacity: 0; }

.hidden {
  display: none; }

body {
  text-align: center;
  background-color: #f4f6f9;
  font-family: 'Hind Madurai', sans-serif;
  margin: 0; }

section {
  height: 100vh; }

@media (max-width: 510px) {
  section {
    height: 120%; } }
@media (max-width: 415px) {
  section {
    height: 110%; } }
header {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/maxgrid.png");
  background-position: center;
  background-size: contain;
  position: relative; }
  header h1 {
    color: #16325c;
    text-align: left;
    font-family: 'Federo', sans-serif;
    margin: 7% 11%; }
  header .greyBar {
    background-color: #16325c;
    width: 100%;
    height: 35%;
    position: absolute;
    bottom: 0; }
    header .greyBar h1 {
      color: #f4f6f9; }
  header nav {
    width: 100%;
    position: sticky;
    top: 10%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 2; }
    header nav div {
      grid-column: 2/4;
      display: flex;
      flex-direction: row-reverse;
      background-image: linear-gradient(to right, transparent 25%, #d8edff 99%);
      width: 100%; }
      header nav div a {
        padding: 1% 2%;
        margin: 0 1%;
        color: #808fa6;
        text-decoration: none; }
      header nav div .red {
        color: #c23934; }

@media (max-width: 890px) {
  nav {
    display: none; }
    nav .navLinks {
      display: none; }
      nav .navLinks a {
        display: none; } }
@media (max-width: 415px) {
  nav {
    display: none; }
    nav .navLinks {
      display: none; }
      nav .navLinks a {
        display: none; } }
.bioDiv {
  text-align: left;
  width: 100%;
  height: 100%;
  padding: 2%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 0.2fr 1fr;
  background-color: #ecf6ff; }
  .bioDiv .head {
    padding: 2%;
    color: #16325c; }
    .bioDiv .head h3 {
      box-shadow: 0 1px #d25b57; }
  .bioDiv .imgContainer {
    background-image: url("../assets/profilesmile.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 35%;
    height: 90%;
    margin: -129px 50px;
    border: 8px solid #e0e5ee;
    z-index: 2; }
  .bioDiv .article {
    width: 90%;
    padding: 2%;
    grid-column: 1/2;
    box-shadow: 0 0 1px #bcc4d0;
    font-family: 'Hind Madurai', sans-serif;
    line-height: 1.6em; }
  .bioDiv h2 {
    grid-row: 3;
    grid-column: 2/3;
    justify-content: center;
    margin: 0;
    color: #c23934;
    text-align: center; }
  .bioDiv .table {
    grid-column: 2/3;
    grid-row: 4;
    width: 90%;
    padding: 2%; }
    .bioDiv .table td {
      color: #808fa6;
      padding: 1%; }
      .bioDiv .table td:hover {
        color: #c23934; }

@media (max-width: 720px) {
  .bioDiv .article,
  .bioDiv .table,
  .bioDiv h2 {
    grid-column: 1/3; } }
@media (max-width: 563px) {
  .bioDiv .head {
    width: 100%; }
    .bioDiv .head h3 {
      grid-column: 1/3; }
  .bioDiv .imgContainer {
    width: 55%; }
  .bioDiv .article,
  .bioDiv .table,
  .bioDiv h2 {
    grid-column: 1/3; } }
@media (max-width: 415px) {
  .bioDiv .head {
    width: 100%; }
    .bioDiv .head h3 {
      grid-column: 1/3; }
  .bioDiv .imgContainer {
    width: 55%; }
  .bioDiv .article {
    grid-column: 1/3; }
  .bioDiv h2 {
    grid-column: 1/3; }
  .bioDiv .table {
    grid-column: 1/3; } }
.archive {
  width: 100%;
  background-image: linear-gradient(#d8edff, #e0e5ee);
  padding: 10% 3%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; }
  .archive h3 {
    text-align: right;
    box-shadow: 0 1px #c23934; }
  .archive ul {
    grid-column: 1/3; }
    .archive ul li {
      list-style: none; }
    .archive ul p {
      font-weight: lighter;
      margin: 3%;
      text-align: justify; }
    .archive ul a {
      color: #16325c; }
  .archive .proLink {
    color: #c23934;
    margin: 0;
    text-align: justify;
    grid-column: 1;
    display: block; }

@media (max-width: 523px) {
  .archive {
    padding: 5% 1%; }
    .archive ul {
      grid-column: 1/4;
      padding: 2%; } }
@media (max-width: 415px) {
  .archive {
    padding: 5% 1%;
    margin: 0 2%; }
    .archive ul {
      grid-column: 1/4;
      margin: 0 auto;
      padding: 2%; } }
.contact {
  padding: 1%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center;
  background-image: url("../assets/maxgrid.png");
  background-position: center;
  background-size: contain; }
  .contact .title {
    grid-column: 2/4;
    text-align: right;
    color: #16325c; }
  .contact .contactCardContainer {
    width: 100%;
    grid-column: 1/4;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .contact .contactCardContainer .card {
      background-image: linear-gradient(#f4f6f9, #d8edff);
      padding: 7%;
      height: 214px;
      margin: 0 1% 1%; }
      .contact .contactCardContainer .card .form {
        width: 100%;
        text-align: left;
        color: #16325c;
        padding: 10%; }

@media (max-width: 510px) {
  .contact {
    padding: 1%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;
    background-image: url("../assets/maxgrid.png"); }
    .contact .contactCardContainer {
      width: 100%;
      grid-column: 1/4;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
      .contact .contactCardContainer .card {
        background-image: linear-gradient(#f4f6f9, #d8edff);
        padding: 7%;
        height: 94px;
        margin: 0 1% 2%; } }
@media (max-width: 415px) {
  .contact {
    padding: 1%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;
    background-image: url("../assets/maxgrid.png"); }
    .contact .contactCardContainer {
      width: 100%;
      grid-column: 1/4;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
      .contact .contactCardContainer .card {
        background-image: linear-gradient(#f4f6f9, #d8edff);
        padding: 7%;
        height: 94px;
        margin: 0 1% 2%; } }
footer {
  color: #c23934;
  background-color: #16325c;
  padding: 7%;
  display: flex;
  flex-flow: row-reverse; }

@keyframes anim1 {
  from {
    transform: translateY(100px);
    opacity: 0; }
  to {
    transform: translateY(0);
    opacity: 1; } }
@keyframes anim2 {
  from {
    transform: translateX(-250px);
    opacity: 0; }
  to {
    transform: translateX(0);
    opacity: 1; } }
@media (max-width: 760px) {
  @keyframes anim2 {
    from {
      opacity: 0; }
    to {
      opacity: 1; } } }
@media (max-width: 415px) {
  @keyframes anim1 {
    from {
      transform: translateY(-100px);
      opacity: 0; }
    to {
      transform: translateY(0);
      opacity: 1; } }
  @keyframes anim2 {
    from {
      opacity: 0; }
    to {
      opacity: 1; } } }

/*# sourceMappingURL=main.css.map */