/*
  Name: ティモシ ニューフィールーズ: 記事、論文、と詩 Style Sheet
  Date: April. 2025
  Version: 4.1
  Author: T Newfields
  Autor URI: https://www.tnewfields.info
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #FFF;
  padding-top: 12px;
  margin: 0 auto;
  width: 100%;
}

a {
  outline: none;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 1px #fff, 0 0 2px #FDF48D, 0 0 5px #fff;
}

a:hover, a:active {
  background-color: #F0F848;
  color: #fff;
  text-shadow: 1px 1px 1px #333;
}

a:visited {
  color: black;
  padding: 0 1px;
}

.alternativetext {font-size: 1.4em; 
	font-style: normal;
	font-weight: 600;
	line-height: 35px;
	color:#813014;
	text-align:left;
}

.dialog1 {color:#1820F3;
	font-family: sans-serif;
    font-size: clamp(0.88rem, 1.8vw, 1.7rem);
	font-style: normal;
	font-weight: 800;
	width: 170px;
	height: 36px;
	line-height: 30px; 
	text-align:left;
}
.dialog2 {color: #1F0800;
	font-family: serif;
    font-size: clamp(0.88rem, 1.8vw, 1.7rem);
	text-align:left;
	font-weight: 500;
	height: 36px;
	line-height: 30px; 
}

footer {text-align: center;}

.ghosttext {font-size: calc(12px + 1vw);
	color:  black;
	text-align:center;
	line-height: 34px;
	font-family: "Book Antiqua", "Gills Sans", Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Meiryo;
	font-weight:800;
       text-shadow: 0 0 1px #000,
                   0 0 2px #FDF48D,
                   0 0 5px #fff,
                   0 0 7px #BFA371,
                   0 0 9px #fff,
                   0 0 11px #719357,
                   0 0 13px #fff,
                   0 0 15px #3E9175;
}

.Japanese {font-family: Tahoma, Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Meiryo, Yu Mincho, "新細明體", "宋体", "Arphic OpenType 221", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  text-align: center;
  font-weight: 600;
}

h1 {
  font-size: calc(21px + 2.1vw);
  text-shadow: 1px 3px 0px rgb(150, 150, 150), 1px 13px 5px rgb(171, 168, 168);
  transform: scale(1.2, 1);
}

h2 {
  color: #663333;
  font-size: calc(16px + 1.8vw);
}

h3 {
  color: gold;
  font-size: calc(14px + 1.5vw);
  font-weight: 500;
}

h4 {
  font-size: calc(14px + 1.25vw);
  margin-top: -1px;
}

.maintext {font-size: calc(12px + 1.4vw);
	font-style: normal;
	font-weight: 700;
	line-height: 30px;
	color:#174307;
	text-align:left;
}


.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.flex-item {
  background-color: #1F8FE1;
  color: #FEE2BD;
  width: 110px;
  height: 28px;
  margin: 10px;
  font-weight: bold;
  text-align: center;
  padding: 4px;
}

li {float: left; padding:6px; font-size: 1.75vw;}
li a {display: block;  
    color: #3F5023;
    text-align: center;
    padding: 1px 6px;
    text-decoration: none;
}
li  a:hover:not(.active) {
    background-color: #111;
}

table{border-spacing: 20px;}
td {vertical-align: top;}
tr {vertical-align: top;}
.thumbnail:hover {
    position:relative;
    top:-25px;
    left:-35px;
    width:65%;
    height:auto;
    display:block;
    z-index:999;
}

ul {list-style-type: none;
    z-index:3;
    margin: 0;
    color: #005800;
    padding: 0;
    overflow: hidden;
    background: rgba(243, 245, 175,0.5);
    position: fixed;
    top: 0;
    width: 100%;
}

/* Hover Effects */
.hvr-grow:hover {
  transform: scale(1.33);
}

.hvr-rotate:hover {
  transform: rotate(4deg);
}

img.bg {
  box-shadow: 1px 1px 2px #CECCAC, 0 0 5px gray, 0 0 25px #0600BF;
}

.inner-bg {box-shadow: inset 0 0 5px #fff, 0 0 10px #FDF48D, 0 0 15px #fff, 0 0 20px #BFA371, 0 0 25px #fff, 0 0 30px #719357, 0 0 36px #fff, 0 0 56px #3E9175;
}

.polaroid {padding: 10px 10px 20px 10px;
	border: 1px solid #BFBFBF;
	background-color: #FFF;
	box color: #ffa500;
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	float: left;
}

@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
  .headtext {
    font-size: 2em;
    text-shadow: 0 0 5px darkblue;
    letter-spacing: 3px;
  }
}