/**************************************/
/* Colors                             */
/**************************************/
:root{
   --color-main-dark: #654b84;
   --color-text: 605060;
   --color-link: #584EC0;
   --color-link-dark: #423b92;
   --color-bg1: #fffffc;
   --color-bg2: #f3effc;
   --color-bg25: #ece3ff;
   --color-bg3: #ddcbfe;
}


/**************************************/
/* Basic styles and layout            */
/**************************************/
body {
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   color: var(--color-text);
   background-color: var(--color-bg1);
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
}

.page {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   max-width: 1200px;
   min-width: 800px;
   min-height: 100vh;
   padding: 0;
   margin: 0 auto;
   display: grid;
   grid-template-areas:
      "header nav"
      "header main"
      "info main"
      ". main"
      ". footer";
   grid-template-rows: min-content min-content min-content 1fr min-content;
   grid-template-columns: 300px 1fr;
   column-gap: 1em;
}

.page > main {
   grid-area: main;
}

.page > header {
   grid-area: header;
}

.page > nav {
   grid-area: nav;
}

.page > .info {
   grid-area: info;
}

.page > footer {
   grid-area: footer;
}

main {
   padding: 0 2em 0 2em;
}

main h2 {
   font-size: 1.2em;
   margin: 0;
   padding: 1em 0 0.5em 0;
}

main p {
   font-size: 1.1em;
   line-height: 1.5em;
   margin: 0;
   padding: 0 0 1em 0;
}

main ul {
   font-size: 1.1em;
   line-height: 1.5em;
   margin: 0;
   padding: 0 0 1em 2em;
}

main ul li{
   margin: 0;
   padding: 0;
}

a {
   color: var(--color-link);
}

a:focus,
a:visited,
a:hover {
   color: var(--color-link-dark);
}

a.highlight {
   display: inline-block;
   color: var(--color-link);
   background-color: var(--color-bg2);
   padding: 0.1em 0.5em;
   border-radius: 3px;
}

a.highlight:hover {
   background-color: var(--color-bg25);
   color: var(--color-link-dark);
}

/**************************************/
/* Header                             */
/**************************************/

header {
   padding-right: 1em;
}
header > h1 {
   text-align: center;
}


header h1 {
   margin: 0;
   padding: 0;
}

header .logo {
   width: 250px;
   height: 250px;
}


.dates {
   box-sizing: border-box;
   width: 100%;
   border-radius: 5px;
   background-color: var(--color-bg2);
   color: var(--color-link-dark);
   margin: 1.0em;
   font-size: 1em;
   padding: 0.75em;
   line-height: 1.65em;
}

.dates > span {
   font-weight: bold;
}

.dates > .year {
   margin-top: 1.5em;
   font-weight: bold;
   color: #B4B0DB;
}

.dates > .year:first-of-type {
   margin-top: 0;
}


.documents {
   margin: 1em;
   box-sizing: border-box;
   width: 100%;
}

.documents > a {
   display:block;
   box-sizing: border-box;
   width: 100%;
   border-radius: 5px;
   background-color: var(--color-bg2);
   color: var(--color-link-dark);

   font-size: 0.9em;
   text-decoration: none;
   font-weight: bold;
   min-height: 48px;
   line-height: 1.3em;
   margin: 0.5em 0em;

   background-repeat: no-repeat;
   background-size: 32px;       /* adjust size */
   background-position: 10px center;

   padding: 0.5em;
   padding-left: 52px;
}

.documents > a.file {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 4h36l12 12v44a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4z' fill='%23584EC0'/><path d='M44 4v12h12L44 4z' fill='%23ffffff' fill-opacity='0.6'/><text x='32' y='44' text-anchor='middle' font-family='Arial, Helvetica, sans-serif' font-weight='700' font-size='17' fill='%23ffffff' letter-spacing='0.5'>PDF</text></svg>");
}

.documents > a.link {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='8' y='4' width='48' height='56' rx='4' ry='4' fill='%23584EC0'/><g stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' transform='translate(14,14)'><line x1='7' y1='28' x2='27' y2='8'/><polyline points='19,8 27,8 27,16'/></g></svg>");
}

.documents > a > span{
   font-weight: normal;
   opacity: 0.6;
}

/**************************************/
/* Navigation                         */
/**************************************/

nav {
   height: 100px;
   display: flex;
   align-items: center;
}

nav > ul {
   width: 100%;
   list-style: none;
   box-sizing: border-box;
   border-radius: 5px;
   background-color: var(--color-bg2);
   margin: 0.5em;
   padding: 0 0.5em;
   font-size: 1.2em;
}

nav > ul > li {
   display: inline-block;
   padding: 0.25em 0.5em;
   margin: 0 0.25em;
   border-radius: 5px;
}

nav > ul > li > a{
   text-decoration: none;
   color: var(--color-link-dark)
}

nav > ul > li:hover > a{
   border-bottom: solid 1px var(--color-link-dark);
}

nav > ul > li.active {
   font-weight: bold;
   background-color: var(--color-bg3);
}

/**************************************/
/* Footer                             */
/**************************************/

footer {
   display: flex;
   align-items: center;
   justify-content: center;
}

footer > p {
   list-style: none;
   box-sizing: border-box;
   border-radius: 5px;
   background-color: var(--color-bg2);
   margin: 0.5em;
   padding: 0.5em 1em;
   font-size: 1em;
   color: var(--color-link-dark);
}

/**************************************/
/* Navigation                         */
/**************************************/



/**************************************/
/* Photo gallery                      */
/**************************************/

.gallery {
   margin: auto;
   text-align: center;
   margin: 1em 0;
}

.gallery-images {
   position: relative;
   margin: auto;
   max-width: 600px;
   height: 400px;
   margin-bottom: 1em;
}

.gallery-image {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 380px;
  object-fit: fit;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none; /* Prevent clicking hidden ones */
}

.gallery-image.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.gallery-dots {
   position: relative;
}

.dot {
  display: inline-block;
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #333;
}

/**************************************/
/* Others                             */
/**************************************/

.fees {
   border-collapse: collapse;
   font-size: 1em;
   margin-bottom: 1em;
}

.fees thead {
   background-color: var(--color-bg3);
   border-bottom: solid 2px #fff;
}

.fees tbody {
   background-color: var(--color-bg2);
}

.fees thead tr:first-child th:first-child {
   border-top-left-radius: 5px;
}

.fees thead tr:first-child th:last-child {
   border-top-right-radius: 5px;
}

.fees tbody tr:last-child td:first-child {
   border-bottom-left-radius: 5px;
}

.fees tr td {
   padding: 0.35em 1em;
   line-height: 1.5em;
}

.fees tr th {
   padding: 0.15em 1em;
   line-height: 1.5em;
}

.fees tr th {
   font-weight: bold;
   text-align: center;
}

.fees tr td {
   text-align: center;
}

.fees thead tr th:first-of-type,
.fees tbody tr td:first-child {
   text-align: left;
}


/**************************************/
/* Media queries                      */
/**************************************/

@media(max-width: 900px) {
   body {
      font-size: 14px;
   }

   .page {
      grid-template-columns: 270px 1fr;
      column-gap: 0.25em;
   }

   .gallery-images {
      max-width: 500px;
      height: 300px;
   }

   .gallery-image {
      height: 300px;
   }
}