@font-face {
  font-family: "fivebyfive";
  src: url("/assts/fonts/fivebyfive.ttf") format("truetype");
}

@font-face {
  font-family: "ADD";
  src: url("/assts/fonts/ADDSBP__.TTF") format("truetype");
}




body {
letter-spacing:2px;
background-image: Url("/assts/img/bg.png");
color:white;
}

ul {
font-family: ADD;
display: table;
margin: 0 auto;
text-align: left;
list-style-type:none;

}

h1 {
font-family: fivebyfive;
text-align:center;
}

h2 {
font-family: fivebyfive;
text-align:center;
}

h3 {
font-family: fivebyfive;
text-align:center;
}

p {
font-family: ADD;
text-align:center;
}

.container {
max-width:1000px;
margin:auto;
}

.content {
display: flex;
justify-content:center;
vertical-align:top;
margin:auto;
}

button {
  background-color: #A485C4; 
  border:2px;
  border-radius:5px;
border-style: solid;
  border-color:black;
  color: black;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}

.box {
width:200px;
height:420px;
vertical-align:top;
display: inline-block;
text-align:center;
border-style:solid;
border-radius:10px;
border-width:5px;
border-color:white;
padding:10px;
background-image: Url("/assts/img/box-bg.png");
background-color:#59426B;
filter:drop-shadow(10px 5px 5px black);
}

.nav {
width:200px;
height:400px;
vertical-align:top;
display: inline-block;
text-align:center;
border-style:solid;
border-radius:10px;
border-width:5px;
border-color:white;
padding:20px;
background-image: Url("/assts/img/box-bg.png");
background-color:#59426B;
filter:drop-shadow(10px 5px 5px black);
}

.main {
width:500px;
vertical-align:top;
display: inline-block;
text-align:center;
border-style:solid;
border-radius:10px;
border-width:5px;
border-color:white;
padding:20px;
background-image: Url("/assts/img/box-bg.png");
background-color:#59426B;
filter:drop-shadow(10px 5px 5px black);
}

.border {
border-style:solid;
border-radius:15px;
border-width:2px;
background-color:#31273C;
filter:drop-shadow(0px 5px 5px black)
}

.chatbox {
border-style:solid;
border-radius:0px;
border-width:2px;
padding:5px;
background-color:#31273C;
filter:drop-shadow(0px 5px 5px black)
}

.cenbox {
width:300px;
margin:auto;
display: inline-block;
text-align:center;
border-style:solid;
border-radius:10px;
border-width:5px;
border-color:white;
padding:10px;
background-image: Url("/assts/img/box-bg.png");
background-color:#59426B;
filter:drop-shadow(10px 5px 5px black);
}

.glass{
	/* background styles */
	position: relative;
	display: inline-block;
	padding: 15px 25px;
	background-color: #5432a8; /*for compatibility with older browsers*/
	background-image: linear-gradient(#5432a8,#7f65bf);

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 25px;
	font-family: sans-serif;
	font-weight: 100;
	border-radius: 15px;
   box-shadow: 0px 1px 4px -2px #333;
   text-shadow: 0px -1px #333;
}

.glass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
	border-radius:15px;
}

.glass:hover{
	background: linear-gradient(#7f65bf,#a08cd4);
}