/*
@keyframes bounce {
    0% {
        top: 0;
        left: 0;
    }

    20% {
        top: auto;
        left: auto;
        bottom: 0;
        right:0;
    }

    40% {
        bottom: auto;
        right: auto;
        top: 15rem;
        left:0;
    }

    60% {
        top: auto;
        left: auto;
        bottom: 0;
        right:15rem;
    }

    80% {
        top: auto;
        right: auto;
        bottom: 15rem;
        left:0;
    }

    100% {
        bottom: auto;
        right: auto;
        top: 0;
        left:0;
    }
}
*/

/* https://stackoverflow.com/a/67493425 */

@keyframes hor-movement {
  from {
    left: 0%;
  }
  to {
    left: 100%;
  }
}

@keyframes ver-movement {
  from {
    top: 0%;
  }
  to {
    top: 100%;
  }
}

/* end */

body {
    background-color: #f0f0f0;
    color: #000000;
    font-family: "Comic Mono", "Comic Sans MS", serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
}

a {
	color:#0000ff;
}

media  (prefers-color-scheme: dark) {
    body {
    
    background-color: #070707;
    color: #f1f1f1;
    }
   
    a {
  
    color:#c6c6ff;
}

}
media (prefers-contrast: more) and (prefers-color-scheme: light) {
    body {
    	background-color: #ffffff ;
    	color: #000000 ;
    	font-family: serif ;
    }
   
    a {
    
    color:#0000ff;
}
 
   
}

media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    body {
    background-color: #141414;
    color: #ececec;
    font-family: serif ;
    }
   
    a {
  
    color:#c6c6ff;
}

}


a {
    font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
    color: #ff0000;
    font-family: "Jokerman","Comic Mono", "Comic Sans MS", serif;
}

table, td, th {
    border-style: solid;
    border-color: #ff0000;
}

table.no-css, td.no-css, th.no-css {
    border-style: solid;
    border-color: #000000;
}

table {
    table-layout: fixed;
    width: 70%;
    border-collapse: collapse;
    margin: auto;
}

img {
    width: 50%;
    border-style: solid;
    border-width: 1rem;
    border-color: #00f00f;
}

#head-image {
    text-align: center;
}

@media (max-width: 1000px) {
    table {width:100%;}
    img {width: 90%;}
    #essay {margin:2%}
}

.text {
    /*font-family:'Times New Roman', Times, serif;*/
    font-size: 1.25rem;
    margin: 5%;
    line-height: 2rem;
}

#essay h2 {
    font-size: 2rem;
    font-family:'Times New Roman', Times, serif;
}

#essay h3 {
    font-size: 1.5rem;
    font-family:'Times New Roman', Times, serif;
}

h3, h3+p, h2, h2+p /*stack overflow again*/ {
    display:inline;
}

.comment {
    color: #017501;
}

/* https://stackoverflow.com/a/67493425 */

#bounce {
    height: 10rem;
    width: auto;
    position: fixed;
    animation-name: hor-movement, ver-movement;
    animation-duration: 3.141s, 1.414s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    user-select: none;
    -webkit-user-select: none;
}

/* end */

.no-css #bounce {
    display: none;
}

#no-height {
    height: 0;
}

/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote [the CSS in the example, edited a bit] */

div:has(> blockquote) {
  background-color: #ff00c8;
  color: #000000;
  margin: 10px auto;
  padding: 15px;
  /*border-radius: 5px;*/
}
/* this didn't work :(
body#body.no-css.light div:has(> blockquote) {
  background-color: #b89cb2 !important;
  color: #000000;
  margin: 10px auto;
  padding: 15px;
  border-radius: 5px;
}
*/

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

blockquote + p {
  text-align: right;
}

/* end */

.explanation {
    color: #ffff00;
}

/* https://stackoverflow.com/a/69845243 */

s {
  text-decoration: underline .1em;
  text-underline-offset: -.35em;
  text-decoration-skip-ink: none;
}

s::selection {
    text-decoration: underline rgb(255, 255, 255) .1em;
}

/* end */

/* this should be "fun" */

#images {
    display: flex;
    flex-wrap: wrap;
    /*height: 20rem;*/
}

#images img {
    max-height:20rem;
    align-items: flex-start; 
    object-fit: contain;
    /*flex-basis: 0;
    flex-grow: 1;*/
}