body, table, tr, td {
	font: 10pt tahoma; 
	color: #583a6c;
	letter-spacing: 1px}
body {
	background-color: #9999CC;
	text-align: center; 
}
#container {
		margin: 0 auto;   /* align for good browsers */
		text-align: left; /* counter the body center */
		position: absolute;
		top: 0
	}
.copyright {
	font: 8pt tahoma;
	color: #808080;
	letter-spacing: 1px}
.project {
	font: 20pt tahoma;
	color: #660066;;
	letter-spacing: 1px}
.project2 {
	font: 15pt tahoma;
	color: #808080;
	letter-spacing: 1px}
a:link, a:active, a:visited {
	font-weight: bold;
	color: #2b8383}
a:hover {color: #beb9e6}

td
{
    vertical-align: top;
}
#FPMap0 {
	padding: 0
	margin: 0
}

#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

:root {
/* card styling */

 --max-width: 700px; /* width of the box */
  --cardborder: solid 2px #21515b; /* style of the border around the card if you want one! the syntax is 'style thickness color' - you need to uncomment a line in the '#card' section below to activate it */

  /* text styling */
  --text-size: 1.2em; /* increasing this value will make all the text bigger */
  --alignment: center;

  /* misc */
  --spacing: 30px; /* defines the base spacing of the elements - a higher value will make things spread out more */
  --profilepicsize: 100px; /* size of the profile picture */
  --profilepiccorner: 20%; /* if using a rounded corner profile picture, adjust the corners - values range between 0-50%, where 0 is a sharp square and 50% is a circle */
  
  /* don't worry about this*/
  --half: calc(var(--spacing)/2);
  --double: calc(var(--spacing) * 2);

}
  
  /* the card block */
#card {
  background-color: #a9d9d4;
  border: solid 2px #21515b;
  max-width: 700px;
  padding: 1px;
  margin: 0 auto;
  border-radius: 15px; 
  box-shadow: 0px 0px 40px 0px var(--cardshadow); 

/* profile pic styling, this is what create the mask on the shape */
.profilepic img {
  width: 100px;
  border: solid 2px #21515b;
  height: 100px;
  padding: 1(--half);
  object-fit: cover;
}

.circle img {
  border-radius: 50%;
}

.rounded img {
  border-radius: var(--profilepiccorner);
}

/* social links icons */
.icon {
  color: #21515b;
  transition: 0.5s;
  padding: 3px;
}

/* social links icons, active */
.icon:hover {
  color: #e3fbf5;
  transform: scale(1.1);
  transition: 0.5s;
}

/* this affects the block of social links */
#socials {
  padding: var(--spacing);
  text-indent: 0;
  text-align: center;
}

td {
  vertical-align: middle;
}