html, body{
    margin: 0;
    height:100%;
    padding: 0px;
    /* font-family: monospace; */
    font-family: atlas-light,helvetica,arial,sans-serif;
    font-weight: 50;

}

header
{
    height: 100vh;
    background-image: url('/assets/hero3.gif');
    background-color: black;
    /* flex-box thing */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover; 
    margin-bottom: 30px;
    color: #eee;
}
.down-button{
  font-size:2.5em;
}
.card-text{
  background-color: white;
}

.hero-wrapper{
        width:90%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        height: 90vh;
}

ul{
    list-style-type: none;  
}

li{
    float:left;
    padding: 16px;
}

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    border: 1px solid #c5b99e; /* Green */
    border-radius: 3px;
    text-align:center;
}

.button:hover {
    background-color: #d5ad36; /* Green */
    color: white;
    cursor:pointer;
}

.portfolio-button{
    background-color: #c5b99e;
    color: black;

}


.hero-title{
    grid-column: 1 / 3;
    grid-row: 1;
    font-size: 30px;
}

.hero-subtitle{
    grid-column: 1 / 3;
    grid-row: 3;
    font-size: 20px;
}

.hero-button-wrapper{
    grid-column: 1 / 2;
    grid-row: 4;
    font-size: 20px;
    float:right;
}

#down
{
    position: absolute;
    top:85vh;
    padding: 20px;
    font-size: 2.5em;
}

#down:hover
{
    cursor: pointer;
}

#pychat:hover{
  background-image: url(assets/pyChat.gif);
}

#pychat{
  background-image: url(assets/pyChat.png);


}

a { 
  color: inherit; 
  text-decoration: none;

} 

.project-image{
  width: 90%;
  height: 300px;
  background-repeat: no-repeat;

}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  padding: 10px;
  margin: 10px;
  background-color:#fafafa;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-area {
  width: 100%;
  height: 100%;
}


@keyframes delayedfade {
  0% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 1;}

}

.delayed-fade{
  animation-name: delayedfade;
  animation-duration: 3s;
}


@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -moz-transform: translateY(0);
      transform: translateY(0);
    }
    40% {
      -moz-transform: translateY(-30px);
      transform: translateY(-30px);
    }
    60% {
      -moz-transform: translateY(-15px);
      transform: translateY(-15px);
    }
  }
  @-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    40% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
    }
    60% {
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px);
    }
  }
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    40% {
      -moz-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
    }
    60% {
      -moz-transform: translateY(-15px);
      -ms-transform: translateY(-15px);
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px);
    }
  }
  
  .arrow {
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
    background-size: contain;
  }
  
  .bounce {
    -moz-animation: bounce 3s infinite;
    -webkit-animation: bounce 3s infinite;
    animation: bounce 3s infinite;
  }