:root{
    --green: #60F280;
    --gray: #b0b0b0;
}

* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #282E32;
    color:#9B9B9B;
    font-family: 'IBM Plex Mono', monospace;
}

.content{
    width: min(100vw, 850px);
    /* border: 1px solid red; */
    flex-direction:column ;
}

.intro{
    border-left: 4px solid var(--green);
    font-family: 'IBM Plex Mono', monospace;
    padding-left: 30px;
    margin-top: 20%;
}

.name{
    color: var(--green);
    font-size: 36px;
    font-weight: bold;

}

.bio{
    font-size:20px;
    font-weight: bold;
}
.projects{
    margin-top: 20%;
}
.section{
    color:var(--green);
    font-size: 30px;
    font-family: 'IBM Plex Mono', monospace;
    border-left: 4px solid var(--green);
    padding-left: 30px;
}

.projects-container{
    margin-top:5%;
}
.project{
    height: 100%;
    width: 100%;
    background-color: #22272b;
    text-decoration: none;
    color:white;
    text-align: center;
    border-radius: 5px;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
    border-bottom: 6px solid #22272b;
    transition: all 211ms;
    user-select: none;
    color:var(--gray);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}
.project-container{
    min-height: 500px;
    display: flex;
    margin-bottom:40px;
}

.project:hover{
    border-bottom: 6px solid var(--green);
    color: white;
    transform: scale(1.05);
}

.project-header{
    position: relative;
}

.project-image{
    width: 100%;
    opacity: 0.3;
    border-radius: 5px;
}

.img-container{
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.project-name{
    color: var(--gray);
    position: absolute;
    font-size: 32px;
    text-align: center;
    width: 100%;
    top:50%;
    transform: translate(0, -50%);
}

.project-body{
    margin: 20px;
    flex-grow: 1;
}

a.reference{
    display: inline-block;
    color: white;
}

a.reference:hover{
    color: var(--gray);
}

.links{
    color: white;
    font-size: 24px;
    margin-top: 20px;
}

.links a{
    color: white;
    font-size: 24px;
}

.links a:hover{
    color: var(--gray);
}

a{
    cursor: pointer;
}
.tags{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0px 20px;
    justify-content: center;
}
.tag{
    padding: 3px 14px;
    margin: 3px;
    border-radius: 25px;
    border: 2px solid var(--gray);
    color: var(--gray);
    /* font-size: 10px; */
    font-weight: bolder;
}

.js{
    border: 2px solid #F0DB4F;
    color: #F0DB4F;
}

.python{
    border: 2px solid #35729F;
    color: #35729F;
}

.node{
    border: 2px solid var(--green);
    color: var(--green);
}

.html{
    border: 2px solid #F16524;
    color: #F16524;
}

.css{
    border: 2px solid #638ff6;
    color: #638ff6;
}

.heroku{
    border: 2px solid #ab74ff;
    color: #ab74ff;
}

.react{
    border: 2px solid #00D8FF;
    color: #00D8FF;
}

.tensorflow{
    border: 2px solid #ffb300;
    color: #ffb300;
}

.oauth{
  border: 2px solid #4287f5;
  color: #4287f5;
}

div.bottom-stuff{
    position: absolute;
    bottom: 20px;
    
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
}