/* SVG aspect ratio container */
html {
    /* Set a default aspect ratio */
    --aspect: 1/1;
}
.stillseeingthis::before {
    content: "But if you're still seeing this after 10 seconds, something's gone wrong.";
    opacity: 0;
    animation: 3s slowloading 10s 1 forwards;
}
@keyframes slowloading {
    0% {
	opacity: 0;
    }
    100% {
	opacity: 1;
    }
}
*[data-aspect="16:9"] {
    --aspect: 16/9;
}
/* Not sure if this is needed.
   We could just use the default aspect ratio. */
*[data-aspect="1024:768"] {
    --aspect: 1024/768;
}
.dev.viewcontainer {
    border: 5px solid green;
}
.dev .aspectcontainerouter {
    border: 5px solid red;
}
.dev .aspectcontainerinner {
    border: 5px solid blue;
}
.dev .aspectcontainerinner svg {
    border: 1px solid purple;
}
.viewcontainer {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    scroll-snap-align: start;
}
.smallviewcontainer {
    box-sizing: border-box;
    width: var(--width, 400px);
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    scroll-snap-align: start;
}
.remainingslides {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* justify-content: space-around; */
    gap: 10px;
}
.remainingslides .smallviewcontainer {
    outline: 1px solid blue;
}

.aspectcontainerouter {
    box-sizing: border-box;
    aspect-ratio: var(--aspect);
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.aspectcontainerinner {
    box-sizing: border-box;
    aspect-ratio: var(--aspect);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.aspectcontainerinner svg {
    /* If we only do max width, we never scale up as much as possible. */
    /* max-width: 100%; */
    width: 100%;
}
.slidestatus {
 display: none;
}
.slidestatus.master {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    background: lightgray;
    border-radius: 10px;
    padding: 5px;
    opacity: 0.2;
}
.slidestatus.master:hover {
    opacity: 1;
}
.locked-indicator {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 5px;
    opacity: 0.15;
    transition: opacity 0.3s;
}
.locked-indicator:hover {
    opacity: 1;
}
/* style */

.rs-photo-slide {
    display: grid;
    padding: 20px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 10px;
    grid-template-areas: 
	"info    photo photo photo   photo" 
        "comment photo photo photo   photo"
        "comment photo photo photo   photo";
}

.photo {
    grid-area: photo;
}

.photo > img {
    object-fit: contain;
    width: 100%;
    max-height: 100%;
}

.rs-photo-slide > h2 {
  grid-area: info;
  background: pink;
}

.rs-photo-slide > .comment {
  grid-area: comment;
  background: lightgreen;
}

.comment {
    grid-area: comment;
}

.rs-photo-comment {
    display: grid;
    padding: 20px;
    grid-template-rows: 1fr 5fr 1fr;
    grid-gap: 10px;
    grid-template-areas:
	"title"
        "photo"
        "comment";
}

.rs-photo-slide > .title {
  grid-area: title;
  background: pink;
}

.rs-photo-slide > .comment {
  grid-area: comment;
  background: lightgreen;
}


.rs-title-side-by-side {
    display: grid;
    padding: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 2fr 2fr;
    grid-gap: 10px;
    grid-template-areas: 
	"title    title" 
        "photo1 photo2"
        "photo1 photo2";
}

.rs-title-side-by-side > h2 {
    grid-area: title;
}

.photo1 {
    grid-area: photo1;
    justify-content: center;
}

.photo1 > img {
    object-fit: contain;
    width: 100%;
    max-height: 100%;
}

.photo2 {
    grid-area: photo2;
}

.photo2 > img {
    object-fit: contain;
    width: 100%;
    max-height: 100%;
}

.photo3 {
    grid-area: photo3;
}

.photo3 > img {
    object-fit: contain;
    width: 100%;
    max-height: 100%;
}

.rs-acth-session-psychometrics {
    display: grid;
    padding: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 4fr 1fr;
    grid-gap: 10px;
    grid-template-areas: 
	"title    title title"
        "photo1 photo2 photo3"
        "comment comment comment";
}

.rs-acth-session-psychometrics > .title {
    grid-area: title;
}

.rs-rhobeta {
    display: grid;
    padding: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 8fr;
    grid-gap: 10px;
    grid-template-areas: 
	"title title" 
        "vega photo"
}

.rs-rhobeta > h2 {
    grid-area: title;
    text-align: center;
}

.rs-rhobeta > .myvega {
    grid-area: vega;
    justify-content: center;
    text-align: center;
}

.rs-rhobeta > .photo {
    grid-area: photo;
    text-align: center;
}

/* .photo1 > img { */
/*     object-fit: contain; */
/*     width: 100%; */
/*     max-height: 100%; */
/* } */

.hidden.frag-hidden {
    opacity: 0;
}

.testfrag.frag-hidden {
    color: red;
}

.testfrag.frag-current {
    color: blue;
}

.testfrag.frag-visible {
    color: green;
}

.fragmarker {
    font-weight: bold;
    color: green;
}

.personal {
     color: green;
     font-family: sans;
}
.joke {
     color: blue;
     font-style: oblique;
     font-family: sans;
}
/**********
 * Fragments
 **********/
.fragment.fadein {
    opacity: 0;
    transition: opacity 1s, fill-opacity 1s;
}
.fragment.fadein.visible {
    opacity: 1;
    fill-opacity: 1;
    background: yellow;
}
.fragment.animationtest.visible {
    animation: 5s 1 forwards growin;
}
.fragment.animationtest:not(.visible) {
    color: blue;
}
.fragment.underlineanimate.visible {
    opacity: 1;
    transition: opacity 1s;
    text-decoration: 10px solid underline;
    animation: 10s infinite underlineanimate;
}
@keyframes growin {
    from {
	font-size: 100%
    }
    50% {
	font-size: 200%;
    }
    to {
	font-size: 100%;
	color: red;
    }
}
@keyframes underlineanimate {
    from {
	text-decoration-color: red;
    }
    33% {
	text-decoration-color: green;
    }
    66% {
	text-decoration-color: blue;
    }
    to {
	text-decoration-color: red;
    }
}
.whoah {
    visibility: none;
}
/* svg .header { */
/*     font-family: Verdana; */
/* } */
.hovertest.pseudohover {
    text-shadow: red 1px 0 10px;
}
.hovertest:hover {
    text-shadow: blue 1px 0 10px;
}
.overlaycanvas {
    position: fixed;
    top: 0;
    left: 0;
    border: 10px solid blue;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
}
.aspectcontainerinner {
    position: relative;
}
.svgoverlaytest {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* pointer-events: none; */
    z-index: 10;
}
.overlaypointer {
    fill: rebeccapurple;
    stroke: red;
    opacity: 0.5;
    animation: 1s infinite alternate pointerpulse;
    r: 10px;
}
@keyframes pointerpulse {
    0% {
	stroke-width: 0px;
    }
    100% {
	stroke-width: 5px;
    }
}
.svgoverlayborder {
    stroke: rebeccapurple;
    stroke-width: 20px;
    stroke-linejoin: round;
    fill: none;
}
.pdfcanvas {
    outline: 1px solid black;
}