/* colors
	green: #B8FB3C
	yellow: #E2FB3D
	dark purple: #001437
	purple: #422BBA
	periwinkle: #7898FB
	turqouise: #74F9E6
	pink: #FA74F1

 */

body {
  
  background-color: #1C1678;
  background: url('images/spzst_bg.png');
  background-size: 1090px;
  color: #A3FFD6;
  font-family: monospace;
  
  
  
}

#backButton {
	
	background-color:#001437;
	color: #74F9E6;
	font-family: monospace;
	text-decoration:none;
	padding: 10px;
	height: 40px;
	display: inline block;
	border-radius: 5px;
	
}

#flipphone {
	
    grid-area: music;
    padding: 0;
	margin: auto;
    background: url('images/flipphone.png');
	background-size:534px 1573px;
    color: #422BBA;
    font-size: 21px;
    line-height: 31px;
    width: 534px;
    height: 1573px;
	
}

#screenbox {
	
	padding-top: 150px;
	
}
#screen {
	
	overflow-y: scroll;
	scrollbar-color: #422BBA #001437;
	background-color: #001437;
	width: 350px;
	height: 450px;
	align-self: center;
	margin:auto;
	
}

#pfpBox {
	
	margin-top: 20px;
	border-style: solid;
	border-radius: 30px;
	border-width: 5px;
	border-color: #FA74F1;
	background-color: #74F9E6;
}

.smallText {
	
	font-size:10px;
	line-height:0.3;

}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  background-color: #001437;
  color: #74F9E6;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}