@font-face {
  font-family: "Rose-Tinted";
  src: url('/fonts/Rose-Tinted_Regular_v1.1.otf');
}
@font-face {
  font-family: "Grixel-Acme7";
  src: url('/fonts/Acme 7 Wide.ttf');
}
@font-face {
  font-family: "Tamzen";
  src: url('/fonts/Tamzen8x15r.ttf');
}


  * {
    margin: 0;
    scroll-behavior: smooth;
    font-family: Monospace;
    font-size: 14px;
  }
  
  body {
    margin: 0.4em;
    color: var(--textcolor);
    display: grid;
    grid-template-columns: 10em 12em auto 10em;
    grid-template-rows: 9em  auto minmax(20em,auto)auto;
    gap: 1em 1em;
    grid-template-areas:
      ". header header ."
      ". nav nav  ."
      ". extras1 main  ."
      ". footer footer  .";
    background-image: var(--backgroundimage);
    background-color: var(--backgroundcolor);
    background-size: cover;
      /*background:-moz-linear-gradient(bottom, rgb(189, 184, 254),rgb(227, 255, 186))*/
      /*background-color: #fff9ea;*/
  }
  
  main ul {
    list-style-type: circle;
  }
  main {
    padding: 0.5em;
  }
    
  body>header {
    grid-area: header;
    background-image: var(--headerimage), var(--headerimage);
    background-blend-mode: var(--backgroundblend);
    background-position: bottom;
    margin-top: 1em;
  
  }
  nav { 
    grid-area: navigation;
    background-color: var(--accent);
    padding: 0.5em;
  }
  #styleselect{
    float: right;
    /* padding: 0.5em; */
  
  }
  select, button {
    background: none;  
    color: var(--textcolor);
    border: 1px solid var(--textcolor); 
    padding: 5px; 
    margin: 5px;
  }
  
  .select-wrapper {
    position: relative;
  
  }
  h3 {
    font-size: 16px;
  }
  nav li a {
    padding: .2em;
    text-decoration: none;
    display: block;
    color: var(--link);
    font-size: 14pt;
    padding-left: 0em;
    font-family: "Tamzen";
  }
  #footernav li a {
    padding: .5em;
    
  }
  nav {
    padding-left: 0em;
    
  }
  nav ul,#footernav ul {
    list-style-type: none;
    padding-left: 0em;
    display: flex;
    flex-flow: row;
  }
  .navigation {
    grid-area: nav;
    font-family: "Tamzen";
  }
 
  body>main {
    grid-area: main;
    overflow-y:auto;
    background-color: var(--accent);
  }
  
  .extras1 { 
    padding:0;
    grid-area: extras1; 
    display:flex;
    flex-direction: column;
    gap:1em;
  }
 
  
  body>footer {
    grid-area: footer;
  }
  
  nav li a+ .nav_info {
    display: none;
    padding:0.25em;
    text-align:center;
  }
  nav li a:hover+.nav_info {
    position:fixed;
    left:0;
    right:0;
    z-index:1
  }
  nav li a:hover +.nav_info {
    bottom:0;
    display:block;
  }
  
  .nav_info {
    background-color: var(--accent2);
  }
  #actual_footer{
    justify-content: space-between;
    display: inline-flex;
  }
  nav , main, .extra, #mark_image,footer,header, #stats {
    border: 1px solid var(--border);
  }
  
  .extra {
    /* https://stackoverflow.com/questions/74643594/how-can-i-make-a-cut-corner-with-border-radius */
    --s: 1.2em;
    --b : 1px;
    --c: var(--border);
    clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% var(--s),100% 100%,0 100%);
    background: linear-gradient(-135deg,var(--c) calc(0.707*var(--s) + var(--b)),#0000 0) border-box;
  }
  .extra summary{
        /* https://stackoverflow.com/questions/74643594/how-can-i-make-a-cut-corner-with-border-radius */
        --s: 0.8em;
        --b : 1px;
        --c: var(--border);
        clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% var(--s),100% 100%,0 100%);
        
  }

  #mark_image{
    max-width: 30em;
    justify-self: end;
    margin-top: 1em;
  }
  nav li:hover {
    background-color: var(--accent2);
  }
  
  #statuscafe, #imood, #weather {
    background-color: var(--accent2);
  }
  
  #statuscafe-username, #imood_text,h3+p {
    margin-bottom: .5em;
    margin-top: .5em;
  }
 
  #imood_image{
    filter: var(--imood-filter);
    display:inline-block;
    max-height:10px;
  }
  
  nav li {
    background-repeat: no-repeat;
    background-position: 0 .4em;
    padding-left: 1em;
  }
  
  img {
  max-width:100%;
  max-height:100%;
  }
  
  .resize {
    width: 400px;
    height: auto;
  }
  
  footer {
    text-align: center;
    padding: 1em;
    position: relative;
    background-color: var(--accent);
  }
  
  .extra {
    padding: .5em;
    background-color: var(--accent);
  }
  
  #stats {
    padding: .5em;
    background-color: var(--accent);
  }
  #stats p {
    text-align: center;
  }
  #stats span {
    font-weight: bold;
  }
  .small {
    color:var(--textcolor);
  }
  .small span {
    color: var(--spancolor);
    text-shadow: var(--accent2) 1px 0 6px;
  
  }
  
  .widget {
    grid-area: widget;
    margin-left: -7em;
    margin-top: 6em;
  }
  
  input {
      max-width: 100%;
  }
  details > div , details > p{
    font-size: 12px;
  }
  .results{
    padding: 10px;
    margin: auto;
  }
  .results p{
    margin-top: 0.5em;
    text-align: center;
  }
  #stats p{
    margin-top:0.5em;
  }
  .results img{
    max-width: 160px;
    border: 1px solid;
    margin-right: auto;
    margin-left: auto;
    display: block;
  
  }
  
  a:visited, a:link{
    color: var(--visitedlink);
  }
  .rena {
    height: 10em;
    margin: 0 auto;
    display: block;
    position: relative;
  }
  #rena_checkbox{
    display: none;
  }
  #rena_checkbox~.interactive_rena img:first-child {
    display: none;
  }
  #rena_checkbox:checked+.interactive_rena img:last-child {
    display: none;
  }
  #rena_checkbox:checked+.interactive_rena img:first-child {
    display: unset;
  }
  
  
  .interactive_rena{
    cursor: pointer;
    position: absolute;
    left: 0;
    top: -10em;
  }
  
  
  header {
    position: relative;
  }

  h1 {
    font-size: 26px;
  }
  #headercontent h1{
    font-size: 28px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
  time,pre{
  
    font-family: monospace;

  }
  
  header h1 {
    color: var(--headertext);
    text-shadow: 3px 3px var(--headershadow);
  }

  details > summary, select, button {
    cursor: pointer;
  }
  details > summary {
    list-style: none;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }
  
  summary>h3{
    display: flex;
  }
  
  summary {
    background: linear-gradient(90deg, var(--gradbegin) 0%, var(--gradend) 100%);
  }
  #footernav ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  
  #picture {  
    padding-left: 0.5em;
    max-width: 25em;  
    height: auto;  
  }
  
  article{
    font-size: 14pt;
    margin: 0.5em;
  }
  article:nth-child(4){
    background-color: var(--altarticle);
    text-align: right;
  }
  article h3,h3{
    color: var(--h3color);
    font-family: "Tamzen";
  }
  .images{
    /* We first create a flex layout context */
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding: 0;
    margin: 0;
  
  }
  .main_image{
    margin: auto; 
    flex-basis: 30%;
    flex-grow: 1;
    padding: 0.3em;
  
  }

  mark {
    text-decoration: wavy underline from-font;
    background-color: var(--accent);
  }
  mark:hover{
    cursor:pointer;
    background-color:var(--accent2)
  }
mark img {
  display:none;
  position: fixed;
  z-index: 2;
  max-width: 8em;
}

mark:hover img{ 
    display:block;
  } 



  @media only screen and (max-width: 600px) {
  
  body {
    margin: 0.4em;
    color: var(--textcolor);

    grid-template-columns: auto  auto ;
    grid-template-rows: 8em auto 20em auto auto auto;
  
    grid-template-areas:
      "header header"
      "nav nav"
      "main main"
      "extras1 ."
      "footer footer";
      background-image: var(--backgroundimage);
      background-color: var(--backgroundcolor);
      background-size: cover;
  }
  
    .extras1{
      display:-webkit-inline-box;
    }
    nav ul li{
      display: inline-flex;
    }
  
    /* .interactive_rena{
    } */
  
  }
  
  #headercontent {
    position:absolute;
    bottom: 0.6em;
    left: 0.6em;
    margin: 1em;

  }

  
  .interactive_rena:hover{
    filter: hue-rotate(50deg);
    transition: filter 0.5s ease-in-out;
  
  }
  section{
    padding: 0.5em;
  }
  
#about_grid {
  padding-top: 0.5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  
}
#content_preview_block {
  background-color: var(--accent2);
  border: 1px solid var(--border);
  height: 4em;

}
#content_preview_block:hover{
  background-color: var(--accent);
  cursor: pointer;
}
#content_link {
  text-decoration: none;
  color: inherit;
}
h2{
  color: var(--link);
  font-size:16px;
  font-family:"Grixel-Acme9";
}



/*   
.wrapper {
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab {
  cursor: pointer;
  padding: 10px 20px;
  margin: 0px 2px;
  background: var(--gradbegin);
  display: inline-block;
  box-shadow: 0 0.5rem 1rem #00000048;

}

.panels {
  background:  linear-gradient(315deg, var(--gradbegin) 0%, var(--accent2) 40%);
  box-shadow: 0.5rem 0.5rem 0.3rem #00000047;
  min-height: 200px;
  width: 100%;
  max-width: 500px;
  overflow: scroll;
  padding: 20px;

}

.panel {
  display: none;
}



.panel-title {
  font-size: 1.5em;
  font-weight: bold;
}

.radio {
  width: 0px;
  height: 0px;
}

#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel {
  display: block;
}

#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab {
  background: var(--accent2);
  border-top: 4px solid var(--h3color);
}
 */

footer{
  text-align: right;
}
footer p, footer span, #themePicker, footer a{
  font-size: 12px;

}
#content_preview_block{
  overflow: hidden;
  text-overflow: ellipsis;
}
#wrapper{
  display: flex;
}

#logo {
  content:var(--logo);
  max-width:30em;
}