@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

*
{
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  text-shadow: 0px 0px 1px;
}

:root
{
  --primary-color: gold;
  --secondary-color: navy;

  --logo-banner-font-size: 2rem;

  --navigation-element-font-size: 1.5rem;

  --welcome-font-size: 5rem;
  --welcome-list-font-size: 1.2rem;

  --admissions-banner-font-size: 4rem;
  --admissions-form-font-size: 2rem;

  --medium-font-size: 2rem;
  --standard-font-size: 4rem;
  --subject-font-size: 2rem;

  --heading-font-size: 4rem;

  --principal-width: 300px;
  --message-text-font-size: 2rem;

  --text-font-size: 2rem;

  --table-heading-font-size: 1.5rem;
  --table-element-font-size: 1.5rem;

  --footer-marker-font-size: 1.2rem;
  --footer-content-font-size: 1.8rem;

  --navigation-element-margin-right: 30px;
}

body
{
  font-family: Josefin Sans, sans-serif;
  padding: 0px 200px 0px 200px;
}

a
{
  text-decoration: none;
}

.hero
{
  background-image: url('banner.jpg');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  left: 0px;
  opacity: 0.9;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: -1;
}

.header
{
  align-items: end;
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  margin: 40px auto;
}

.logo
{
  align-items: center;
  background-color: var(--primary-color);
  border-radius: 30px;
  border: 5px solid var(--secondary-color);
  display: flex;
  flex-flow: row nowrap;
  padding: 15px;
}

.logo-image
{
  border-right: 5px solid var(--secondary-color);
}

.logo-banner
{
  color: var(--secondary-color);
  font-family: Raleway, sans-serif;
  font-size: var(--logo-banner-font-size);
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1em;
  padding-left: 10px;
  text-transform: uppercase;
}

.social-and-navigation
{
  align-items: end;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  margin-left: auto;
}

.social
{
  margin: 20px 0px 10px auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: space-between;
  min-width: 10%;
}

.social-icon
{
  height: 50px;
  width: 50px;
}

.social-icon > svg
{
  color: var(--secondary-color);
  transition: transform 0.3s;
  height: 100%;
  width: 100%;
  transition: transform 0.2s;
}

.social-icon > svg:hover
{
  transform: scale(1.2);
}

.social-icon:not(:last-of-type)
{
  margin-right: 20px;
}

.social-icon:hover
{
  transform: scale(1.2);
}

.navigation
{
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-left: 20px;
}

.navigation-element
{
  color: var(--secondary-color);
  font-size: var(--navigation-element-font-size);
  padding: 5px 10px;
  background-color: var(--primary-color);
  border-radius: 25px;
}

.navigation-element:not(:last-of-type)
{
  margin-right: 30px;
}

.navigation-element:hover
{
  /* TODO: add hover effect for `.navigation-element` */
}

.welcome
{
  background-color: var(--primary-color);
  padding: 20px 10px 10px 20px;
  margin: 20px auto;
}

.welcome-banner
{
  color: var(--secondary-color);
  font-size: var(--welcome-font-size);
  font-weight: 700;
  margin: 0px auto;
  width: 100%;
}

.welcome-list
{
  color: navy;
  font-size: var(--welcome-list-font-size);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.admissions
{
  background-color: navy;
  display: flex;
  margin-bottom: 20px;
  padding: 20px 10px 20px 10px;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.admissions-banner
{
  color: white;
  font-size: var(--admissions-banner-font-size);
  font-weight: 700;
}

.admissions-form
{
  color: gold;
  font-size: var(--admissions-form-font-size);
}

.splash
{
  display: flex;
  flex-flow: column nowrap;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.english-medium
{
  background-color: navy;
  padding: 10px 30px 20px 30px;
  width: 100%;
  margin: 10px auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: start;
  justify-content: space-around;
}

.hindi-medium
{
  background-color: navy;
  padding: 20px 30px 20px 30px;
  width: 100%;
  margin: 10px auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: start;
  justify-content: space-around;
}

.english-medium-medium
{
  color: white;
  font-size: var(--medium-font-size);
  margin: 10px 0px;
}

.english-medium-standard
{
  color: gold;
  font-size: var(--standard-font-size);
  font-weight: 700;
}

.english-medium-subject
{
  color: white;
  font-size: var(--subject-font-size);
}


.hindi-medium-medium
{
  color: white;
  font-size: var(--medium-font-size);
}

.hindi-medium-standard
{
  color: gold;
  font-size: var(--standard-font-size);
  font-weight: 500;
}

.hindi-medium-subject
{
  color: white;
  font-size: var(--subject-font-size);
}

.admission-list > li
{
  margin: 30px auto;
}

.document-list
{
  margin: auto 20px;
}

.heading
{
  font-size: var(--heading-font-size);
  background-color: var(--secondary-color);
  padding: 20px 10px 10px 20px;
  color: var(--primary-color);
  max-width: 1000px;
  font-weight: 700;
  border-left: 20px solid var(--primary-color);
}

.message-container
{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

.message-text
{
  font-size: var(--message-text-font-size);
  font-style: italic;
  letter-spacing: -0.5px;
  line-height: 1.5em;
  margin: 40px 30px 20px 0px;
}

.principal
{
  border-radius: 50%;
  border: 5px solid gold;
  margin: 40px 30px 20px 0px;
  width: var(--principal-width);
}

.footer
{
  align-items: start;
  border-top: 5px solid var(--primary-color);
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

.footer-social
{
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-items: space-between;
}

.footer-element
{
  padding: 20px 0px;
}

.footer-element:first-of-type
{
  margin-top: 20px;
}

.footer-element:last-of-type
{
  margin-bottom: 20px;
}

.footer-element > .marker
{
  font-size: var(--footer-marker-font-size);
  text-transform: lowercase;
  color: gray;
}

.footer-element > .content
{
  font-size: var(--footer-content-font-size);
  color: var(--secondary-color);
}

.text
{
  margin: 20px auto;
  font-size: var(--text-font-size);
  line-height: 1.5em;
  letter-spacing: -0.5px;
}

.two-table
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 50px auto;
}

.three-table
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 50px auto;
}

.table-heading
{
  align-items: center;
  border-bottom: 4px solid var(--secondary-color);
  display: flex;
  flex-flow: row nowrap;
  font-size: var(--table-heading-font-size);
  justify-content: center;
  padding: 10px;
}

.table-element
{
  align-items: center;
  border-bottom: 4px solid var(--primary-color);
  display: flex;
  flex-flow: row nowrap;
  font-size: var(--table-element-font-size);
  justify-content: center;
  margin: 10px 0px;
  padding: 20px;
}

.vspace
{
  height: 100px;
}

@media screen and (max-width: 1080px)
{
  :root
  {
    --logo-banner-font-size: 2rem;

    --navigation-element-font-size: 1rem;

    --welcome-font-size: 4rem;
    --welcome-list-font-size: 0.8rem;

    --admissions-banner-font-size: 2rem;
    --admissions-form-font-size: 1rem;

    --medium-font-size: 1rem;
    --standard-font-size: 2rem;
    --subject-font-size: 1rem;

    --principal-width: 200px;
    --message-text-font-size: 1.5rem;

    --heading-font-size: 2rem;

    --text-font-size: 1rem;

    --table-heading-font-size: 1rem;
    --table-element-font-size: 1.5rem;

    --footer-marker-font-size: 1rem;
    --footer-content-font-size: 1.2rem;
  }

  body
  {
    padding: 0px 50px 0px 50px;
  }

  .header
  {
    flex-flow: row wrap;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
  }

  .social-and-navigation
  {
    margin-left: initial;
  }

  .social
  {
    display: none !important;
  }

  .navigation
  {
    flex-flow: column nowrap;
    margin-left: 0px;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
  }

  .english-medium,
  .hindi-medium
  {
    padding: 10px 20px;
  }

  .table-heading,
  .table-element
  {
    justify-content: start;
  }
}

@media screen and (max-width: 768px)
{
  :root
  {
    --logo-banner-font-size: 2rem;

    --navigation-element-font-size: 0.8rem;

    --welcome-font-size: 2.5rem;
    --welcome-list-font-size: 0.3rem;

    --admissions-banner-font-size: 1.5rem;
    --admissions-form-font-size: 0.8rem;

    --medium-font-size: 0.5rem;
    --standard-font-size: 1rem;
    --subject-font-size: 0.8rem;

    --principal-width: 100px;
    --message-text-font-size: 1rem;

    --heading-font-size: 1rem;

    --text-font-size: 0.8rem;

    --table-heading-font-size: 0.5rem;
    --table-element-font-size: 0.8rem;

    --footer-marker-font-size: 0.5rem;
    --footer-content-font-size: 0.8rem;
  }

  .logo
  {
    transform: scale(0.6) translateX(-100px);
  }

  .heading
  {
    padding: 10px 5px 5px 10px;
    max-width: 80%;
    border-left: 10px solid var(--primary-color);
  }

  .english-medium,
  .hindi-medium
  {
    padding: 10px;
  }

  .table-heading
  {
    padding: 10px 5px;
    justify-content: start;
  }

  .table-element
  {
    padding: 20px 5px;
    margin: 10px 0px;
    justify-content: start;
  }
}