/*
 * Mobile Devices
 */

/*
 * Default settings
 */
body{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    min-width: 311px;
    line-height: 24px;
}

h2{
    margin: 0;
}

p{
    margin: 0;
    padding: 0;
}

/*
 * Title
 */
#titlebanner{
    background: linear-gradient(to right, #009999 0%, #99ff99 100%);
    display: block;
    text-align: center;
    padding-bottom: 5px;
}

.titlebannercontacta{
	display: inline-block;
	text-decoration: none;
	max-width: 50px;
	margin-right: 10px;
}

#titlebannerinnerleft{
	display: inline-block;
    min-width: 311px;
    max-width: 350px;
    text-align: left;
    margin-top: 5px;
}

#titlebannerinnerright{
	display: inline-block;
    margin: 0 auto;
	min-width: 240px;
	max-width: 240px;
	text-align: left;
}


.animletter, .animsubletter{
	display: inline-block;
	color: white;
	font-family: 'Armata', sans-serif;
	margin: 0;
	padding: 0;
	font-size: 3em;
}

.animsubletter{
	opacity: 0.2;
	font-size: 1.3em;
}

.animcursor{
	position: absolute;
	right: 200px;
	top: -50px;
	font-size: 2em;
}

.animphrase{
	display: block;
	margin-top: 10px;
	padding: 10px 20px 20px 20px;
}

.animphrasesmall{
	display: block;
	padding: 5px 25px;
}

.animsubphrase{
	display: inline-block;
	padding: 5px;
}

/**
  * Animated contact menu 
  */
.animcontactbar{
	display: block;
	padding: 10px;
	padding-left: 25px;
	width: 200px;
	text-align: center;
}

.animcontactimg{
	display: inline-block;
	padding: 5px;
	margin-right: 10px;
	border-radius: 15px;
	background-color: white;
	opacity: 0.2;
}

#githubico{
	padding: 5px;
	width: 30px;
	height: 30px;
}


#weatherbar{
    display: inline-block;
    flex-grow: 0;
}

#title{
    white-space: nowrap;
}

#dropbar{
    flex-grow: 0;
    border-right: 0.5px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 15px;
}

#dropbar .line, .linelast{
    height: 3px;
    width: 25px;
    background-color: black;
    border-radius: 6px;
}

#dropbar .line{
    margin-bottom: 5px;
}


/*
 * Dropdown Bar
 */
#dropdownbar{
    display: none;
    /* display: flex;*/
    flex-direction: column;
    position: absolute;
    right: 0px;
    top: 50px;
    text-align: center;
    width: 40%;
    border: 0.5px solid black;
    border-top: none;
    border-right: none;
}

#dropdownbar a, #dropdownbar a:visited{
    color: inherit;
    text-decoration: none;
}

.dropdownbarlink{
    padding: 10px 0;
    background-color: white;
}

#dropdownbarcurrlink{
    color: dodgerblue;
}

/*
 * End
 */


/*
 * Profile Banner
 */
#profilebanner{
    background-color: cornflowerblue;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: url(../bin/pictures/profile.jpg);
    background-position: middle;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    min-height: 415px;
    position: relative;

}

#profilebanner p{
    color: white;
}

#profiledesc{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 5px 0;
    background-color: none;
    background-color: rgb(119, 214, 203);
    background-color: rgba(119, 214, 203, 0.2);
}

#profilebanner2{
    display: none;
}


/*
 * End
 */


/*
 * Attributes Banner
 */
#attrbanner{
    width: 100%;
    padding: 10px 0px;
}

.attrelem{
    margin: 20px 10px 10px 10px;
    display: flex;
    flex-direction: column;
}

#attrelemstart{
    margin-top: 10px;
}

.attrheader{
     background: linear-gradient(to right, #006699 0%, #33cccc 100%);
     border-radius: 10px;
    }

.simpleheader{
    font-size: 0.8em;
    text-align: center;
}

.attrheadertext{
    padding-left: 20px;
    margin: 10px 0px;
    color: white;
}

.attrbody{
    background-color: white;
    margin: 0 20px;
}

.attrbodytext{
}

#readmore {
    display: block;
    margin: 5px 0;
    height: 5px;
    font-size: 0.7em;
    text-align: center;

}

#readmoretext{
    display: inline-block;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}

.barline {
    display:inline-block;
    width: 150px;
    width: 35%;
    position: relative;
    top: -3px;
    border: 0.3px black solid;
}

.hiddenproperintro{
    display: none;
}

#intromargin{
    height: 10px;
}

/*
 * End
 */



/*
 * Projects
 */
.attrproject{
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.attrprojecticon{
    flex: 0;
}

.attrprojecttext{
    flex: 2;
}

.attrprojecttabs{
	display: flex;

}

.attrprojectgithub{
	text-decoration: none;
}

.attrprojectmore{
	display: flex;
    text-decoration: none;
    background-color: rgb(51, 153, 255);
    
    padding: 5px 10px;
    border-radius: 10px;
    color: white;
    line-height: 20px;
    font-size: 10px;
    margin-right: 20px;
}


.attrprojectinnerimg{
}

.attrprojectinnerp{
	flex: 1;
	margin-left: 10px;
}

.attrprojectp{
   margin-bottom: 5px;
}


.awpanel{
  display: flex;
  flex-direction: row;
  height: 100%;
  margin: 0 auto;
}

.awpic{
  width: 49%;
  flex: 0.5;
}

.projectheader{
    display: block;
    padding: 0;
    padding-top: 10px;
    margin: 0;
}

.projectheaderfirst {
    margin-top: 15px;
}

.projectheadertext{
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-right: 10px;
    margin-bottom: 5px;
}

.projecttagnavbar{
    display: inline-block;
    position: relative;
    top: -3px;
}

.projecttag{
    display: inline-block;
    border-radius: 5px;
    font-size: 0.7em;
    padding: 0px 5px;
    margin-right: 5px;
}

.back-htmlcss{
    background-color: pink;
}

.back-js{
    background-color: yellow;
}

.back-mysql{
    background-color: lightsteelblue;
}

.back-java{
    background-color: lightblue;
}

.back-android{
    background-color: lightsalmon;
}

.back-gles{
    background-color: lightcoral;
}

.back-cpp{
    background-color: lightseagreen;
}

.back-qt{
    background-color: lightpink;
}

.back-sqlite{
    background-color: lightgreen;
}

/*
 * End
 */

/*
 * My Current Goals
 */
.attrgoal{
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}
.attrgoaltext{

}

#attrgoal1{
    color: orange;
}
#attrgoal2{
    color: red;
}
#attrgoal3{
    color: red;
}

.attrhiddenpanel{
  display: none;
  margin-top: 20px;
  width: 100%;
}

/*
 * End
 */

/*
 * Music
 */
.musicplayer{
    margin-top: 20px;
}

/*
 * End
 */



/*
 * Tablets
 */
@media only screen and (min-width: 480px){
body{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    min-width: 311px;
}


/*
 * Title
 */
 


.bannerwrapper{
    max-width: 700px;
    margin: 0 auto;
}

#profilebannerouter{
    display: flex;
    justify-content: row;
}
#profilebanner{
    width: 240px;
    min-height: 300px;
}
#profiledesc{
    max-width: 240px;
}
#profilebanner2{
    flex: 1;
    display: block;
    height: 100%;
    width: 100%;
    min-height: 300px;
    vertical-align: middle;
}
.profilebanner2label{
    width: 80%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}
#profilebanner2 p{
    text-align: center;
    padding-top: 15px;
}

#profilebanner2 .header{
    flex: 0;
    color: black;
    font-weight: bold;
}

#profilebanner2 .text{
    flex: 2;
    display: block;
    color: blueviolet;
}

#profilebanner2subpic{
    display: flex;
    width: 50px;
    height: 50px;
    margin: 5px auto;

}

#profilebanner2 #status{
    color: mediumvioletred;
}

#profilebanner2 #mood{
    color: green;
}

#profilebanner2 #bio{
    color: saddlebrown;
}

#profilebanner2 #weather{
    color: darkgoldenrod;
}

/*
 * End
 */

}
/*
 * End
 */