/* ------ ( Every page ) ------ */
* {
    font-family: Consolas, monaco, monospace, Verdana, Geneva, Tahoma, sans-serif;
    color: rgb(207, 207, 207);
    font-size: 18px;
}

html, body, .body-div{
    height: 100vh;
    /*background-color: #363541;*/
    background-color: #433F52;
}

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

h1 {
    color:#45FCBA;
    text-shadow: 0 0 10px #45FCBA;
}

h2 {
    color:#FCFAFC;
}

h3 {
    color: #FCFAFC;
}

.btn-default, .btn-default:focus {
    background-color:#45FCBA;
    color: #433F52;
}

.btn-default:hover {
    background-color:#79f8c9e0;
    color: #433F52;
    box-shadow: 0 0 10px #45FCBA;
}

.btn-default:active{
    background-color:#beffe7e0;
    color: #433F52;
    box-shadow: 0 0 10px #89ffd4;
}

.bg-custom {
    background-color:#262430;
}

.imgGlow {
    box-shadow: 0 0 20px #45FCBA;
}
ul {
    list-style-type: square;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

@keyframes fadeInR {
    from { opacity: 0;
        transform: translateX(30px);
    }
    to { opacity: 1; 
        transform: translateX(0);
    }
}

@keyframes fadeU {
    from { opacity: 0;
        transform: translateY(30px);
    }
    to { opacity: 1; 
        transform: translateY(0);
    }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgb(207, 207, 207);}
}

.fadeUp {
    animation-name: fadeU;
    animation-duration: 1s;
}

.fadeInRight {
    animation-name: fadeInR;
    animation-duration: 1s;
}

.fadeInElement {
    animation-name: fadeIn;
    animation-duration: 2s;
}

/* ------ ( home.html ) ------ */
.typed {
    border-right: .15em solid rgb(207, 207, 207); /* The typwriter cursor */
    white-space: nowrap;
    animation: 
        blink-caret 1.25s step-end infinite;
    /* Tutorial found here for cursor: https://css-tricks.com/snippets/css/typewriter-effect/ */
}

#name {
    color:#45FCBA;
    text-shadow: 0 0 10px #45FCBA;
    font-family: Consolas, monaco, monospace;
    display: inline-block;
    width: auto;
}

#titleLine {
    font-style: italic;
    color:rgb(182, 211, 171);
}

.home-contents {
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}

.dropdownColor {
    background-color: #262430;
}

/* ------ ( about.html ) ------ */

#aboutMe {
    margin-top: 3%;
    margin-left: 20%;
    margin-right: 20%;
}

#linkedIn {
    margin-bottom: 3%;
}

/* ------ ( Project pages ) ------ */
.projectHeader {
    text-align: center;
    margin-top: 2%;
}

#webBtn {
    margin-bottom: 2%;
}

.projectImg {
    margin-bottom: 3%;
}

.lowerPics {
    margin-top: 2%;
}

#copyright {
    color:rgb(149, 148, 163);
    text-align: center; 
}

.projectContents{
    margin-top: 2%;
}

.projectText {
    margin-right: 3%;
}

.webText {
    text-align: left; 
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 3%;
}

/* ------ ( Smaller Projects Page ) ------ */

.projBtn{
    margin-right: 3%;
}

.txtColor{
    text-decoration: underline;
    color:rgb(255, 255, 255);
}

.projContents {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 3%;
    margin-bottom: 3%;
}