@font-face {
    font-family: "dotemp";
    src: url("/fonts/dotemp.ttf") format("truetype");
	font-size: 16px;
}

@font-face {
    font-family: "Univers";
    src: url("/fonts/UniversLTStd-BoldObl.otf") format("opentype");
	font-size: 24px;
}

@font-face {
    font-family: "UniversItal";
    src: url("/fonts/OPTIUniversSixtyEight.otf") format("opentype");
	font-size: 24px;
}

body
{
	width: 760px;
	padding: 20px 60px 20px 60px;
	margin: auto;
	margin-top: 48px;
	margin-bottom: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#glass-greenbox-logo {
	opacity: 0.85;
	margin-bottom: 20px;
	margin-top: 30px;
}

#linksdiv {
	margin-bottom: 16px;
}

html {
	background-image: url("images/blog/bg-dark.png");
	background-attachment: fixed;
}

#blog-container {
    width: 880px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    position: relative;
}

:focus {
    outline-style: solid;
    outline-color: transparent;
}

.button {
    margin: 3px;
    cursor: pointer;
}

.button.b {
	font-size: 18px;
	font-family: "dotemp";
	position: relative;
    border: 1px solid #8aff8d;
    border-radius: 50px;
    padding: 8px 21px;
    background-color: #d3ffd8;
    background-image: radial-gradient(75% 50% at 50% 0%, #f4feff, transparent), radial-gradient(75% 35% at 50% 80%, #74f1aa, transparent);
    box-shadow: inset 0 -2px 4px 1px rgb(138 255 129 / 60%), inset 0 -4px 4px 1px #8de3fc, inset 0 0 2px 1px rgba(255, 255, 255, 0.2), 0 1px 4px 1px rgba(17, 110, 231, 0.2), 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    color: #fff;
    text-shadow: 0 1px 1px #469349;
    transition-property: border-color, transform, background-color;
    transition-duration: 0.2s;
	color: black;
}

.button.b::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    width: 80%;
    height: 40%;
    background-image: linear-gradient(to bottom, #f4feff, transparent);
    opacity: 0.75;
}

.button.b:hover {
    transform: scale(1.04);
}

.button.b:active {
    border-color: #8aff8d;
    transform: scale(0.96);
    background-color: #7dff8c;
}

#aqua-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 775px;
	opacity: 80%;
}

.blog-title {
	font-size: 24px;
   font-family: "UniversItal";
	color: #f6ff79;
	margin-left: 20px;
filter: drop-shadow(-2px 2px 0px rgba(63, 101, 54, 0.6));
cursor: pointer;
}

.blog-title-date {
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	font-size: 16px;
	color: #468199;
	margin-top: 0px;
	margin-bottom: -4px;
	margin-left: 20px;
	    font-weight: bolder;
}

.blog-post {
	width: 850px;
	border-radius: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 10px;
    margin-bottom: 10px;
	background-image: url('images/blog/post-bg-transp.png');
	box-shadow: inset 0 0 10px #008bb7;
}

.blog-post-header {
	display: flex;
	flex-direction: row;
	width: 850px;
	align-items: center;
}

.content {
    width: 760px;
    color: black;
    background: rgb(255 255 255 / 50%);
    margin-bottom: 28px;
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0px 0px 15px #008bb759;
}

.content img {
filter: drop-shadow(0px 0px 15px #008bb759);
display: flex;	
}

.content h1 {

	font-family: "UniversItal";
	font-size: 32px;
}

.content h2 {

	font-family: "UniversItal";
	font-size: 24px;
}

.content p {
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	font-size: 16px;

}

.content li {
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	font-size: 16px;

}

.content strong {
	font-weight: 600;
}

.content pre {
	margin-left: 40px;
}

#footer-div-wrapper {
    background: url(images/blog/post-bg-transp.png);
    border-radius: 36px;
    width: 850px;
    padding-top: 40px;
    padding-bottom: 30px;
	z-index: 1;
	margin-bottom: 15px;
	box-shadow: inset 0 0 10px #008bb7;
}

/* Liquid Glass */

:root {
/* Inner shadow */
--shadow-offset: 0;
--shadow-blur: 20px;
--shadow-spread: -5px;
--shadow-color: rgba(255, 255, 255, 0.7);

/* Painted glass */
--tint-color: 255, 255, 255;
--tint-opacity: 0.4;

/* Background frost */
--frost-blur: 2px;

/* SVG noise/distortion */
--noise-frequency: 0.008;
--distortion-strength: 77;

/* Outer shadow blur */
--outer-shadow-blur: 24px;
}

.glassDiv {
	position: relative;
    width: 880px;
    margin-top: -30px;
    border-radius: 28px;
    box-shadow: 0px 6px var(--outer-shadow-blur) rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.glassDiv::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    box-shadow: inset var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
    background-color: rgba(var(--tint-color), var(--tint-opacity));
}

.glassDiv::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 28px;
    backdrop-filter: blur(var(--frost-blur));
    filter: url(#glass-distortion);
    isolation: isolate;
    -webkit-backdrop-filter: blur(var(--frost-blur));
    -webkit-filter: url("#glass-distortion");
}

.containerfooter {
	width: 760px;
	height: 400px;
	margin-bottom: 0px;
}

#footerbg {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	filter: drop-shadow(0 0 0.5rem black);
}

#footerbars {
	position: absolute;
	z-index: 30;
	pointer-events: none;
}

#footershadow {
	position: absolute;
	z-index: 20;
	pointer-events: none;
}

.containersticker1 {
position: absolute;
z-index: 15;
margin-top: 206px;
margin-left: 34px;
}

.containersticker2 {
position: absolute;
z-index: 15;
margin-top: 97px;
margin-left: 97px;
}

.containersticker3 {
position: absolute;
z-index: 15;
margin-top: 163px;
margin-left: 73px;
}

.containersticker4 {
position: absolute;
z-index: 15;
margin-top: 100px;
margin-left: 258px;
}

.containersticker5 {
position: absolute;
z-index: 15;
margin-top: 160px;
margin-left: 263px;
}

.containersticker6 {
position: absolute;
z-index: 15;
margin-top: 203px;
margin-left: 230px;
}

.containersticker7 {
position: absolute;
z-index: 15;
margin-top: 160px;
margin-left: 410px;
}

.containersticker8 {
position: absolute;
z-index: 15;
margin-top: 207px;
margin-left: 447px;
}

.containersticker9 {
position: absolute;
z-index: 15;
margin-top: 98px;
margin-left: 632px;
}

.containersticker10 {
position: absolute;
z-index: 15;
margin-top: 161px;
margin-left: 601px;
}

.containersticker11 {
position: absolute;
z-index: 15;
margin-top: 202px;
margin-left: 632px;
}

.containersticker12 {
position: absolute;
z-index: 15;
margin-top: 315px;
margin-left: 648px;
}

.wtfpl-logo {
	display: flex;
    justify-content: center;
    padding-top: 12px;
	max-width: 247px;
}

.wtfpl {
	width: 167px;
	display: flex;
	flex-direction:column;
    justify-content: center;
	align-items: center;
    padding-bottom: 12px;
	color:#ffffff;
font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
font-size:20px;
font-weight: bold;
    position: relative;
}

.wtfpl p {
	margin-top: 8px;
	margin-bottom: 4px;
}

#dmca-contact {
font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
width: 700px;
font-size:16px;
font-weight: bold;
text-align: center;
color: black;
}

#wtfpl-license {
	width: 600px;
	max-height: 200px;
    position: absolute;
    display: none;
    background-color: black;
    padding: 5px;
    color: white;
	font-size: 12px;
}

.footer-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	image-rendering: pixelated;
}

#site-button {
	background: url('images/footer/buttonpanel-new.png');
	width: 369px;
	height: 249px;
	margin-top: 10px;
	filter: drop-shadow(-5px 5px 2px rgba(0, 0, 0, 0.2));
}

#site-button-hotlink {
width: 200px;
    height: 36px;
    margin-left: 84px;
    margin-top: 29px;
  overflow-y: auto;          /* vertical scrollbar only */
  overflow-x: hidden;        /* hide horizontal scrollbar */
  white-space: pre-wrap;     /* preserves spacing, allows wrapping */
  word-break: break-word;    /* breaks long strings if needed */
  
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
  

}

#site-button-hotlink::-webkit-scrollbar {
  display: none;                /* WebKit browsers */
}


#site-button-image {
width: 88px;
height: 31px;
    margin-left: 140px;
    margin-top: 99px;
}

#site-button-hotlink code {
	  font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
font-size:16px;
font-weight: bold;
text-align: center;
color: #486046;
}

#site-button-copy-button {
	width: 30px;
	height: 30px;
	margin-top: -95px;
    margin-left: 95px;
}

#site-button-copied-notif {
	font-family: "dotemp";
    font-weight: bold;
	color: #f9ff00;
	font-size: 30px;
	display: none;
	margin-left: 130px;
    margin-top: -33px;
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 1.0));
}