@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 100%;
  background-color: #f5f0ff;
  color: #2d1b3d;
}

@media only screen and (max-width: 800px) {
  /* more specific than original * */
  * {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
  }
  /* this is so stupid, mobile browsers automatically scale up your text if they don't think it's big enough, which is why the academics page kept having typography issues. put in this webkit adjust command to fit it */
}

.page-container {
  width: 80vw;
  min-width: 300px;
  height: fit-content;
  /* min-height: 70vh makes the page-container automatically extend to the bottom */
  /* background-color: black; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5vh;
}

section {
  width: 100%;
  text-align: left;
}

section ol,
section ul {
  text-align: left;
  padding-left: 2rem;
  margin-left: 0;
}

.styled-page-container {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  width: 65vw;
  min-width: 300px;
  padding: 2.5vh 2.5vw;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(123, 63, 163, 0.1);
}

@media only screen and (max-width: 800px) {
  .page-container {
    margin-top: 5vh;
    width: 80vw;
  }
  .styled-page-container {
    width: 75vw;
  }
  .logo-symbol {
    font-size: 5rem;
  }
  .logo-text-main {
    font-size: 1.8rem;
  }
}

a {
  text-decoration: none;
  color: #7b3fa3;
}

a:hover {
  color: #9d5dc7;
}

p {
  line-height: 140%;
}

hr {
  color: #d4c5e8;
  border-color: #d4c5e8;
}

ul {
  list-style-position: inside;
}

img {
  display: block;
  margin: 0;
  padding: 0;
}

/* both label and input/textarea are made block-level elements; so, we should put label/input in a horizontal flexbox to have them side-by side, vertical flexbox to have label on top */
label {
  display: block;
  min-width: fit-content;
}

input {
  display: block;
  border-radius: 3px;
  font-size: 0.89rem;
  width: 100%;
  /* height: 1rem; */
}

textarea {
  display: block;
  border-radius: 3px;
  font-size: 0.89rem;
  width: 100%;
}

#pvmt {
  margin-bottom: 25px;
}

.logo-container-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-symbol {
  font-size: 8rem;
  font-weight: 700;
  color: #7b3fa3;
  line-height: 1;
  margin-bottom: 1rem;
}

.logo-text-main {
  font-size: 2.5rem;
  font-weight: 400;
  color: #4a2c5a;
  letter-spacing: 0.1em;
}

.logo-text {
  font-size: 2rem;
  font-weight: 700;
  color: #7b3fa3;
  margin-right: 0.25rem;
}

.checkbox {
  width: fit-content;
}

select {
  display: block;
}

option {
  height: fit-content;
}

button {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
/* need "cursor: pointer" in order for pointer-hand cursor to appear when hovering over button! */

button:hover {
  opacity: 70%;
}

.default-button {
  background: #7b3fa3;
  color: white;
  padding: 2vmin 2vmin;
  margin: 0 0.5vw;
  /* min-width: 10vw; */
  width: fit-content;
  /* min-height: 5vh; */
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.default-button:hover {
  background: #9d5dc7;
}

/* img-button: for buttons containing an image */
.img-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* for div containing label + input, where label & input are side by side */
.input-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* for div containing label + input, where label is on top of input */
.input-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#pvmt {
  max-height: 25vh;
  max-width: 40vw;
}

#navbar-container {
  width: 100%;
}

.tier {
  font-size: 42px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.sponsor-logo {
  width: 100%;
  height: 100%;
  max-width: 512px;
  max-height: 256px;

  object-fit: contain;
}

.sponsor-logo-container {
  max-width: 400px;
  max-height: 150px;
  height: 150px;

  margin: 5px 15px 5px 15px;
}

.sponsor-logo-container > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#daily-challenge-container {
  border: 2px solid white;
}

.archive-table {
  margin: 20px;
}

@media (max-width: 1200px) {
  .sponsor-logo {
    max-width: 512px;
    max-height: 256px;
  }
}

@media (max-width: 350px) {
  .sponsor-logo-container {
    width: 90vw;
  }
}