@import url("./css/reset.css");
@import url("./css/utility.css");
@import url("./css/hamburger.css");

@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&family=Playfair+Display:wght@100;200;300;400;500;700;800;900&display=swap");

/* ------------------*/
/* Custom properties SET */
/* ----------------- */

:root {
  /*colors*/
  --clr-white: #fff;
  --clr-white-2: #f5f5f5;
  --clr-dark: #282c2b;
  --clr-accent: #06234a;
  --clr-accent-2: #e0b253;

  /* structure */
  --gutter: 25px;
  --cols: 10;
  --headerHeight: 100px;
  --pad-px: 30px;

  /* font families */

  --ff-main: "Oxygen", sans-serif;
  --ff-secondary: "Playfair Display";

  /* default font size */
  --typeScale: 1.54;
  --fs-def: calc(18px + (23 - 18) * ((100vw - 1400px) / (2560 - 1400)));
  @media only screen and (max-width: 1400px) {
    --fs-def: 20px;
  }
  /* borders */
  --b-radius: 20px;
  --b-size: 3px;
  --b-size-2: 4px;
  --b-size-navi: 0px;
  --b-color: var(--clr-accent);
  --b-color-2: rgba(255, 255, 255, 0.25);
  --b-color-szocket: rgba(255, 255, 255, 0.7);
  --b-color-navi: rgba(255, 255, 255, 0.25);
  --b-size-szocket: 0px;
  --b-color-szocket: rgba(255, 255, 255, 0.1);
  --layoutBorders: 0px dashed green;

  /* header, footer, socket*/
}

/* ---------- */
/* html, body */
/* --------- */
html {
  font-size: var(--fs-def);
  font-family: var(--ff-main);
  background: var(--clr-accent);
}

/* Typography */

nav a,
#hamburger li {
  font-weight: 600;
}
nav a:active,
nav a:hover,
#hamburger li:hover {
  color: var(--clr-white);
}

/* ___________________ PROJECT SPECIFIC_________________________________*/

/* C---------- */
/* Typography: Project Specific Customs */
/* ---------- */
nav a {
  font-family: var(--ff-secondary);
  text-transform: uppercase;
  font-weight: 600;
}
.heading1,
.heading2,
.heading3,
.heading4,
.heading6 {
  font-family: var(--ff-secondary);
}
p {
  font-weight: 700;
  line-height: 1.3em;
  letter-spacing: -0.025em;
}

.heading1 {
  font-weight: 500;
  line-height: 0.95em ;
  letter-spacing: -0.055em;
}
.heading2 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1em;
}
.heading3,
.year {
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: -0.015em;
}
.heading4 {
  font-family: var(--ff-secondary);
  line-height: 1em;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.heading5 {
  font-weight: 800;
  line-height: 1.1em;
}
.heading6{
  font-weight:800;
  letter-spacing:0.01em;
}
/* C---------------------------- */
/*  CLASSES - Project Specifics */
/* --------------------------- */

.rounded {
  border-radius: 50%;
}
.thumbnail {
  border-radius: 50%;
}
.aluBox {
  background-color: var(--clr-accent-2);
  color: var(--clr-dark);
  padding: var(--pad-xs);
  border-radius: var(--pad-xs);
  margin-right: var(--pad-xs);
  margin-top: var(--pad-xs);
}
.aluBox .heading5,
.aluBox .heading4,
.aluBox .heading6 {
  padding-bottom: 15px;
}
.aluBoxThumbnail img {
  border-radius: 50%;
  width: 100%;
  border: var(--b-size) solid var(--clr-accent-2);
  margin-right: var(--pad-xxs);
}
.aluBox2 {
  background-color: var(--clr-accent);
  color: var(--clr-accent-2);
  padding: var(--pad-xs);
  padding-top: var(--pad-m);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 66px;
  border-bottom-right-radius: 66px;
  margin-right: var(--pad-xs);
  margin-top: var(--pad-xs);
}
.aluBox2Thumbnail {
  border-radius: 50%;
  width: 100%;
  height: 40%;
  z-index: 10;
  border: var(--b-size) solid var(--clr-accent-2);
  margin-right: var(--pad-xxs);
  background-color: var(--clr-accent-2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.aluBox2Thumbnail img {
  width: 50%;
}
.animeR {
  overflow: hidden;
}

.minimalButton {
  width:var(--pad-xs);
  background-color: var(--clr-accent);
  margin-right:var(--pad-px-xs);
}
.minimalButton:hover {
  background-color: var(--clr-accent-2);
  color: var(--clr-accent);

}
.tableButton {
  width:var(--pad-px-l);
  background-color: var(--clr-accent-2);
  border-radius:0;
}
.sortButton {
  width: var(--pad-px-s);
  background-color:transparent;
  padding:0;
  padding-top:var(--pad-xxs);
}
.tableButton:hover {
  background-color: var(--clr-accent-2);
}

/*** TIMELINE YEARS STYLE ***/

.timeline-container {
  overflow: hidden;
  position: relative;
  background-color: var(--clr-accent-2);
  border-bottom: var(--b-size-2) solid var(--clr-accent); /* Border added to the timeline */
}

.timeline {
  display: flex;
  transition: transform 0.5s ease;
}

.year {
  padding: 10px;
  margin-right: 20px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease;
  font-size: var(--fs-4);
  font-family: var(--ff-secondary);
  color: var(--clr-accent);
}

.year:hover {
  background-color: var(--clr-accent);
  color: var(--clr-accent-2);
}

.prev-next-buttons {
  display: flex;
  justify-content: space-between;
  bottom: 0;
  width: 100%;
}

/*** FORM (Contact) ***/

label {
  display: block;
}
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  border: none;
  border-bottom: var(--b-size) solid var(--clr-dark);
  border-radius: 0;
  background-color: transparent;
}
input[type="submit"] {
  background-color: var(--clr-accent);
  color: var(--clr-accent-2);
  border: none;
  border-radius: var(--b-radius);
  cursor: pointer;
  padding: var(--pad-px);
}
input[type="submit"]:hover {
  background-color: var(--clr-dark);
}

/* Search and dropdowns */

.dropdown, .searchBar {
  display:flex;
  gap:var(--pad-px-xs);
}
.dropdown select {
  width:var(--pad-xxxl);
  border-bottom:var(--b-size ) var(--clr-accent) solid;
  border-radius: var(--b-radius);
  border-top:0;
}



/* the FLEX TABLE */

.table {
  display:flex;
  justify-content:start;
  flex-direction:column;
  width:100%;
  border-collapse: collapse;

}
.table p, .table .heading6 {
  padding-bottom:0;
}
.flex-table-header{
  display:flex;
  text-transform:uppercase;
  font-size:var(--fs-075);
  font-weight:800;
  background-color:var(--clr-accent);
  color: var(--clr-accent-2);
  padding: var(--pad-px-s);
  margin-bottom:var(--b-size);
  border: var(--b-size) var(--clr-accent-2) solid;
   flex-wrap: wrap;
}
.flex-table-row{
  display:flex;
  font-size:var(--fs-1);
  font-weight:800;
  background-color:var(--clr-accent-2);
  padding: var(--pad-px-s);
  color:var(--clr-dark);
  margin-bottom:var(--b-size);
  flex-wrap: wrap;
}
.flex-table-row:hover {
  background-color: var(--clr-accent); /* Replace #f0f0f0 with your desired hover background color */
  color: var(--clr-accent-2)
}

.flex-table-cell-1{
  flex:2;
}
.flex-table-cell-2, .flex-table-cell-3, .flex-table-cell-4, .flex-table-cell-5{
  flex:1;
}



/* C-------- */
/* Customizations */

/*_________________________ MOBILE VERSIONS ______________________*/

/* ---------------------*/
/* Variables on monile */
/* ---------------------*/
:root {
  /*1. All Resolutions*/
  @media only screen and (max-width: 1400px) {
    --typeScale: 1.26;
    --featureBentoSpan: 1;
  }

  /* 2. Small laptops, big tablets*/
  @media (max-width: 1399px) and (min-width: 990px) {
    --pad: 104px;
  }

  /* 3. TabletLandscape*/
  @media (max-width: 989px) and (min-width: 768px) {
    --pad: 104px;
    --pad-s: 52px;
    --pad-xs: 52px;
  }

  /* 4. TabletPortrait */
  @media (max-width: 767px) and (min-width: 480px) {
    --pad: 48px;
    --pad-s: 24px;
    --pad-xs: 24px;
  }

  /* 5. Smartphone*/
  @media only screen and (max-width: 479px) {
    --pad: 48px;
    --pad-s: 24px;
    --pad-xs: 24px;
  }
}

/* ---------------------*/
/* Settings on mobile */
/* ---------------------*/

/*1. All Resolutions*/

@media only screen and (min-width: 1401px) {
  .hod {
    display: none;
  }
}

@media only screen and (max-width: 1400px) {
  /* Utility on mobile */
  /* Utilities on mobile */
  .hom {
    display: none;
  }
  .com{
    text-align:center;
  }
  .bom {
    background-image:none!important;
  }
    nav {
    display: none;
  }

  /* Layout Paddings */
  .grid {
    grid-template-columns: 100%;
    padding: var(--pad-xxl) var(--pad) var(--pad-xxl) var(--pad);
  }

  .box[style*="grid-column"],
  .box-middle[style*="grid-column"],
  .bento[style*="grid-column"] {
    grid-column: auto !important;
  }
  .box[style*="grid-row"],
  .box-middle[style*="grid-row"],
  .bento[style*="grid-row"] {
    grid-row: auto !important;
  }
  .marginMT {
    margin-top: var(--pad);
  }

  /* Table */
    .table{
      flex-wrap:wrap;
  }
  .flexedTo100mobile, .flex-table-cell-1, .flex-table-cell-2, .flex-table-cell-3, .flex-table-cell-4, .flex-table-cell-5, .flex-table-header{
    flex: 0 0 100%;
  }
  .flex-table-row, .flex-table-header{
    padding: var(--pad-px);
  }
 .width100mobile, .alumniDropdown{
  width:100%;
 }


  /* Menu */

  .logo img {
    height:70px;
  }

  #menuToggle {
    display: block;
  }

  .socket {
    padding-top: var(--pad-s);
    padding-bottom: var(--pad-s);
  }

  /* Varia */

  .dropdown select{
    min-width: 100%;
  }
select {
  appearance: none; /* Removes default iOS styling */
  -webkit-appearance: none; /* For Safari on iOS */
  -moz-appearance: none; /* For Firefox (optional) */
  background-image: url('./images/sort-solid.svg'); 
   background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}


  /* Special structures */

  #homehero {
    background-image:none!important;
    background-color: var(--clr-accent);
    color: var(--clr-accent-2);
    padding-left:var(--pad-px);
    padding-right:var(--pad-px-s);
    padding-top:var(--pad);
    padding-bottom:var(--pad);
    text-align:left;
  }
  #homehero button {
    background-color:var(--clr-accent-2);
    color: var(--clr-accent);
    width:var(--pad);
  }
  #homehero .heading5{
    font-size: var(--fs-2);
  }
  #homehero .heading1 {
    font-size:20vw;
  }
  .year {
    font-size:var(--fs-3);
    margin-right:0;
  }
  .szocket .heading5{
    font-size:var(--fs-1);
  }
.spec1mobile {
  padding-left:0;
  padding-right:0;

}

  /* Typography on Mobile - Project Settings */

  h1,
  h2 {
    line-height: 1em;
  }
  p,
  h3,
  h4,
  h5 {
    line-height: 1.26em;
  }

p{
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.3em;
}

 .table .flex-table-cell-1 .heading6{
    text-transform:uppercase;
    padding-bottom:var(--pad-px);
    font-size:var(--fs-2);
  }
.table .flex-table-header p {
  font-size: var(--fs-075);
}



}

/* 2. Small laptops, big tablets*/
@media (max-width: 1399px) and (min-width: 990px) {
}

/* 3. TabletLandscape*/
@media (max-width: 989px) and (min-width: 768px) {
}

/* 4. TabletPortrait */
@media (max-width: 767px) and (min-width: 480px) {
}

/* 5. Smartphone*/
@media only screen and (max-width: 479px) {
}