@font-face
{
font-family: Saiyansans;
src: url('saiyan_sans/Saiyan-Sans.ttf');
}
.indigo{
    color: #4b0082 !important;
}
.orange{
    color: #ffae42 !important
}
.has-background-indigo{
    background-color: #4b0082 !important
}
.has-background-orange{
    background-color: #FFAe42 !important
}
#head{
    font-family: 'Saiyansans','orbitron', sans-serif;
    font-size: 4.0rem;
    color:#ffae42;
}


#dball{
    height: 20%;
    width: 20%;
    transition: all .5s;
    transition: rotate 0s;
}
/* #brand{
    text-shadow: 1px 1px gray;
    color: orange;
    font-size: 4rem;
    font-weight: 700;
    position: relative;
    top: -25px;
} */
#nav{
    height: 5% 
}

.navicon{
    /* color: #006600; */
    margin-bottom: 5px;
}
.linkname{
    font-family: 'Aldrich', sans-serif;
}
.link{
    display: flex;
    align-items: center;
}
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
strong{
    font-weight: 700;
}
#profilebuttons{
    display: flex;
    justify-content: center;
    margin-bottom: .5rem3
}
#aboutCards{
    margin-top: 4rem;
}
.card-heading{
    font-family: 'Aldrich', sans-serif;
    margin-top: 1rem;
}
.has-same-height .projectCard .card {
  height: 295px;
  overflow: hidden;
}
#mac{
    height: 300px;
    width: auto;
}
.image-card{
    display: flex;
    justify-content: center;
    align-items: center;
}
.skills-content .progress {
  height: 4px !important;
}
.progress-label{
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}
.skills-content{
    margin-left: 10%;
    margin-right: 10%;

}
.aldrich{
    font-family: 'Aldrich', sans-serif;
}
.orbitron{
    font-family: 'Orbitron', sans-serif;
}
.saiyan{
        font-family: 'Saiyansans','orbitron', sans-serif;
}
#services{
    margin-top: 5%;
}
.vanish{
    display:none;
}
.service-columns{
    margin-top: 5%;
}
.service{
    border: 10px ridge orange;
    border-radius: 10px;
}
.icon-services{
    margin-right: 10px;
}
.card-header{
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-img{
    filter: invert(80%);
}
.icon-img-dark{
    filter: invert(100%);
}
.heavy{
    font-weight: 700;
}
.card-footer{
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
}
.card-header-title{
    font-size: 20px;
}
.contact-form{
    margin-top: 5%;
}
.shadow{
        box-shadow: 1px 0px 2px 2px orange;

}
.menu-shift{
    margin-top: -70px;
}


#Search::placeholder{
    color: grey;
}

#searchbuttonDiv{
    margin-top: 40px;
}
button{
    transition: all .2s;
}
#footer.container{
    height: 100px;
}


.tooltip {
    position: relative;
    display: inline-block;
  }
.tooltip .tooltiptext {
    visibility: hidden;
   
    width: 120px;
    bottom: -200%;
    left: 50%; 
    margin-left: -95px; /* Use half of the width (120/2 = 60), to center the tooltip */
   
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    font-size: .9rem;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  .tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 80%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
  }

.fa-react{
    color: skyblue
}
.fa-code{
    color: rgb(255, 123, 0)
}
.fa-css3{
    color: steelblue
}
.fa-node-js{
    color: greenyellow
}
.fa-js-square{
    color: yellow
}
.card-header-icon .icon.is-large{
    height: 25px !important;
}
@media only screen and (min-width: 640px) {
    #head{
        font-size: 10rem;
    }
    /* #brand{
        position: absolute;
        top: -25px;
    } */
    #dball{
        transition: all linear;
    }
    #subtitle{
        font-size: 2rem
    }
    #searchbuttonDiv{
    margin-top: 0px;
    }
    
}
.card-header-title{
        margin-right: -10%; 
    }
#herokuICON{
    margin-left: 10px
}
@media only screen and (max-width: 768px){
    .card-header-title{
        margin-right: -10%; 
    }
    .footer-text{
        font-size: 2rem;
    }
    .projects-container{
        width: 100%;
    }
    .projectCard{
        width: 100%;
    }
    .projectCard > .card{
        width: 100%;
    }
    #head{
        font-size: 3.7rem;
    }
}

@media only screen and (max-width: 1024px){
    #project-card{
        margin-left: 0px;
        margin-right: 0px;
    }
    
}