:root {
    --link-trans-time: 250ms;
    --bg-color: white;
    --text-color: black;
    --border-color: black;
}


.wiki-link {
   -webkit-user-select: none; /* Safari */
    user-select: none;
    width: fit-content;
}

.wiki-link:hover {
    transition: color 0.5s ease-in-out;
    color:mediumpurple;
}

input {
  border: solid 2px black;
  border-radius: 10px;
  text-align: center;
  width: 80%;
  height: 5%
}

html {
    font-size: 1.4rem;
    font-family: sans-serif;
}

body {
    /* 1.75 since a vertical scrollbar sometiems appears */
    height: calc(100svh - 1.75svh);
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas:
        ". header ."
        ". main ."
        ". footer ."
    ;
    background-color: var(--bg-color);
    /* border: 5px solid var(--border-color); */
}


.main-content {
    grid-area: main;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    grid-area: header;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header > .site-links {
    display: flex;
    flex-direction: row;
    list-style: none;
    text-align: right;
    margin: 0;
    padding: 0;
}

@media (max-width: 560px) {
    header > .site-links {
        flex-direction:column;
    }

    /* ensure that top-right headings don't get dunked on */
    body {
        grid-template-rows: 30% 60% 10%;
    }
}

/* ensures constant space between site-links */
/* copied from aquabeam.me */
header > .site-links > li {
    margin-right: 0.75rem;
}

.footer {
    grid-area: footer;
}

/* visualize grid-lines */
/* .main-content, */
/* header, */
/* .footer { */
    /* border: 2px solid var(--border-color); */
/* } */

/* img.switch { */
/*     display: block; */
/*     margin: 0 auto; */
/*     width: 300px; */
/*     max-width: inherit; */
/*     /\* border: solid 2px var(--border-color) ; *\/ */
/* } */
/* img.switch { */
/*     cursor: pointer; */
/* } */

#tooltip {
    display: none;
    position: absolute;
    /* REVIEW: maybe make this saner later */
    font-size: .625rem;
    left: 0;
    top: 0;
    background: var(--bg-color);
    color: var(--text-color);
    border-radius: 4px;
    box-shadow: 0px 0px 0.3em grey;
    transition-property: opacity;
    transition-duration: var(--link-trans-time);
    transition-timing-function: ease-in;
    opacity: 0;

    /* grid stuff */
    /* fr for second column in case image isn't present, so grid can resize */
    /* 16rem is specified in the image tag itself */
    grid-template-columns: 18em 1fr;
    grid-template-rows: 14.5em;
    gap: 1em;
}

#tooltip-text {
    /* padding vs margin because sometimes margin cuts off text and padding doesnt??? */
    padding: 1.0em;
    /* idk why there's space at the top of the tt, but remove it */
    padding-top: 0;
    margin-bottom: 1.0em;
    /* padding-bottom: 5.0rem; */
    /* this is the line height value that prevents vertical clipping... */
    line-height: 1.4em;
    grid-column: 1/2;
    grid-row: 1/2;
    overflow: hidden;
    position: relative;
    /* https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text */
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

/* applies a fadeout effect for the last few words
 *
ripped straight from the wiki */
#tooltip-text::after {
    right: 0;
    background-image: linear-gradient(to right,rgba(255,255,255,0),var(--bg-color) 50%);
    content: ' ';
    position: absolute;
    bottom: 0;
    width: 40%;
    height: 1.4em;
    background-color: transparent;
    pointer-events: none;
}


#tooltip-thumb {
    /* background: black; */
    display: block;
    border-left: solid 0.5px #D3D3D3;
    grid-column: 2/3;
    grid-row: 1/2;
    max-height: 100% ;
    max-width: 100%;
    width: 14.5em;
    height: 100%;
    object-fit: cover;
}

/* hide images which aren't there */
#tooltip-thumb[src=""] {
   display: none;
}

#tooltip.animBegin {
  opacity: 1;
}

#tooltip.animEnd {
  opacity: 0;
}

#arrow {
  position: absolute;
  /* background: #222; */
  width: 80px;
  height: 8px;
  transform: rotate(45deg);
}