@font-face {
	font-family:comic;
	src: url(assets/Comic\ Sans\ MS.ttf);
}

@font-face {
	font-family: gothic;
	src: url(assets/MS\ Gothic.ttf);
}

@font-face {
	font-family: mincho;
	src: url(assets/MSMINCHO.TTF);
}

:root{
	cursor: url(https://gh-proxy.com/https://github.com/ruphin/overwebs/raw/refs/heads/master/app/images/overwatch.cur), auto !important;
	--stroke: 1px solid black;
}



html {
	font-family: 'comic';
}
body {
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
	    height: 100%;
}

.mainbody{
	display: block;
	border-bottom: var(--stroke);
	border-left: var(--stroke);
	border-right: var(--stroke);
	height: 460px;

	
}

.frame {
	display: block;
	width: 100%;
	height: 100%; 
}

#mainpage {
	display: grid;
	
}


.buttonsdiv{
	display: flex;
	align-items: center;
	border: 1px solid black; 
	height: 40px;
	overflow:hidden;
}

.buttons-items:hover{
	-webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused;
  animation-play-state:paused;
}

.buttons-items{
	display: flex;
	align-items: center;
	gap: 8px;
	animation: button-marquee 40s linear infinite;
}

.buttons-items a{
	display: flex;
	align-items: center;
}



@keyframes button-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.button-marquee {
  animation: button-marquee 10s linear infinite;
}


#linksdiv {
	margin: 0 auto;
	max-width: 500px;
}

#linksdiv a {
	color: #8E7DBE;
	text-decoration: none;
	font-family: mincho;
	font-weight: bold;
	font-size: 24px;
	margin-right: 18px;
}

#linksdiv:visited {
color: #FFF0DD;
}

#linksdiv a:hover {
	color:#A6D6D6;
	transform: scale(1.5);
}

#statuscafediv{
	border-right: var(--stroke);
	border-top: var(--stroke);
	text-align: center;
	width: 172px;
	height: 41px;

}

#statuscafe-username{
	font-size: 13px;
}

#statuscafe-content{
	font-size: 14px;
	    white-space: nowrap;
		margin-left: 8px;
		text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
	max-width: 162px;
}

#statuscafediv a {
		color: #86B0BD;
		

}

#statuscafediv a:hover {
	color: #D1D3D4;

}

.nav {
	border-top: var(--stroke);
	text-align: center;
	margin-bottom: 3px;
	font-family: gothic;
	border: dotted;

}

.nav a{
	font-size: 18px;
	color: #86B0BD;
	margin-right: 6px;
	margin-left: 6px;
	text-decoration: none;
}

.nav a:hover {

	color: #D1D3D4;
}

#lastfm {
		border-left: var(--stroke);
	border-top: var(--stroke);
	display: flex; 
	flex-direction: column;
	text-align: start;
	align-items: center;
	width: 100%;
	height: fit-content;
	
}
#lastfm p {
	font-size: 10px;
	margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	max-width: 250px;

}

#nowplayin{
	display: flex;
	gap: 5px;
	font-size: 13px;
	    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.now-playing{
	margin-top: 10px;
}

.last-scrobbled{
	margin-top: 10px;
	display: flex;
	flex-direction: row;
}

#fminfo {
	display: flex;
	gap: 10px;
	width: 472px;
}

.star{
	position: relative;
}

.star::after{
	content: url(assets/pics/star.png);
    position: absolute;
	left: -60px;
    transform: rotate(-15deg);

}

#chattable{
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	width: 100%;
    height: 100%;
}       




.parent {
    display: grid;
    height: 100%;

    grid-template-columns: 1fr 1fr 500fr 2fr;
    grid-template-rows: auto 1fr auto;
}
    
.div5 {
    grid-column: 1 / 5;
    grid-row: 1;
	border-bottom: var(--stroke);
	background-color: #F7F4ED;
}

.div3 {
    grid-column: 1 / 3;
    grid-row: 2;
}

.div4 {
    grid-column: 3 / 5;
    grid-row: 2;
	overflow: scroll
}

.div1 {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
}

.div2 {
    grid-column: 3;
    grid-row: 3;
    justify-self: start;
}
         
.div4 p{
	margin: 0 auto;
	max-width: 200px;
}

#bookmarks{
	display: flex;
	flex-direction: column;
}