/* myStyleSheet.css */

h1 {
  color: black;
  font-family: Verdana;
  font-size: 100%;
  line-height: 150%;
}

h2 {
  color: black;
  font-size: 150%;
}

h3 {
  color: black;
  font-size: 75%;
}

h4 {
  color: black;
  font-size: 125%;
  font-style: italic;
}

a {
 text-decoration: none;
 color: #339980;
 font-weight: bold;
 border-bottom: 1px dotted;
}

a:link {
}

a:visited {
 color: #AA743C;
}

a:focus {
 color: #66CC99;
}

a:hover {
 color: #66CC99;
}

a:active {
 color: #66CC99;
}


.ContactBox_A {
 width:60%;
 background-color:#FFE4BF;
 border: 2px dotted #D8A060;
 background-image: linear-gradient(to right, #FFE4BF 0%, #fff0e6 50%, #FFE4BF 100%);
 box-shadow: 3px 5px 16px 1px #D8A060;
}
@media (max-width : 640px ) {
 .ContactBox_A {
  width:100%;
 }
}

.Title_A {
 font-size:clamp(2.5rem, 6vw, 3.5rem);
 white-space:nowrap;
}
@media (max-width : 640px ) {
 .Title_A {
  font-size:clamp(1.5rem, 8vw, 3.5rem);
 }
}

.Title_B {
 font-size:clamp(0.2rem, 3.5vw, 2.0rem);
 white-space:nowrap;
 margin-top:10px
}
@media (max-width : 640px ) {
 .Title_B {
  font-size:clamp(0.2rem, 4.5vw, 2.0rem);
 }
}

.MidTitle {
 font-size:clamp(0.1rem, 3.5vw, 2.0rem);
 white-space:nowrap;
 text-align:center;
 font-weight: bold;
 letter-spacing:4px;
 padding-left:clamp(0.1rem, 1vw, 0.5rem);
}
@media (max-width : 640px ) {
 .MidTitle {
  font-size:clamp(1.5rem, 5vw, 2rem);
  white-space:normal;
 }
}


.NavButton {
 color: #AA743C;
 font-size: 21px;
 line-height: 12px;
 padding: 8px;
 padding-left: 32px;
 padding-right: 32px;
 border-radius: 16px;
 font-family: Georgia, serif;
 font-weight: bold;
 text-decoration: none;
 font-style: italic;
 font-variant: normal;
 text-transform: none;
 background-image: linear-gradient(to right, #FFD8A8 0%, #ffead4 50%, #FFD8A8 100%);
 box-shadow: 0px 5px 12px 2px #D8A060;
 border: 3px solid #EBC490;
 display: inline-block;
 position:relative;
 cursor: default;
 z-index:21;
}

@media (max-width : 640px ) {
 .NavButton {
  font-size: 16px;
  padding: 4px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 12px;
 }
}

.NavButton:hover {
 color: #339980;
 text-shadow: 0px 0px 5px #66CC99;
 background: linear-gradient(to right, #ffead4 0%, #ffffff 50%, #ffead4 100%);
 border: 3px solid #FFD8A8; /* #FFD8A8; */
}
.NavButton:active {
 color: #339980;
 text-shadow: 0px 0px 5px #66CC99;
 background: linear-gradient(to right, #ffead4 0%, #ffffff 50%, #ffead4 100%);
 border: 3px solid #FFD8A8; /* #FFD8A8; */
}
/*
.NavButton:active {
 color: #66CC99;
 text-shadow: 0px 0px 5px #66CC99;
 background: #ffffff;
 border: 3px solid #ffead4;
}
*/

.hide {
  display: none;
}

.NavButton:hover + .hide {
 display: block;
 position: absolute;
 left: 0px;
 top: 0px;
}

.NavigationContainer {
 position: fixed;  /* fixed, absolute, fixed, sticky */
 width:100%;
 top:0px;
 /*transform: translateY(0);*/
 z-index:20;

 opacity: 0.33;
  -webkit-transition: opacity 0.75s ease-in-out;
  -moz-transition: opacity 0.75s ease-in-out;
  -ms-transition: opacity 0.75s ease-in-out;
  -o-transition: opacity 0.75s ease-in-out;
  transition: opacity 0.75s ease-in-out;

}


.NavigationContainer:hover {
 filter: alpha(opacity=50);
 opacity: 1.0;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -ms-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;

}

.NavigationContainer.unscrolled {
 opacity: 1.0;
}

.NavContSHADE {
 display:block;
 position: fixed;  /* absolute, fixed, sticky */
 width:100%;
 height:192px;
 background-image:linear-gradient(0deg, transparent, rgba(25, 25, 50, 1.0));
 background-size: 100% 100%;
 z-index:10;
 opacity: 0.0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
 }
.NavigationContainer:hover ~ .NavContSHADE {
 filter: alpha(opacity=50);
 opacity: 0.67;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;

}

.SubNavButton {
 color: #AA743C;
 font-size: 16px;
 line-height: 20px;
 width: 100%;
 padding: 8px;
 padding-left: 0px;
 padding-right: 0px;
 border-radius: 12px;
 font-family: Georgia, serif;
 font-weight: normal;
 text-decoration: none;
 font-style: italic;
 font-variant: normal;
 text-transform: none;
 background-image: linear-gradient(to right, #ffead4 0%, #ffffff 50%, #ffead4 100%);
 box-shadow: 0px 5px 12px 2px #D8A060;
 border: 3px solid #EBC490;
 display:inline-block;
 position:relative;
 cursor: pointer;
 z-index:22;
}
@media (max-width : 640px ) {
 .SubNavButton {
  font-size: 15px;
  padding: 4px;
  border-radius: 8px;
 }
}

.SubNavButton:hover {
 color: #ffffff;
 font-weight: bold;
 letter-spacing: -1px;
 text-shadow: 0px 0px 5px #66CC99;
 background-image: linear-gradient(to right, #66CC99 0%, #AAEECC 50%, #66CC99 100%);
 border: 3px solid #ffffff; /* #ffead4; */
 display: inline-block;
}
.SubNavButton:active {
 color: #339980;
 font-weight: bold;
 letter-spacing: -1px;
 text-shadow: 0px 0px 5px #66CC99;
 background-image: linear-gradient(to right, #CCFFDD 0%, #ffffff 50%, #CCFFDD 100%);
 border: 3px solid #66CC99; /* #FFD8A8; */
 display: inline-block;
}

.Nav_Games,
.Nav_Games_Sub:hover,
.Nav_Games:hover ~
.Nav_Games_Sub { display:block }
.Nav_Games_Sub { display:none  }

.Nav_Writing,
.Nav_Writing_Sub:hover,
.Nav_Writing:hover ~
.Nav_Writing_Sub { display:block }
.Nav_Writing_Sub { display:none  }

.Nav_MyWork,
.Nav_MyWork_Sub:hover,
.Nav_MyWork:hover ~
.Nav_MyWork_Sub { display:block }
.Nav_MyWork_Sub { display:none  }





.FeatureImgDiv {
 display:grid;
 grid-template-areas:'content';
 line-height:0%;
 /*
 width:964px;
 height:256px;
 */
 box-shadow: 0px 6px 24px 8px #D8A060;
 border-radius:16px;
 z-index:1;
 /*
 width:  calc(964px * 0.1)
 height: calc(256px * 0.1)
 */
}

.FeatureImgPre {
 grid-area:content;
 border-radius:16px;
 filter:blur(8px);
 opacity:0.67;
 z-index:1;
 width:100%;
}

.FeatureImgFin {
 grid-area:content;
 border-radius:16px;
 z-index:2;
 width:100%;
}

.FeatureImgTitle {
 font-size:clamp(1rem, 3.5vw, 2rem);
 /*padding-bottom:16px;*/
 white-space:nowrap;
 z-index:1;
}
@media (max-width : 640px ) {
 .FeatureImgTitle {
  font-size:clamp(1rem, 6vw, 2rem);
  line-height:6vw;
  white-space:normal;
 }
}

.FeatureImgDescription {
 font-size:100%;
 padding-top:12px;
 padding-bottom:48px;
 z-index:1;
}




    .MusicRectangle {
     display:inline-table;
     line-height:200%;
     white-space: nowrap;
     width:384px;
     height:216px;
     color:white;
     font-weight:bold;
     font-style:italic;
     text-shadow: 0px 0px 12px black;
     background-size: cover;
     background-position:center;
     box-shadow: 0px 6px 24px 8px #D8A060;
     border-radius:28px;
     margin:8px;
     margin-bottom:24px;
    }
@media (max-width : 640px ) {
 .MusicRectangle {
     margin:0px;
     margin-bottom:24px;
     width:100%;
     /*aspect-ratio: 16 / 9;*/
     height:192px;
 }
}

    .MusicRectangleB {
     display:inline-table;
     line-height:200%;
     white-space: nowrap;
     width:300px;
     height:100px;
     color:white;
     font-weight:bold;
     font-style:italic;
     text-shadow: 0px 0px 12px black;
     background-size: cover;
     background-position:center;
     box-shadow: 0px 6px 24px 8px #D8A060;
     border-radius:28px;
     margin:8px;
     margin-bottom:24px;
    }
@media (max-width : 640px ) {
 .MusicRectangleB {
     margin:0px;
     margin-bottom:24px;
     width:100%;
     /*aspect-ratio: 16 / 9;*/
     height:100px;
 }
}

.AudioPlayer {
 display:block;
 width:100%;
 opacity:0.33;
}
.AudioPlayer:hover {
 opacity:0.9;
}

/*
.FeatureImgDivMusic {
 display:grid;
 grid-template-areas:'content';
 line-height:0%;
 width:384px;
 height:512px;
 border-radius:16px;
 box-shadow: 0px 6px 24px 8px #D8A060;
 border-radius:16px;
 z-index:1;
}
*/

.EmbeddedEssayVideos {
 width:640px;
 height:360px;
 margin-top:30px;
 margin-bottom:15px;
 box-shadow: 0px 6px 24px 8px #D8A060;
 border-radius:16px;
}
@media (max-width : 640px ) {
 .EmbeddedEssayVideos {
  width:80vw;
  height:45vw;
  border-radius:12px;
 }
}

.TitleOrnament_A {
 height:clamp(0.1rem, 3vw, 1.5rem);
}
.TitleOrnament_B {
 height:clamp(0.1rem, 2.5vw, 1.25rem);
}
.TitleOrnament_C {
 height:clamp(0.1rem, 2.5vw, 1.25rem);
 margin-top:12px;
}
@media (max-width : 640px ) {
 .TitleOrnament_C {
  height:clamp(1rem, 3.5vw, 1.25rem);
 }
}

.AcademicTable_A {
 width:30%;
 display:inline-table;
 margin-bottom:12px;
}
.AcademicTable_B {
 width:69%;
 display:inline-table;
}
@media (max-width : 740px ) {
 .AcademicTable_A {
  width:100%;
  display:table;
  margin-bottom:12px;
 }
 .AcademicTable_B {
  width:100%;
  display:table;
 }
}

.TanslationsList, .TanslationsList a {
 /*font-size:clamp(0.9rem, 1.5vw, 1.0rem)*/
 font-size:100%;
 color:black;
}
.TanslationsList tr {
 text-shadow: 0px 0px 12px white;
 background-size: cover;
 background-position: right top;
 /*background-opacity: 0.5;*/
}
.traListL {
 /*border-radius:12px;*/
 text-align:center;
 writing-mode:vertical-rl;
 white-space:nowrap;
 font-weight:bold;
 padding:8px;
}
.traListR {
 padding:16px;
 padding-right:100px;
 /*border-radius:12px;*/
}

.TraListContainer {
 width:67%;
}
@media (max-width : 640px ) {
 .TraListContainer {
  width:100%;
 }
 .traListR {
  padding-right:50px;
 }
}



.ProfundaTitle {
 width: 50%;
}
@media (max-width : 640px ) {
 .ProfundaTitle {
  width: 100%;
 }
}

/* +++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++ ART GALLERY STYLE SHEET ++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++ */

html {
  background-color: #EBC490;
  font-family: serif;
}

section {
  padding: 1em;
}

.lead {
  font-weight: 600;
  color: #777;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  flex: 1 1 auto;
  flex-basis: 175px;
  margin: .5em;
  max-width: 530px;
  max-height: 300px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius:16px;
}
.gallery-item.item-4x1 {
  flex-basis: calc(400px * 1.0);
}
.gallery-item.item-2x3 {
  flex-basis: calc(175px * 0.666);
}
.gallery-item.item-3x4 {
  flex-basis: calc(175px * 0.75);
}
.gallery-item.item-1x1 {
  flex-basis: 175px;
}
.gallery-item.item-4x3 {
  flex-basis: calc(175px * 1.333);
}
.gallery-item.item-3x2 {
  flex-basis: calc(175px * 1.5);
}
.gallery-item.item-8x5 {
  flex-basis: calc(175px * 1.6);
}
.gallery-item.item-2x1 {
  flex-basis: calc(175px * 2);
}
.gallery-item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background-color: rgba(0.25, 0.5, 1.0, 0.33);
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.5 13.75C4.5 8.64137 8.64137 4.5 13.75 4.5C18.8586 4.5 23 8.64137 23 13.75C23 18.8586 18.8586 23 13.75 23C8.64137 23 4.5 18.8586 4.5 13.75ZM13.75 0C6.15609 0 0 6.15609 0 13.75C0 21.3439 6.15609 27.5 13.75 27.5C16.3774 27.5 18.8327 26.7631 20.9205 25.4846L30.4906 35.0547C31.7509 36.3151 33.7944 36.3151 35.0547 35.0547C36.3151 33.7944 36.3151 31.7509 35.0547 30.4906L25.4846 20.9205C26.7631 18.8327 27.5 16.3774 27.5 13.75C27.5 6.15609 21.3439 0 13.75 0Z' fill='white'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 2.0rem;
  background-repeat: no-repeat;
  transition: opacity 333ms;
  z-index: 1;
}
.gallery-item .caption {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.67em 0;
  line-height: 1.125em;
  color: #fff;
  background-color: rgba(0.25, 0.5, 1.0, 0.67);
  transform: translateY(5em);
  transition: transform 500ms;
  z-index: 2;
}
.gallery-item .caption span {
  display: inline-block;
  max-width: calc(100% - 2em);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: wrap;
}
.gallery-item:hover .thumb {
  transform: scale(1.125);
}
@media (hover: hover) {
  .gallery-item:hover::after {
    opacity: 1;
  }
  .gallery-item:hover .caption {
    transform: translateY(0);
  }
}
.gallery-item .thumb {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: unset;
  text-align: center;
  background-color: #333;
  transition: filter 500ms, transform 500ms;
}
.ie-fix .gallery-item .thumb {
  width: auto;
}
.gallery-item .placeholder {
  filter: blur(20px);
}

@media (max-width : 640px ) {
 .gallery-item {
   flex-basis: 75px;
   margin: .25em;
  border-radius:12px;
 }
 .gallery-item.item-4x1 {
   flex-basis: calc(200px * 1.0);
 }
 .gallery-item.item-2x3 {
   flex-basis: calc(75px * 0.666);
 }
 .gallery-item.item-3x4 {
   flex-basis: calc(75px * 0.75);
 }
 .gallery-item.item-1x1 {
   flex-basis: 75px;
 }
 .gallery-item.item-4x3 {
   flex-basis: calc(75px * 1.333);
 }
 .gallery-item.item-3x2 {
   flex-basis: calc(75px * 1.5);
 }
 .gallery-item.item-8x5 {
   flex-basis: calc(75px * 1.6);
 }
 .gallery-item.item-2x1 {
   flex-basis: calc(75px * 2);
 }
 .gallery-item .caption {
  padding: 0.25em 0;
  line-height: 1.0em;
 }
}

.lightbox-wrapper {
  display: none;
  background-color: #202430;   /* #2e2e35; */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.lightbox {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: white;
}
.lightbox .lightbox-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 1em;
  font-weight: 600;
  text-align: center;
}
.lightbox .lightbox-header > * {
  opacity: .75;
}
.lightbox .lightbox-close {
  position: relative;
  height: 1.85rem;
  width: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  padding: 0;
  border: none;
}
.lightbox .lightbox-close::before, .lightbox .lightbox-close::after {
  position: absolute;
  content: "";
  height: 4px;
  width: 80%;
  background-color: #fff;
}
.lightbox .lightbox-close::before {
  transform: rotate(-45deg);
}
.lightbox .lightbox-close::after {
  transform: rotate(45deg);
}
.lightbox .lightbox-close:hover {
  opacity: 1;
}
.lightbox .lightbox-slides-wrapper {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}
.lightbox .lightbox-arrow {
  position: absolute;
  top: 50%;
  width: 4rem;
  height: 4rem;
  padding: .5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5em;
  opacity: .75;
  cursor: pointer;
  filter: drop-shadow(0 0 7px #000);
}
.lightbox .lightbox-arrow:hover {
  opacity: 1;
}
.lightbox .lightbox-arrow.arrow-left {
  left: 0;

  /*
  background-image: url('inv_next_b.png');
  */

  background-image: url("data:image/svg+xml,%3Csvg width='32' height='53' viewBox='0 0 32 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 26.5L27.3171 0L32 4.54286L9.36585 26.5L32 48.4571L27.3171 53L0 26.5Z' fill='white'/%3E%3C/svg%3E");

}
.lightbox .lightbox-arrow.arrow-right {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='53' viewBox='0 0 32 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32 26.5L4.68293 53L0 48.4571L22.6341 26.5L3.83911e-06 4.54286L4.68293 0L32 26.5Z' fill='white'/%3E%3C/svg%3E");
}
.lightbox .lightbox-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  transition: all 0ms ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.lightbox .lightbox-slide[data-state="prev"] {
  transform: translateX(-100%);
  opacity: 0;
}
.lightbox .lightbox-slide[data-state="next"] {
  transform: translateX(100%);
  opacity: 0;
}
.lightbox .lightbox-image {
  display: none;
  max-width: 100%;
  max-height: 100%;
}
.lightbox .spinner {
  display: none;
}