/* font import */

@font-face {
  font-family: Alagard; 
  src: url(../font/alagard.ttf);
}

/* text */

h1 {
	font-family: Alagard;
}

h2 {
	font-family: Alagard;
}

p {
	font-family: Alagard;
}

li {
	font-family: Alagard;
}

#navbar a {
	color: white;
	margin: 0;
	text-decoration: none;
	font-family: Alagard;
	font-size: 2em;
}

#navbar a:hover {
	color: #948765;
	margin: 0;
	text-decoration: none;
	font-family: Alagard;
	font-size: 2em;
}

#sblinksbox a {
	color: black;
	margin: 0;
	text-decoration: none;
	font-family: Alagard;
	font-size: 1.5em;
}

#sblinksbox a:hover {
	color: #948765;
	margin: 0;
	text-decoration: none;
	font-family: Alagard;
	font-size: 1.5em;
}

#sblinksbox ul {
	list-style-type: square;
	list-style-image: url('../media/lilacbullet.png');
}

.sbbox h1 {
	margin: 5px;
	text-align: center;
}

.sbbox li {
	font-family: Alagard;
}

#sobrietybox h1 {
	margin: 5px;
}

#sobrietybox h2 {
	margin: 5px;
}

#sobrietybox p {
	margin: 5px;
}

.middlebox h1 {
	margin: 5px;
	text-align: center;
}

/* div*/

#navbar {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: black;
	width: 100%;
	justify-content: space-evenly;
	position: sticky;
	top: 0;
}

.page {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

#leftsidebar {
	margin-top: 0.5em;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 20%;
	background-color: rgba(0, 0, 0, 0.8);
}

#middlebar {
	margin-top: 0.5em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	height: 100%;
	width: 55%;
	background-color: rgba(0, 0, 0, 0.8);
}

#rightsidebar {
	margin-top: 0.5em;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 20%;
	background-color: rgba(0, 0, 0, 0.8);
}

#sblinksbox {
	height: 30%;
	width: 90%;
	background-color: white;
	margin: auto;
	overflow: auto;
}

#sobrietybox {
	height: 30%;
	width: 90%;
	background-color: white;
	margin: auto;
	padding: 0;
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: center;
}

.sbbox {
	height: 30%;
	width: 90%;
	background-color: white;
	margin: auto;
	overflow: auto;
}

.time {
	text-align: center;
}

.middlebox {
	background-color: white;
	overflow: auto;
	width: 40%;
	height: 40%;
	padding: 10px;
}

#identities {
	display: flex;
	flex-direction: column;
	width: 86px;
	animation: float 3s ease-in-out infinite;
}

#blinkies {
	width: 325px;
	height: 200px;
	overflow-y: scroll;
	display: flex;
	gap: 0;
	flex-wrap: wrap;
}

#graphicsbox {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	align-items: center;
}

/* img */

#sitebutton {
	display: block;
	margin: auto;
}

#blinkies img {
	width: 150px;
	margin: 0;
}

/* misc */

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	height: 95%;
	padding: 0;
	margin: 0;
	background-image: url('../media/homepagebackupbg.jpg'); 
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

@keyframes float {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(20px);
            }

            100% {
                transform: translateY(0);
            }
        }