body {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  background-image: var(--background-image);
  transition: background-image 0.3s;
  background-attachment: fixed;
  /*margin: 0px 0px 0px 0px;*/
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align:justify;
  text-justify:inter-word;
}

h1,h2,h3,h4{
  text-align:left;
}

.searchbar{
  position: absolute;
  top: 0;
  right:0px;
  margin-left: auto;
  margin-right: auto;
  
  z-index:2;
  display: block;
}

.smallersearchbar{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: none;
}

.smallestsearchbar{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: none;
}

.mobileonly {
  display: none;
}
.desktoponly {
  display: block;
}

.newpage{
  border-radius:20px;
  padding:7px;
  margin:7px;

font-family: var(--font-family);
color: var(--text-color);
background-color: var(--page-background-color);
transition: background-color 0.3s, color 0.3s;
}


/*       --~--~--  CSS Variables for Themes  --~--~--      */
   
a:link { color: var(--link-color); }
a:visited { color: var(--link-visited-color); }
a:link:active, a:visited:active { color: var(--link-active-color); }   

[data-color-scheme="dark"] { color-scheme: dark; }
[data-color-scheme="light"] { color-scheme: light; }   

:root {
    --page-background-color:rgba(220, 219, 232, 0.75);
    --text-color: #000000;
	--canvas-linecolor-full:#000000;
	--canvas-linecolor-lightest:#d0d0d0;			
	--canvas-linecolor-light:#a0a0a0;
	--canvas-linecolor-dark:#202020;		
    --canvas-text-color: #000000;			
	--canvas-background: #FEFEFF;
	--canvas-graphpaper-vlines: #eee;
	--canvas-graphpaper-hlines: #eee;
    --header-bg-color: #b58900;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	--background-image: url('resources/common/webbackground2.jpg');
	--linear-gradient-a: linear-gradient(lightblue,white);
	--linear-gradient-ar: linear-gradient(white,lightblue);

	--link-color: #0000EE;
	--link-visited-color: #551A8B;
	--link-active-color: #FF0000;
}

/* Dark Theme Variables */
.dark-theme {
    --page-background-color: #121212;
    --text-color: #e0e0e0;
	--canvas-linecolor-full:#ffffff;
	--canvas-linecolor-lightest:#303030;			
	--canvas-linecolor-light:#606060;
	--canvas-linecolor-dark:#909090;
    --canvas-text-color: #e0e0e0;				
	--canvas-background: #05050F;			
	--canvas-graphpaper-vlines: #222;
	--canvas-graphpaper-hlines: #222;	
    --header-bg-color: #1f1f1f;        
  
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	--background-image: url('resources/common/webbackground1.jpg');	
	--linear-gradient-a: linear-gradient(MidnightBlue,black);
	--linear-gradient-ar: linear-gradient(black,MidnightBlue);		

	--link-color: lightskyblue;
	--link-visited-color: #8d6bad;
	--link-active-color: #ff4040;	
    --image-filter: brightness(0.85);
	--invert-filter: invert(100%);
}

/* Vintage Theme Variables */
.vintage-theme {
    --page-background-color: #000000;
    --text-color: #00ff00;
	--canvas-linecolor-full:#00ff00;
	--canvas-linecolor-lightest:#003000;				
	--canvas-linecolor-light:#006000;
	--canvas-linecolor-dark:#009000;
    --canvas-text-color: #66ff00;				
	--canvas-background: #05050F;				
	--canvas-graphpaper-vlines: #000000;
	--canvas-graphpaper-hlines: #002000;			
    --header-bg-color: #003300;

    --font-family: 'Courier New', Courier, monospace;
	--background-image: url('resources/common/webbackground1.jpg');			
	--linear-gradient-a: linear-gradient(#003300,black);
	--linear-gradient-ar: linear-gradient(black,#003300);

	--link-color: lightgreen;
	--link-visited-color: #6bad8d;
	--link-active-color: #c0ffc0;			
	--image-filter: brightness(0.70) sepia(80%) hue-rotate(60deg);
   	--invert-filter: invert(100%);
}

/* Classic Theme Variables */
.classic-theme {
    --page-background-color: #000000;
    --text-color: #ffff00;
	--canvas-linecolor-full:#ffff00;
	--canvas-linecolor-lightest:#303000;				
	--canvas-linecolor-light:#606000;
	--canvas-linecolor-dark:#909000;
    --canvas-text-color: #ffff00;				
	--canvas-background: #05050F;				
	--canvas-graphpaper-vlines: #000000;
	--canvas-graphpaper-hlines: #202000;			
    --header-bg-color: #333300;

	--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;	
	--background-image: url('resources/common/webbackground1.jpg');			
	--linear-gradient-a: linear-gradient(#333300,black);
	--linear-gradient-ar: linear-gradient(black,#333300);

	--link-color: amber;
	--link-visited-color: #ad9b8d;
	--link-active-color: #ffffc0;			
	--image-filter: brightness(0.88) sepia(93%);
   	--invert-filter: invert(100%);	
}

/* Theme Switcher Dropdown */

.theme-switcher, .theme-switcher select {
  padding: 2.5px 5px;
  border: 1px solid var(--table-border-color);
  border-radius: 4px;
  background-color: var(--page-background-color);
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

/* Golden Ratio */

.golden1a { 
  padding: 0px;
  box-sizing: border-box;
  min-height: 61.7886179vw;
}

.golden1b {
  float: right;
  /* 76/123 = 0.617886179 */ 
  width: 38.2114%;
  /*aspect-ratio: 0.5;*/
  padding: 0px 0px 0px 14px;
  overflow: hidden;  
  box-sizing:border-box; 
  line-height:1.29vw;
  font-size:1.24vw
}

.golden2 {
  float: left;
  /* 18/47 = 0.382978723 */ 
  width: 38.2978723%;
  aspect-ratio: 1;
  padding: 0;
  box-sizing:border-box;
}

.golden2a {
  float: left;
  width: 100%;
  aspect-ratio: 1;
  padding:3% 0 0 3%;
  overflow: hidden;
  box-sizing:border-box;
  vertical-align:middle;
  text-align:center;
  line-height:1.55vw;
  font-size:1.45vw;
  
}
.golden2b {
  float: left;
  width: 100%;
  /* 18/11 1.636363636 */
  aspect-ratio: 1.6363;
  padding:2% 0 0 3%;
  overflow: hidden;
  box-sizing:border-box;
  vertical-align:middle;
  text-align:center;
  line-height:1.25vw;
  font-size:1.25vw
}

.golden3 {
  float: left;
  /* 29/47 = 0.617021277 */   
  width: 61.7021277%;
  aspect-ratio: 1;
  padding:1%;
  overflow: hidden;  
  box-sizing:border-box;
  vertical-align:middle;
  text-align:center;
  line-height:1.3vw;
  font-size:1.2vw
}

.golden4 {
  float: left;
  width: 100%;
  padding:1%;
  /* aspect-ratio:1; overflow: hidden; */  
  box-sizing:border-box;  
  line-height:2vw;
  font-size:2vw
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*   -~- Responsive layout -~-   */

@media screen and (max-width: 750px) {
  .searchbar{
    display: none;
  }
  .smallersearchbar{
    display: block;
  }
    .smallestsearchbar{
    display: none;
  }
}

@media screen and (max-width: 600px) {

  .searchbar{
    display: none;
  }
  
   .smallersearchbar{
    display: none;
  }
  
    .smallestsearchbar{
    display: block;
  }

    .desktoponly {
    display: none;
  }
  
    .mobileonly {
    display: block;   
  }

  .golden1a {
    width: 100%;   
  }
  
  .golden1b {
    width: 100%;
    float: left;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 14px 0px;   
  }
  
  .golden2 {
    /* 18/47 = 0.382978723 */
    width: 38.2978%
  }
  
  .golden3 {
    /* 29/47 = 0.617021277 */
    width: 61.7021%;
    line-height:3.3vw;
    font-size:3vw
  }
  
  .golden4 {
    width: 100%;
    line-height:4.5vw;
    font-size:4vw
  }
  
  .golden2a {
    line-height:4.5vw;
    font-size:4.0vw
  }
  
  .golden2b {
    line-height:3vw;
    font-size:3vw
  }
  
}


/* Shared footer conveyor: consistent tiles for mixed-aspect archival artwork.
   Fixed display dimensions only; the original files are never resized or cropped. */
#warlock-footer .marquee__content > a {
  box-sizing: border-box;
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid var(--canvas-linecolor-light, #999);
  border-radius: 9px;
  background: var(--canvas-background, var(--page-background-color, #fff));
  text-decoration: none;
  overflow: hidden;
}
#warlock-footer .marquee__content > a > img {
  display: block;
  width: 110px;
  height: 110px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  flex: none;
  border: 0;
  border-radius: 5px;
}
#warlock-footer .marquee__content > a:focus-visible {
  outline: 3px solid var(--canvas-linecolor-dark, currentColor);
  outline-offset: -3px;
}

/* Marquee conveyor belt */

.marquee {
  --gap: 1px;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  filter: var(--image-filter);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: paused !important;
  }
}

/* Enable animation */
.enable-animation .marquee__content {
  animation: scroll 80s linear infinite;
}

/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
  animation-play-state: paused;
}

/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
  max-width: fit-content;
}

/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
  animation-name: scroll-abs;
}

@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}