/* bree-serif-regular - latin */
@font-face {
  font-family: 'Bree Serif';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/bree-serif-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/bree-serif-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/bree-serif-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/bree-serif-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/bree-serif-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/bree-serif-v17-latin-regular.svg#BreeSerif') format('svg'); /* Legacy iOS */
}

@media (prefers-color-scheme: dark) {
/* dark mode styles */ 

	body {
	    display: table-row;
	    background-color: #282C2F;
	}

	#post {
	    display: table-cell;
	    border: 30px solid #282C2F;
	    background-color: #3C4043;
	    color: #fff;
	    text-align: center;
	    font-family: 'Bree Serif', serif;
	    font-size: 45px;
	    line-height: 52px;
	    vertical-align: middle;
	}
	
	span {
		text-decoration: underline;
		text-decoration-color: #D39D2E;
		text-decoration-skip: ink;	
	}
	
	#socialmedia a svg {
		width: 30px;
		padding-right: 10px;
		padding-left: 10px;
		fill: white;
	}
	
	#socialmedia a svg:hover {
		opacity: 0.75;
		filter: alpha(opacity=75); /* For IE8 and earlier */
	}
	
	/* Tooltip container */
	.tooltip {
	    position: relative;
	    display: inline-block;
	    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	}
	
	/* Tooltip text */
	.tooltip .tooltiptext {
	    visibility: hidden;
	    width: 120px;
	    background-color: black;
	    color: #fff;
	    text-align: center;
	    padding: 5px 0;
	    border-radius: 6px;
	 
	    /* Position the tooltip text - see examples below! */
	    position: absolute;
	    z-index: 1;
	}
	
	/* Show the tooltip text when you mouse over the tooltip container */
	.tooltip:hover .tooltiptext {
	    visibility: visible;
	}
	
	@media only screen and (max-device-width: 480px) {
	    html {
		    height: 100%;
		    width: 100%;
		    display: table;
		}
		body {
	    	display: table-row;
	    	background-color: #282C2F;
		}
		#post {
		    display: table-cell;
		    border: 80px solid #282C2F;
		    background-color: #3C4043;
		    color: #fff;
		    text-align: center;
		    font-family: 'Bree Serif', serif;
		    font-size: 70px;
		    line-height: 80px;
		    vertical-align: middle;
		}
		span {
			text-decoration: underline;
			text-decoration-color: #D39D2E;
			text-decoration-skip: ink;	
		}
		#socialmedia a svg {
			width: 60px;
			padding-right: 20px;
			padding-left: 20px;
		}
	}
}


html {
    height: 100%;
    width: 100%;
    display: table;
}

@media (prefers-color-scheme: light) {
/* dark mode styles */ 

	body {
	    display: table-row;
	    background-color: #fff;
	}

	#post {
	    display: table-cell;
	    border: 30px solid white;
	    background-color: #F0ECEA;
	    color: #205434;
	    text-align: center;
	    font-family: 'Bree Serif', serif;
	    font-size: 45px;
	    line-height: 52px;
	    vertical-align: middle;
	}
	
	span {
		text-decoration: underline;
		text-decoration-color: #D39D2E;
		text-decoration-skip: ink;	
	}
	
	#socialmedia a svg {
		width: 30px;
		padding-right: 10px;
		padding-left: 10px;
	}
	
	#socialmedia a svg:hover {
		opacity: 0.5;
		filter: alpha(opacity=50); /* For IE8 and earlier */
	}
	
	/* Tooltip container */
	.tooltip {
	    position: relative;
	    display: inline-block;
	    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	}
	
	/* Tooltip text */
	.tooltip .tooltiptext {
	    visibility: hidden;
	    width: 120px;
	    background-color: black;
	    color: #fff;
	    text-align: center;
	    padding: 5px 0;
	    border-radius: 6px;
	 
	    /* Position the tooltip text - see examples below! */
	    position: absolute;
	    z-index: 1;
	}
	
	/* Show the tooltip text when you mouse over the tooltip container */
	.tooltip:hover .tooltiptext {
	    visibility: visible;
	}
	
	@media only screen and (max-device-width: 480px) {
	    html {
		    height: 100%;
		    width: 100%;
		    display: table;
		}
		body {
	    	display: table-row;
		}
		#post {
		    display: table-cell;
		    border: 80px solid white;
		    background-color: #F0ECEA;
		    color: #205434;
		    text-align: center;
		    font-family: 'Bree Serif', serif;
		    font-size: 70px;
		    line-height: 80px;
		    vertical-align: middle;
		}
		span {
			text-decoration: underline;
			text-decoration-color: #D39D2E;
			text-decoration-skip: ink;	
		}
		#socialmedia a svg {
			width: 60px;
			padding-right: 20px;
			padding-left: 20px;
		}
	}
}