/* Full-screen canvas */
.fullsize{
	position:absolute;
	top:0;
    bottom:0;
    left:0;
    right:0;
}


/* Border for embeds */
.embed-frame{
  box-shadow: 0 0 16px var(--color-embed-glow-auto);
  border: 2px solid var(--color-embed-border-auto);
  border-radius:16px;
  overflow:hidden;
}

/* 
 * List of card-like entries. 
 * .card-list-entry may be a <div> or an <a>
 * If it additionally has a .clickable class, 
 *   it will react to hover and set the pointer accordingly. 
 * The text and background color can be customized with 
 *    --cle-color-text and --cle-color-bg 
 * 
 * Hierarchy:
 * .card-list-container
 *   .card-list-entry +
 *     .cl-entry-title
 *     .cl-entry-body
 *     .cl-entry-icon
 */
.card-list-container{
  width:min(600px,100%);
  display:flex;
  flex-direction:column;
  gap:8px;
}
a.card-list-entry{
  text-decoration:none;
}
.card-list-entry{
  --cle-color-bg: var(--color-background-auto);
  --cle-color-text: var(--color-text-auto);
  --cle-color-title: var(--cle-color-text);
  min-height:100px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:4px;
  border-radius: 16px;
  padding:16px;
  background-color:var(--cle-color-bg);
  color:var(--cle-color-text);
  position:relative;
  overflow:hidden;
}
.card-list-entry.clickable{
  cursor:pointer;
  transition-property:background-color;
  transition-duration:0.2s;
}
.anim-disabled .card-list-entry.clickable{
  transition-duration:0s;
}
.card-list-entry.clickable:hover{
  background-color:color-mix(
    in srgb, 
    var(--cle-color-bg) 85%, 
    var(--cle-color-text));
}
.cl-entry-icon{
  position:absolute;
  opacity:0.65;
  bottom:0;
  right:0;
  width:100px;
  z-index:1;
}
.cl-entry-title{
  font-size:1.5em;
  font-weight:700;
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  color:var(--cle-color-title);
  line-height:1.2;
}
.cl-entry-body{
  position:relative;
  z-index:3;
  padding-right: 60px;
  line-height:1.4;
}

/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
  
}

/* Smaller Mobiles */
@media (width<480px) {
  
  /* Space saving mode */
  .cl-entry-icon{
    opacity:0.20;
  }
  .cl-entry-body{
    padding-right: 0;
  }
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
}