selfstyle.css

/*.row{
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
*/
.bg{
	background-image: url("bbg.jpg");
	background-size: 100% 100%;
}

.name{
	margin-top: 5px;
	margin-bottom: 15px;
	font-family: 'Arvo', serif;
	font-size: 45px;
	color: #4d4d4d;
}

.occupation{
	font-family: 'Tangerine', cursive;
	font-size: 50px;
	color: #4d4d4d;
	margin-top: -10px;
}

nav.navi a{
	font-family: 'Julius Sans One', sans-serif;
	font-size: 20px;
	color: #4d4d4d;
	padding: 0px;
	border: 2px dotted #4d4d4d;
	border-radius: 10%; 
	text-align: center
}

nav.navi a.current{
	border: 3px solid #4d4d4d;
}

.navi>div{
	display: inline;
}

nav.navi a:hover{
	color: white;
	background-color: #4d4d4d;
	border-radius: 4px;
	text-decoration: underline;
}

img.myPhoto{
	margin-top: 5px;
	border-radius: 25%;
	width: 80%;
	height: 95%;
	border: solid #4d4d4d 1px;
}

#hiThere{
	font-family: 'Tangerine', cursive;
	font-size: 50px;
	font-weight: 700;
	color: #4d4d4d;
	margin-bottom: 0px;
}

.hi{
	margin-top: 5px;
	font-family: 'Tangerine', cursive;
	font-size: 50px;
	font-weight: 600;
	color: #4d4d4d;	
}

.welcome{
	font-family: 'Tangerine', cursive;
	font-size: 50px;
	font-weight: 400;
	color: #4d4d4d;
	margin-top: 0px;
	margin-bottom: 0px; 		
}

.welcome_msg{
	font-family: 'Arvo', serif;
	font-size: 20px;
	font-weight: 400;
	color: #4d4d4d;
	text-align: justify;
}

.in_nav{
	margin-top: 25px;
}

.circle{
	margin: auto;
	height: 60px;
	font-family: 'Julius Sans One', sans-serif;
	font-size: 19px;
	font-weight: 500;
	border: 1px solid black;
	background-color: #d4b861;
	text-align: center;
	border-radius: 10px;
}

.footer{
	background-color: #161c81;	
}

.icons{
	border-radius: 50%;
	background-color: #d4b861; 
	color: #161c81;
	font-size: 30px;
	padding: 5px;
}

.icontext{
	color: white;
}

.icons_in{
	color: white;
	font-size: 20px;
	padding-left: 4px;
}

#last_updated{
	font-size: 15px;
}

/*#jstriggered{
	border-radius: 5px;
	font-family: 'Tangerine', cursive;
	font-size: 32px;
	background-color: white;
}*/

.context{
	margin-top: 20px;
}

.context_title{
	font-family: 'Tangerine', cursive;
	font-size: 50px;
	font-weight: 700;
	color: #4d4d4d;
	text-decoration: underline;	
}

.context_body{
	font-family: 'Arvo', serif;
	font-size: 17px;
	font-weight: 400;
	text-align: justify;
}

.context_body>a{
	color: black;
	text-decoration: underline;
	font-weight: 700;
}

.experience_item>a{
	color: black;
	text-decoration: underline;
	font-weight: 500;
}

.context ul li{
	font-family: 'Arvo', serif;
	font-size: 17px;
	font-weight: 400;
}

.in_nav a{
	text-decoration: none;
	color: black;
}

.projPhoto{
	margin-top: 25px;
	border: 1px solid black;
	border-radius: 5%;
	width: 80%;
	height: auto;
}

.projTitle{
	font-family: 'Arvo', serif;
	font-size: 24px;
	font-weight: 400;
	color: #4d4d4d;	
	text-decoration: underline;
}

.projText{
	font-family: 'Arvo', serif;
    font-size: 17px;
    font-weight: 400;	
}

.button{
	width: auto;
	padding: 3px 5px;
	font-family: 'Julius Sans One', sans-serif;
    font-size: 16px;
	font-weight: 500;
	border: 1px solid black;
    background-color: #d4b861;
    text-align: center;
    border-radius: 7px;
	margin: auto;
}

.projButtons a{
	display: inline-block;
	text-decoration: none;
	color: black;
	margin: 0px 17px;
}

.newProj{
	margin: 25px 0px;
}

p.act_title{
	font-family: 'Tangerine', cursive;
	font-size: 50px;
	font-weight: 700;
	color: #4d4d4d;	
	text-align: center;
}

.maps{
	border: 1px solid black;
	width: 90%;
	height: 100%;
}

.contact_icons{
	color: #4d4d4d;
	font-size: 50px;
}

.contact_me{
	margin: 53px 0px;
}

.main_nav_button{
	display: block;
	float: left;
	margin: 0px 7px;
}

#intro_nav{
	margin: 0px 7px 0px 22%;
}

.last_buttons{
	padding: 15px 5px;
}

#speechtox>a{
	color: #4d4d4d;
	text-decoration: underline;
	font-size: 18px; 
}

#button_education{
	padding: 15px 5px;
}

.experience_profile{
	margin-bottom: 10px;
}

.projText>a{
	color: black;
	text-decoration: underline;
	font-size: 16px; 
}

@media(max-width: 767px){
	body{
		text-align: center;
	}
	
	p.welcome_msg, p.context_body, .context ul li, 
	p.projText, li.projText{
		text-align: justify;
	}

	div.button{
		margin: 5px 55px;
		width: 85%;
	}

	#long_button1, #long_button2{
		margin: 5px 58px;
		width: 85%;
	}

	.main_nav_button{
		margin: 2px 0px;
	}

	#intro_nav{
	margin: 0px;
	}

	div.circle{
		margin: 2px 0px;
	}

	#button_education{
		padding: 13px 5px;
	}
}

@media (min-width:577px) and (max-width: 767px){
	#button_experience{
		padding: 4px 5px;
	}
}