window.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root{
  --accent-orange:#ff9933;
  --visited-orange:color-mix(in oklab,var(--accent-orange) 100%,#130120 30%);/*#ff5900*/
  --dark-grad-orage:color-mix(in oklab,var(--accent-orange) 100%,#5A0909 22%);/*#ff7f00*/
  --light-grad-orage:color-mix(in oklab,var(--accent-orange) 100%,white 12%);/*#fdab58*/
  --hover-button-orange:color-mix(in oklab,var(--accent-orange) 100%,white 50%);/*#ffb870*/
  --bg-dark:#4d4d4d;
  --pointer-cur:url(https://www.cursor.cc/cursor/533/209/cursor.png) 11 2, pointer;
  accent-color:var(--accent-orange);
  scrollbar-color:var(--accent-orange) var(--bg-dark);
  scroll-behavior:smooth;
}
@font-face{
  font-family:'Cascadia Code';
  font-feature-settings:"ss02";
  src: local('Cascadia Code'), url("/fonts/CascadiaCode.woff2") format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Cascadia Code'; 
  font-feature-settings:"ss02";
  src: local('Cascadia Code'), url("/fonts/CascadiaCodeItalic.woff2") format('woff2');
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Planet Kosmos';
  font-style: normal;
  font-weight: normal;
  src: local('Planet Kosmos'), url("/fonts/PLANK___.woff") format('woff');
  font-display:swap;
}
@font-face{
  font-family:'Octuple max Solid';
  font-style: normal;
  font-weight: normal;
  src: local('Octuple max Solid'), url("/fonts/Octuple-max-demo.woff") format('woff');
  font-display:swap;
}
@font-face{
  font-family:'Acidic';
  font-style: normal;
  font-weight: normal;
  src: local('Acidic'), url("/fonts/Acidic.woff") format('woff');
  font-display:swap;
}
@font-face{
  font-family:'yagiza Regular';
  font-style: normal;
  font-weight: normal;
  src: local('yagiza Regular'), url('/fonts/YAGIZA__.woff') format('woff');
  font-display:swap;
}
@font-face{
  font-family:'PixdorTwo Medium';
  font-style: normal;
  font-weight: normal;
  src: local('PixdorTwo Medium'), url('/fonts/PixdorTwo.woff') format('woff');
  font-display:swap;
}
@font-face {
  font-family:'AddElectricCity';
  font-style: normal;
  font-weight: normal;
  src: local('AddElectricCity'), url('/fonts/ADDECRG_.woff') format('woff');
  font-display:swap;
}
@font-face{
  font-family:'HorrorFont-Regular';
  src: local('HorrorFont-Regular'), url('fonts/HorrorFont-Regular.ttf');
  font-display:swap;
}
@font-face{
  font-family:'Gunship';
  src: local('Gunship'), url("/fonts/gunship.ttf");
  font-display:swap;
}
@font-face{
  font-family:'Gunship';
  src: local('Gunship'), url("/fonts/gunshipital.ttf");
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Gunship Half';
  src: local('Gunship Half'), url("/fonts/gunshiphalf.ttf");
  font-display:swap;
}
@font-face{
  font-family:'Gunship';
  src: local('Gunship'), url("/fonts/gunshiphalfital.ttf");
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Gunship 3D';
  src: local('Gunship 3D'), url("/fonts/gunship3d.ttf");
  font-display:swap;
}
@font-face{
  font-family:'Gunship 3D';
  src: local('Gunship'), url("/fonts/gunship3dital.ttf");
  font-style:italic;
  font-display:swap;
}
.CascadiaCode{font-family:'Cascadia Code', 'Roboto Mono', monospace}
.PlanetK{font-family:'Planet Kosmos', Helvetica, sans-serif}
.OctupleMax{font-family:'Octuple max Solid', Helvetica, sans-serif}
.Acidic{font-family:'Acidic', Helvetica, sans-serif}
.Yagiza{font-family:'yagiza Regular', Helvetica, sans-serif}
.PixdorTwo{font-family:'PixdorTwo Medium', 'Roboto Mono', monospace}
.AddElectricCity{font-family:'AddElectricCity', 'Cascadia Code', monospace}
.horror{font-family:'HorrorFont-Regular', sans-serif}
::-webkit-calendar-picker-indicator,
::-webkit-search-results-button,
::-webkit-search-cancel-button,
::-webkit-inner-spin-button
{color:var(--accent-orange);}
:focus, :target{outline:.125rem outset white;box-shadow:0 0 .3rem .25rem var(--visited-orange);border-radius:.125rem;}
:target, ::target-text{background-color:gold}
:focus:not(:focus-visible){outline:unset;box-shadow:unset;}
@view-transition{navigation: auto}
#main{view-transition-name:mainWin}
@keyframes move-out{
  from {transform:translateY(0)}
  to {transform:translateY(100vh) scale(25%);opacity:0}
}
@keyframes move-in{
  from {transform:translateY(100vh) scale(25%);opacity:0}
  to {transform:translateY(0) scale(100%);opacity:1}
}
@media (prefers-reduced-motion: no-preference){
::view-transition-old(mainWin){animation:.3s ease-out both move-out}
::view-transition-new(mainWin){animation:.4s ease-out both move-in}
}
body{
  font-family:"Roboto", Arial, sans-serif;
  background-color:black;
  color:#dedede;
  margin:0;
  font-optical-sizing: auto;
  /*font-weight: <weight>;*/
  font-style: normal;
  font-variation-settings:"wdth" 100;
}
.window{
  border:.0625rem solid var(--accent-orange);
  border-radius:.5rem .5rem 0 0;
  box-shadow:.5rem .5rem .625rem rgba(0, 0, 0, 0.5);
  margin:1rem;
  background-color:#fff;
  &.envelop{width:max-content;& .content{padding:0;line-height:0}}
}
.window:fullscreen{
  display:flex;
  flex-direction:column;
  & .title-bar{
    padding-inline:.625rem;
  }
  & .content{
    padding:1.2rem;
    flex-grow:1;
    overflow:visible scroll;
    display:block;
  }
  &.envelop .content{width:100% !important;padding:0;line-height:0;& img{object-fit:contain;max-width:100%;max-height:100%}}
}
header{
  position:sticky;
  z-index:1000;
  top:1rem;left:0;
  view-transition-name:header;
}
nav .content ul{
  padding-inline-start:0;
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  list-style-type:none;
}
@keyframes menu-hover{
  from {background-color:#3d3d3d}
  50% {background-color:blue}
}
nav .content ul li a{
  text-decoration: none;
  color:#dedede;
  border-radius:1rem;
  padding-inline:1ch;
  
  &[aria-current="page"]{
    text-decoration:underline var(--accent-orange) solid .3rem;
    /*font-weight:bold;*/
    color:var(--accent-orange);
    background-color:#3d3d3d;
  }
  &:is(:hover, :focus-visible){
    color:var(--accent-orange);
    background-color:#3d3d3d;
    animation:menu-hover 2000ms ease infinite;
  }
}
.title-bar{
  border-radius:.40rem .40rem 0 0;
  /*background-color: var(--accent-orange);*/
  background:linear-gradient(var(--dark-grad-orage), var(--light-grad-orage));
  color:#fff;
  padding:.3125rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.title-bar .title{
  margin:0;
  font-size:1rem;
  font-family:"Roboto Mono", monospace;
}
.title-bar .buttons{display:flex;}
.title-bar .buttons button{
  background:none;
  border:none;
  color:#fff;
  font-size:14px;
  cursor:not-allowed;
  margin-inline-start:.3125rem;
}
.title-bar .buttons button:is(:hover, :focus-visible){
  background:var(--hover-button-orange);
}
.title-bar .buttons button:last-child:is(:hover, :focus-visible){
  background:red;
}
.content{
  padding:.625rem;
  background-color:var(--bg-dark);
  flex-grow:initial;
  overflow:visible;
  /*font-family: "Roboto Mono", monospace;*/
}
/*[cursor='pointer']{
  cursor: url(https://www.cursor.cc/cursor/533/209/cursor.png) 11 2,
  pointer;
}*/
a, summary, button{cursor:var(--pointer-cur);}
abbr[title]{cursor:help;}
code{/*font-size: 1.2em;*/
font-family:"Cascadia Code", monospace;}
summary{
  padding:1rem 2em 1rem 0;
  font-size:1.1rem;
  font-weight:bold;
}
ins{
  display:inline-block;
  text-decoration:none;
  background-color:#84a173;
}
q:before{content:open-quote}q:after{content:close-quote}/*force quotes just in case*/
a:link{color:var(--accent-orange);}
a:visited{color:var(--visited-orange);}
a:is(:hover, :focus-visible){
  text-decoration:underline blue dashed;
  transition:text-decoration-color, 200ms ease;
}
a:active{color:blue;}
a:not(.no-external, :has(img)){
  &[href^="http"]::after, &[rel="external"]::after, &.external::after{
    content:"⬀" / "(Opens in new tab)";
    display:inline-block;
    width:0.8em;height:0.8em;
    margin-inline-start:0.1em;
    /*background-size:100%;
    background-image:url("external-link-52.png");*/
  }
}
a:not([href]){
  color:var(--accent-orange);
  text-decoration:line-through underline red wavy;
}
.skip-link{
  z-index:1001;
  background:blue;
  left:0;padding:.5em;
  position:absolute;
  transform:translateY(-150%);
  transition:transform 0.3s;
  &:focus-visible, &:focus-within{transform:translateY(0%);color:var(--accent-orange);text-decoration:none}
}
ins{color-scheme:light dark;background-color:light-dark(#d4fcbc,#3F8C1F)}
img.center-block{display:block;margin-inline:auto}
:is(img, figure).center{
  max-width:100%;
  height:auto;
  text-align:center;
}
:is(img, figure).inside-p-right{
  max-width:100%;
  height:auto;
  display:inline-block;
  text-align:center;
  float:right;
  margin-block-start:0;
  margin-inline-end:0;
  margin-inline-start:1rem;
}
footer > p{
 display:flex;
 justify-content:center; 
}
::selection{
  background:var(--visited-orange);
  color:#dedede;
  text-shadow:none
}
#RSS:before{
  content:"";
  display:inline-block;
  height:1rem;
  width:1rem;
  background-size:1rem 1rem;
  margin-inline-end:.5rem;
  background-image:url('https://www.svgrepo.com/show/25140/rss.svg');
}
@media (prefers-color-scheme: light){
  :root{scrollbar-color:var(--accent-orange) #f3f3f3}
  :focus{outline-color:black;}
  body{background-color:white;color:black;}
  .window{background-color:#000;}
  .content{background-color:#f3f3f3;}
  @keyframes menu-hover-l{
  from{background-color:#d9d9d9;}
  50%{background-color:blue;}
  }
  nav .content ul li a{
    color:black;
    &[aria-current="page"]{background-color:#d9d9d9;}
    &:is(:hover, :focus-visible){background-color:#d9d9d9;animation:menu-hover-l 2000ms ease infinite;}
  }
}