/*-------------------- element stylings --------------------*/

a {
    color: #E8EBE4;
}

#blurb {
    display: inline-block;
    width: 50%;
}

body {
    margin: 0px;
    text-align: center;
}

#btns {
    display: fixed;
}

#copyright {
    margin: 0;
    padding-top: 20px;
}

#coffee-blurb {
    display: inline-block;
    margin-top: 0px;
}

.top-container {
    background-color: #152C2C;
    padding-top: 100px;
    padding-bottom: 620px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    font-family: "Montserrat", sans-serif;
    background: url("../images/background.png") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.middle-container {
    background-color: #152C2C;
}

.bottom-container {
    background-color: #152C2C;
}

h1 {
    width: 10%;
    margin: 0 auto 0 auto;
    font-family: "Sono", monospace;
    color: #152C2D;
}

h2 {
    background-color: #E8EBE4;
    display: inline-block;
    margin: auto 10 auto 10;
    box-shadow: 10px -5px #AE612E;
}

h3,
h5 {
    font-family: "Montserrat", sans-serif;
    margin-bottom: 0px;
    color: #E8EBE4;
}

h6 {
    font-family: "Montserrat", sans-serif;
    margin-bottom: 0px;
    color: #E8EBE4;

}

hr {
    border: 0px;
}

p {
    font-family: "Montserrat", sans-serif;
    color: #E8EBE4;
    margin-bottom: 0px;
}

#project-title {
    display: inline;
    margin: auto;
}

#pro-blurb {
    color: #152C2D;
}

span {
    text-decoration: underline;
}

.top-side-text {
    color: #152C2D;
    width:70%;
    margin-left: auto;
    margin-right: auto;
}

/*-------------------- image stylings --------------------*/

#attribution-icon {
    width: 30px;
    position: fixed;
    left: 10px;
    top: 210px;
}

#attribution-icon-atr {
    width: 30px;
    position: relative;
}

#bottom-cloud {
    position: absolute;
    bottom: 300px;
}

#coffee-icon {
    display: inline-block;
    width: 15px;
}

#coffee-icon-atr {
    position: relative;
    width: 30px;
}

#cv {
    width: 30px;
    position: fixed;
    left: 10px;
    top: 10px;
}

#cv-atr {
    width: 30px;
    position: relative;
}

#dota-pic {
    border-radius: 10%;
    width: 100%;
}

#email-icon {
    width: 30px;
    position: fixed;
    left: 10px;
    top: 170px;
}

#email-icon-atr {
    width: 30px;
    position: relative;
}

#flashcard-pic {
    border-radius: 10%;
    width: 100%;
}

#github-icon {
    width: 30px;
    position: fixed;
    left: 10px;
    top: 90px;
}

#github-icon-atr {
    width: 30px;
    position: relative;
}

#homepage-icon {
    width: 30px;
    position: fixed;
    left: 10px;
    top: 250px;
}

#homepage-icon-atr {
    width: 30px;
    position: relative;
}

#jam {
    display: block;
    margin: auto;
    border-radius: 100%;
    width: 20%;
    left:100px
}

#linkedin-icon {
    width: 30px;
    position: fixed;
    left: 10px;
    top: 130px;
}

#linkedin-icon-atr {
    width: 30px;
    position: relative;
}

#rocket {
    width: 10%;
    position: absolute;
    margin: auto;
}

#spaceinvaders-pic {
    border-radius: 10%;
    width: 100%;
}

#scp-pic {
    border-radius: 10%;
    width: 100%;
}

#tarot-pic {
    border-radius: 10%;
    width: 100%;
}

#yt-icon {
    width: 30px;
    position: fixed;
    left: 10px;
    top: 50px;
}

#yt-icon-atr {
    width: 30px;
    position: relative;
}

/*-------------------- table stylings --------------------*/

#skills-table {
    text-align: center;

}

table {
    margin-left: auto;
    margin-right: auto;
    font-family: "Montserrat", sans-serif;
    color: #E8EBE4;
    width: 80%;
}

.table-head {
    width: 20%;
}

#atr-table {
    text-align: center;
}

.table-head-atr {
    width: 5%;
}

/*-------------------- project - hover animation --------------------*/

.container {
    position: relative;
    display: inline-block;
    width: 18%;
}

.overlay {
    position: absolute;
    border-radius: 10%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #0B3954;
    word-wrap: break-word;
}

.container:hover .overlay {
    opacity: 1;
}

.text {
    color: E8EBE4;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

/*-------------------- cloud - movement animation --------------------*/

#cloud1 {
    display: inline-block;
    position: absolute;
    top:200px;
    left:5%;
}

#cloud-atr {
    position: relative;
    width:30px;
}

#cloud2 {
    display: inline-block;
    position: absolute;
    top:-200px;
    left: 5%;
}

#cloud3 {
    display: inline-block;
    position: absolute;
    top:450px;
    left: 5%;
}

#cloud4 {
    display: inline-block;
    position: absolute;
    top: 300px;
    left: 5%;
}

#cloud5 {
    display: inline-block;
    position: absolute;
    top: 3000px;
    left: -90%;
}

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -500px;
    }
    100% {
        margin-left: 85%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -500px;
    }
    100% {
        margin-left: 85%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -500px;
    }
    100% {
        margin-left: 85%;
    }
}

.move-cloud1 {
	-webkit-animation: animateCloud 30s linear infinite;
	-moz-animation: animateCloud 30s linear infinite;
	animation: animateCloud 30s linear infinite;
	
	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	transform: scale(0.65);
}

.move-cloud2 {
	-webkit-animation: animateCloud 35s linear infinite;
	-moz-animation: animateCloud 35s linear infinite;
	animation: animateCloud 35s linear infinite;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.move-cloud3 {
	-webkit-animation: animateCloud 15s linear infinite;
	-moz-animation: animateCloud 15s linear infinite;
	animation: animateCloud 15s linear infinite;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
}

.move-cloud4 {
	-webkit-animation: animateCloud 45s linear infinite;
	-moz-animation: animateCloud 45s linear infinite;
	animation: animateCloud 45s linear infinite;
	
	-webkit-transform: scale(0.45);
	-moz-transform: scale(0.45);
	transform: scale(0.45);
}

.move-cloud5 {
	-webkit-animation: animateCloud 25s linear infinite;
	-moz-animation: animateCloud 25s linear infinite;
	animation: animateCloud 25s linear infinite;
	
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	transform: scale(0.2);
}