@font-face{
	font-family: CurseCasual;
	src: url('CurseCasual.ttf');
}

body{
    background-image: url('bg1.png');
	background-size: cover;
}

#siteFeatures{
	grid-template-columns: repeat(2, 350px);
    grid-template-rows: repeat(3, 200px);
	gap: 10px 10px;
	justify-content: center;
	display: grid;
}

#disqus_thread{
	margin: auto;
	width: 720px;
}

#siteLogo{
    visibility: visible;
}

#siteLogoDark{
	visibility: hidden;
	height: 0px;
}

#webrings{
	width: max-content;
}

.siteFeature{
	background-color: #FFFFFF;
	color: #000000;
    border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	display: block;
	text-decoration: none;
	
}

.siteFeature:hover{
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .3)
}

.featureImage{
	width: 120px;
	height: 120px;
}

.centered{
	background-color: #F3F3F3;
	opacity: 0.9;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 730px;
	font-family: CurseCasual;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
}

.subtitleText{
	width: 650px;
	margin: auto;
}

.linkInfoText{
	color: gray;
}

.buttonText{
	position: relative;
	bottom: 20px;
}

.buttonDescText{
	position: relative;
	bottom: 40px;
}

.inline{
	display: inline;
}

.webring{
	font-size: 20px;
}

.webringLink{
	text-decoration: none;
}

@media (prefers-color-scheme: dark){
	p{
		color: #F0F0F0;
	}
	
	h1{
		color: #F0F0F0;
	}
	
	h2{
		color: #F0F0F0;
	}
	
	h3{
		color: #F0F0F0;
	}
	
	h4{
		color: #F0F0F0;
	}
	
	a{
		color: #87BFEB;
	}
	
	a:visited{
		color: #AA00FF;
	}
	
	#siteLogo{
        visibility: hidden;
		height: 0px;
	}
	
	#siteLogoDark{
		visibility: visible;
		height: 130px;
	}
	
	.centered{
		background-color: #222222	
	}
	
	.siteFeature{
		background-color: #333333;
	}
}