@viewport {
  width: device-width;
  zoom: 1.0 ;
} 

@-ms-viewport {
  width: device-width;
}

/* code that is here, until the first @media block, will apply to any screen size */
.view_adjusted {
    width: 1024px;
}

@media screen and (max-width: 1024px) {
  /* comes into effect for screens bigger than max-width pixels */
  .view_adjusted {
    width: 100% ;
  }
}

/* code that is here will apply to any screen size */ 

/**
 * Prevent iOS text size adjust after orientation change, without disabling
 * user zoom.
 */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

p {
  color: white;
  text-align: center;
  opacity: 1;
}

body {
  box-sizing: border-box;
  color:#373737;
  background-color: e8e7e2;
  background: -webkit-linear-gradient(315deg, #e8e7e2 0%, #e8e7e2 47%, #444444 100%) fixed;
  background: linear-gradient(135deg, #e8e7e2 0%, #e8e7e2 40%, #444444 100%) fixed;
  font-size: 16px;
  font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 10px 0;
  font-weight: 700;
  color:white;
  font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
  letter-spacing: +1px;
  text-shadow: 2px 2px 4px #000000;
}

h1 {
  color: #7d5d3b;
  text-shadow: 1px 1px 1px #000000;
} 

h2{
  letter-spacing: +3px;
}

.central_box {
  background-color: #222222;
  color: white;
  border-radius: 15px;
  display: block;
  margin: 20px;
  align-items: center;
  padding: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.links_box {
  margin: 20px;
  align-items: center;
}

.content_box {
  margin: 1.5%;
}


.avatar {
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.icon {
  vertical-align: middle;
  width: 25px;
  height: 25px;
  margin: 5px;
}

 /* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: goldenrod;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: purple;
}

.normal {
	filter: invert(0%);
}

.inverted {
	filter: invert(100%);
}

.blurb_box {
  background-color: #444444;
  color: white;
  border-radius: 15px;
  display: block;
  margin: 3px;
  text-align: left;
  padding: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.blurb_box:hover {
  background-color: #222222;
  color: white;
}

.myButton {
	box-shadow:inset 0px 1px 0px 0px #a6827e;
	background:linear-gradient(to bottom, #7d5d3b 5%, #634b30 100%);
	background-color:#7d5d3b;
	border-radius:15px;
	border:1px solid #54381e;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #4d3534;
	margin: 3px;
}

.myButton:hover {
	background:linear-gradient(to bottom, #634b30 5%, #7d5d3b 100%);
	background-color:#634b30;
}
.myButton:active {
	position:relative;
	top:1px;
}

.buildButton {
	background-color:none;
	display:inline-block;
	align-items: right;
	padding:6px 6px;
	margin: 3px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: white;
  color: black;
  min-width: 350px;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 0.9;
}

/* Style all font awesome icons */
.fa {
  padding: 3%;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

.no_bg
{
	color:#ffffff;
	text-decoration:none;
}

.no_bg:link
{
	color:#ffffff;
	text-decoration:none;
}

.no_bg:hover
{
	color:lime;
}