body {
	background-color: #9999CC;
	font: 10pt tahoma; 
	color: #583a6c;
	letter-spacing: 1px;

}

#imgbottom {
	margin-bottom: 0px;
	padding-bottom: 0px;
}

#table {
	font: 10pt tahoma; 
	color: #583a6c;
	letter-spacing: 1px;
	vertical-align: top;
	max-width: 804px;
	background-color: #d6fbf7; 
	border: 2px solid #12373f;
}
#menu {
	border-bottom: 2px solid #12373f;
	background-color: #39ccbc;
	margin-top: 0px;
	padding-top: 0px;
	padding-bottom: 5px;
	text-align: center;
	font: 20px tahoma; 
}
#kofi {
	text-align: right;
	}
#textual {
	padding: 20px;

}
.center {
	display: flex;
  justify-content: center;
  align-items: center;
}
#container {
		margin: 0 auto;   /* align for good browsers */
		text-align: left; /* counter the body center */
		position: absolute;
		top: 0;

}
	
a:link, a:active, a:visited {
	font-weight: bold;
	color: #2b8383}
a:hover {color: #beb9e6}


#FPMap0 {
	padding: 0
	margin: 0
}

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

/* profile pic styling, this is what create the mask on the shape */
.thumbnail img {
  border: solid 2px #39ccbc;
  padding: 1(--half);
}

.thumbnaileff:hover {
  opacity: 0.3;
  transition: 0.5s;
}.thumbnailnoeff {  opacity: 0.3;}

.rounded img {
  border-radius: 20%;
}

: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: 20%;
}

/* 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;
}