@font-face {
    font-family: 'Mantara';
    src: url('fonts/mantana.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body {
    background-image: url('img/BackgroundImg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Verdana', sans-serif; 
    font-size: large;
    color: rgba(0, 0, 0, 0);
}
.blog-page {
            background-image: url('img/BackgroundImggreen.png');
            background-repeat: repeat;
            animation: scroll 16s linear infinite;
            background-attachment: fixed;
            font-family: 'Mantana', sans-serif; 
            font-size: large;
            color: #000000;
		} @keyframes scroll {
    		from {
        	background-position: 0 0;
    		}
    		to {
        	background-position: 0 500px; 
					}
			}
img {
	max-width: 100%;
    object-fit: contain;
}
button {
	display: inline-block;
	background: rgba(76, 99, 143, 0);
	border: none
}
button:hover {
	cursor:pointer
}
iframe {
    flex-direction: column; 
    justify-content: center; 
    text-align: center; 
    display: flex;
    align-content: stretch;	
	border: 4px solid #cbe8c6;
	height: 105%;
	width: 100%;
}
.wrapper {
	height: 100%;
	min-width: 815px;
    display: flex;
    align-content: stretch;
}
input {
  width: 100%; 
  pointer-events: none;
  touch-action: none;
}
.wrapperdown {
  display: inline-block;
  position: relative;   
}

.dropdown {
  display: none;
  position: absolute;
  flex-direction: column;
  padding: 5px;
  gap: 5px;
  z-index: 9999;   
  width: max-content;
}

#toggler:checked ~ .dropdown {
  display: flex; 
}

label[for="toggler"] {
  display: inline-block;    
  cursor: pointer;       
}

.splash-page	{
	height: auto;
	align-content: stretch; justify-items: center;
    width: 600px;
	display: flex;
	margin-top: 5px;
	margin-right:5x;
	margin-left: 5px;
	margin-bottom: 25px;
}

.main {
    display: inline-block;
    align-content: stretch; justify-items: center;
	margin-top: 52px;
	height: 800px;
	width: 800px;
	background: rgba(255, 255, 255, 0);
}

.page {
	background: rgba(255, 255, 255, 0);
	min-height: 818px;
	font-family: 'Mantar';
	box-sizing: border-box;
	padding: 24px;
}

.page h1:first-child {
	margin-top: 0;
}

h1, h2, h3 {
	font-family: 'Mantara';
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	line-height: initial;
	letter-spacing: 0.5px;
	font-size: 24px;
}

h1 {
	font-size: 32px;
	border-bottom: 5px solid #000;
	color: #000000;
}

h2 {
	border-bottom: 1px dotted #000;
	color:#000000;
}

.sidebar {  
	position: absolute;
	left: 575px;
	top: 0;
	min-width: 200px;
}

.menu a {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	padding: 6px 6px;
	display: inline-block;
	font-size: 16px;
}

.menu a:hover {
	text-decoration: underline;
}

.candle {
	width: 40px;
	margin-top: 19px;
	margin-left: 10px;
}

.width-50 {
	max-width: 50%;
}

.border {
	border: 3px solid #000;
}

table {
	border-collapse: collapse;
}

td, th {
	border: 1px solid black;
	padding: 3px 6px;
}

th {
	background: black;
	color: white;
}
.billboard	{
    width: 175px;
    flex-direction: column; 
    justify-content: top; 
    text-align: top; 
    display: flex;
    align-content: stretch;	
    padding-left: 45px;

}
.message {
    font-family: 'Tahoma', sans-serif; 
    color: #192237;
	background-color: #91B291;
	border-radius: 6px;
	padding: 12px 12px;
	display: inline-block;
	width: 85%;
	margin-left: 10px;
	box-sizing: border-box;
	min-height: 60px;
	position: fixed;
	z-index: zzz;
	border: 1px solid #364874;
}

.chat-me .message {
	background-color: #cbe8c6;
}


.message {
	background-color: #91B291;
	border-radius: 6px;
	padding: 12px 12px;
	display: inline-block;
	width: 85%;
	margin-left: 10px;
	box-sizing: border-box;
	min-height: 60px;
	position: relative;
	z-index: 2;
	border: 1px solid #364874;
}
.avatar {
	height: 75px;
	width: 75px;
	background-color: #364874;
	display: inline-block;
	vertical-align: top;
	border-radius: 4px;
	border: 1px solid #2D345B;
	background-image: url('img/avatar.jpg');
}

.chat-other .avatar {
	background-image: url('img/other.gif');
}

.chat {
	margin: 12px 0;
	position: relative;
}

.title {
	color: #C3C89B;
	border-bottom: 1px solid #C3C89B;
	display: inline-block;
	padding: 3px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 12px auto;
}

img {
	max-width: 100%;
}

.sepia {
	filter: sepia(1) hue-rotate(25deg);
	transition: 0.3s all;
}

.sepia:hover {
	filter: unset;
}

.rounded {
	border-radius: 4px;
}

iframe.updates {
	border: 0;
	margin: 0;
	padding: 0;
	height: 20px;
	width: 100%;
	position: absolute;
	bottom: 3px;
}

.width-50 {
	max-width: 50%;
}

h1 + i {
	color: #364874;
}

a.button {
	display: inline-block;
	background: #4c638f;
	border-bottom: 4px solid #364874;
	border-right: 4px solid #364874;
	border-top: 4px solid #6793a3;
	border-left: 4px solid #6793a3;
	padding: 3px 6px;
	color: #dbe1b6;
	text-decoration: none;
	border-radius: 2px;
	outline: 1px solid #364874;
}

a.button:hover {
	border-bottom: 4px solid #6793a3;
	border-right: 4px solid #6793a3;
	border-top: 4px solid #364874;
	border-left: 4px solid #364874;
}

.disabled {
	opacity: 0.5;
}

.me-aaa {
	background-image: url('img/me-aaa.gif');
}

.me-nico {
	background-image: url('img/me-nico.gif');
}

.me-cri {
	background-image: url('img/me-cri.gif');
}

.me-meh {
	background-image: url('img/me-meh.gif');
}

ul {
	margin: 0.5rem 0;
}

.photo-card {
	height: 120px;
	width: 120px;
	background-size: cover;
	display: inline-block;
	border-radius: 6px;
	border: 1px solid #364874;
	margin-right: 6px;
	opacity: 0.6;
}

table {
	border-collapse: collapse;
	width: 100%; 
}

.border-0 td {
	border: 0;
}

table, th, td {
	border: 1px solid #2d345b;
}

th, td {
	padding: 8px 10px; 
	text-align: left; 
	background: #c3c89b;
	vertical-align: top;
}

th {
	background: #364874;
	color: #dbe1b6;
}

.margin {
	margin-left: 75px;
}

.card {
	background: #c3c89b;
	display: inline-block;
	width: 100%;
	border-radius: 4px;
	border: 1px solid #364874;
	padding: 12px;
	box-sizing: border-box;
}

ul {
	list-style: none;
	padding-left: 12px;
}

li {
	padding-left: 20px;
	position: relative;
}

li::before {
	content: "→";
	color: #6793a3;
	font-weight: bold;
	position: absolute;
	left: 0;
}

.w-50 {
	max-width: 50%;
}

.rounded {
	border-radius: 4px;
}

.border {
	border: 1px solid #252547;
}

.border-0 {
	border: 0;
}

.light {
	background: #91b291;
	padding: 12px 8px;
	border-radius: 4px;
}
.title, .heading, h1, h2, h3, h4, readmore, .first-word {
  text-transform: uppercase;
  }
  
/* Column layout for main text. */
.columns {
	display: inline-flex;
	align-content: center;
}

@media (max-width: 754px) {
  .main {
    width: 100%;
    }
  .columns {
    columns: 2;
    }
  }

@media (max-width: 500px) {
  h1 {
  font-size: 1.95rem;
  }  
  
  h2 {
    font-size: 1.1rem;
    }
  
  h3 {
    font-size: 0.975rem;
    }

  h4 {
  font-size: 0.92rem;
    }
  .sub-left, .sub-right {
    max-width: 50%;
    }

  body {
    font-size: 0.87rem;
}
button:hover {
	cursor:pointer;}