@import url("/css/reset.css");
@import url("/css/canvas.css");

/* main content!! */
#header {
  justify-content: space-between;
  padding: 0 1vw;
}
.text-logo {
  font-weight: bold;
  color: white;
}
.text-logo, .q-mark {
  font-family: "Comic Sans MS", "NotoSans", "sans-serif";
}
#footer, #footer span, #header, .text-logo, .q-mark, .img-container, 
.img-container a {
  background-color: #2b2b2b;
}
span, p, #referenceTitle, #referenceLinks, .refresh-popup,
.refresh-popup button {
  font-size: clamp(0.75rem, 2.5vh, 2rem);
}
#header, #footer, .img-text-description, .img-container,
.refresh-overlay {
  display: flex;
  align-items: center;
}
#header, #footer {
  height: clamp(30px, 7vh, 100px);
  box-sizing: border-box;
}

.dropdown {
  font-size: clamp(0.2rem, 1.7vh, 3rem);
}
.dropdown, .dropdown-content {
  border: 1px solid black;
}
.dropdown p, .dropdown-content  {
  font-weight: bold;
  background-color: white;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown p {
  cursor: pointer;
  font-weight: bold;
}
.dropdown p:hover {
  background-color: rgb(210, 210, 210);
}
.dropdown-content {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 2;
}
.hidden {
  display: none;
}

#main-container {
  display: flex;
  justify-content: left;
  align-items: stretch;
  width: 100%;
}
#referenceContainer {
  background-color: rgb(243, 94, 188);
  width: 22.5%;
  margin: 0.5%;
  z-index: 1;
  position: fixed;
}
#referenceTitle {
  border-bottom: 1px solid black;
  background-color: rgb(254, 49, 103);
  color: white;
}
#referenceTitle, #referenceLinks > a {
  font-weight: bolder;
  padding-left: 1vw;
}
#body, #referenceLinks {
  display: flex;
  flex-direction: column;
}
#referenceLinks > a {
  text-decoration: none;
  background-color: rgb(243, 94, 188);
}
#referenceLinks > a:link {
  color: rgb(70, 70, 70);
}
#referenceLinks > a:visited {
  color: rgb(0, 146, 12);
}
#referenceLinks > a:hover {
  background-color: rgb(255, 178, 227);
}
#body, #referenceContainer {
  border: 1px solid black;
  color: #121212;
  height: 78vh;
}
#body {
  justify-items: center;
  width: 50%;
  margin: 0.5% auto;
}
.img-text-description {
  justify-content: space-around;
}
.img-text-description, .img-text-description span {
  background-color: rgb(96, 181, 255);
}
.img-text-description, .img-container {
  width: 100%;
} 
.img-text-description {
  text-align: center;
  font-weight: bolder;
}
.img-text-description span, #referenceTitle {
  font-size: clamp(1rem, 3.5vh, 3.5rem);
}
.img-container {
  border-top: 1px solid black;
  overflow: hidden;   
  justify-content: center;
  height: 100%;
  position: relative;
}
.img-container img {
  cursor: pointer;
  object-fit: cover; /* this img should be contained w/in img-container... */
}
.refresh-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  justify-content: center;
}
.refresh-popup {
  background: rgb(214, 214, 214);
  text-align: center;
  border-radius: 0.50rem;
  border: thick double rgb(254, 49, 103);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}
.refresh-popup p {
  background: rgb(214, 214, 214);
  margin: 0;
  color: black;
}
#refresh-btn {
  background: #40a244;
  color: white;
  padding: 0.25rem 0.50rem;
  border-radius: 0.50rem;
  cursor: pointer;
}
#refresh-btn:hover {
  background: #36ca38;
}

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  justify-content: center;
}
#footer span {
  color: white;
  margin-right: 10px;
}