@import "/css/default.css";
@import "/css/fonts.css";
@import "/css/layout.css";

/* default values */
:root {
  --header-height: 40px;
  --footer-height: 40px;
}

a.green {
  color: var(--green);
}
a.green:hover {
  color: var(--orange);
}

a.white {
  color: var(--white);
}
a.white:hover {
  color: var(--white);
}

/* lists */

ul.mylist {
  list-style: none;
  padding-left: 1em;
}
ul.mylist li::before {
  content: "\25E6";
  color: var(--white);
  margin-right: 0.5em;
}

ul.toclist {
  list-style: none;
  padding-left: 1em;
}
ul.toclist li::before {
  content: "\25E6";
  color: var(--white);
  margin-right: 0.5em;
}

.toclist ul {
  display: none;
}

.toclist ul.open {
  display: block;
}

/* 
 * custom classes 
 */

/* text colors */
.text-white {
  color: var(--white);
}
.text-green {
  color: var(--green);
}
.text-yellow {
  color: var(--yellow);
}
.text-orange {
  color: var(--orange);
}
.text-purple {
  color: var(--purple);
}
.text-black {
  color: var(--black);
}
.text-pink {
  color: var(--pink);
}
.text-red {
  color: var(--red);
}
.text-red-secondary {
  color: var(--redSecondary);
}
.text-purpleSecondary {
  color: var(--purpleSecondary);
}

/* text sizes */
.text-small {
  font-size: 0.7rem;
}
.text-smaller {
  font-size: 0.9rem;
}

.text-biggest {
  font-size: 2.0rem;
}

.font_13px {
  font-size: 13px;
}

/* text alignments */
.centered, .center {
  text-align: center;
}

/* text styles */
.text-terminator {
  font-family: 'Terminator', sans-serif;
}
.italic {
  font-style: italic;
}
.strong, .bold {
  font-family: 'RobotoBold', 'Roboto', sans-serif;
}

/* some width sizes */
.width-15-percent {
  width: 15%;
}
.width-20-percent {
  width: 20%;
}
.width-30-percent {
  width: 30%;
}
.width-40-percent {
  width: 40%;
}
.width-45-percent {
  width: 45%;
}
.width-50-percent {
  width: 50%;
}

/* Gallery */

.art_entry {
  display: flex;
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
  width: 100%;
}

.art_thumb {
  width: 220px;
  display: flex;
  align-items: center;
  /* border: 1px solid var(--white); */
}

.art_desc {
  flex: 1;
  text-align: left;
  display: flex;
  align-items: center;
  color: var(--white);
  /* border: 1px solid var(--white); */
}

/* arrows */

.down-arrow-purple { 
  width: 10px; 
  height: 10px; 
  transition: .5s; 
  float: left;
  box-shadow: -2px 2px 0 var(--purple);
  transform: rotate(-45deg); 
} 

.down-arrow-pink { 
  width: 10px; 
  height: 10px; 
  transition: .5s; 
  float: left;
  box-shadow: -2px 2px 0 var(--pink);
  transform: rotate(-45deg); 
} 

.down-arrow-yellow { 
  width: 10px; 
  height: 10px; 
  transition: .5s; 
  float: left;
  box-shadow: -2px 2px 0 var(--yellow);
  transform: rotate(-45deg); 
} 

.down-arrow-green { 
  width: 10px; 
  height: 10px; 
  transition: .5s; 
  float: left;
  box-shadow: -2px 2px 0 var(--green);
  transform: rotate(-45deg); 
} 

.right-arrow-purple {
  width: 10px; 
  height: 10px; 
  transition: .5s; 
  float: left;
  box-shadow: -2px 2px 0 var(--purple);
  transform: rotate(-135deg); 
}

/* header and footer */

.header {
  position: sticky;
  top: 0;
  background-color: var(--draculaBackground);
  color: var(--white);
  padding: 1px 1px;
  z-index: 1000;
  text-align: center;
  min-height: var(--header-height);
  width: 100%;
}

.footer {
  position: fixed;
  top: auto;
  bottom: 0;
  width: 100%;
  color: var(--white);
  z-index: 1000;
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--draculaBackground);
}

.header h1 {
  text-align: center;
  font-family: 'Terminator', sans-serif;
  font-size: 32px;
}

/* for galleries */
.art-table-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: left;
}
.art-table {
  max-width: 400px;
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-collapse: collapse;
  display: flex;
  flex-direction: column;
}
.art-th {
  font-family: 'RobotoBold', 'Roboto', sans-serif;
  text-align: center;
  padding: 8px;
}
.art-tr {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  border: 1px solid;
}
.art-preview-pic {
  max-width: 100%;
}

/* tables */

/* normal tables */
.thead {
  font-weight: bold;
  font-family: 'RobotoBold', 'Roboto', sans-serif;
  border: 1px solid;
  padding: 5px;
}
.tdata {
  border: 1px solid;
  padding: 5px;
}
.tdata-bold {
  border: 1px solid;
  padding: 5px;
  font-family: 'RobotoBold', 'Roboto', sans-serif;
  font-weight: bold;
}

/* LHP correspondence table */
.ct-th {
  background-color: dimgray;
  color: black;
  font-weight: bold;
  font-family: 'RobotoBold', 'Roboto', sans-serif;
  border: 1px solid;
  padding: 5px;
}
.ct-td {
  border: 1px solid;
  padding: 5px;
}

/* IT table */
.it-thead {
  font-weight: bold;
  font-family: 'RobotoBold', 'Roboto', sans-serif;
}
.it-abbrev-char {
  text-align: left;
}
.it-td {
  border: 1px solid;
  padding: 5px;
}
.it-td-bold {
  border: 1px solid;
  padding: 5px;
  font-family: 'RobotoBold', 'Roboto', sans-serif;
  font-weight: bold;
}

/* ISMS PDCA table  */
.isms-pdca-table {
  border-collapse: collapse;
  width: 100%;
  border: 0;
}
.isms-pdca-table th {
  font-family: 'RobotoBold', 'Roboto', sans-serif;
  padding-bottom: 1px;
  text-align: left;
  text-transform: uppercase;
  border: 0;
  font-size: 1.0rem;
}
.isms-pdca-table-td-border {
  border: 1px solid;
}
.isms-pdca-table-td-category {
  vertical-align: top;
  height: 2.5rem;
  padding: 5px;
}
.isms-pdca-table-td-plan {
  border: 1px solid;
  border-color: var(--purple);
  padding: 5px;
}
.isms-pdca-table-td-do {
  border: 1px solid;
  border-color: var(--pink);
  padding: 5px;
}
.isms-pdca-table-td-check {
  border: 1px solid;
  border-color: var(--yellow);
  padding: 5px;
}
.isms-pdca-table-td-act {
  border: 1px solid;
  border-color: var(--green);
  padding: 5px;
}

/* menu */
.menu-toggle {
  background-color: transparent;
  border: 1px solid var(--purpleSecondary);
  color: var(--purpleSecondary);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 1em;
}

/** miscellaneous **/

.img-amsterdam {
   padding: 2px;
}

.img-rhodes {
   padding: 2px;
   vertical-align: center;
   align: center;
}


.pan-logo svg {
  width: 100%;
  height: auto;
  display: block;
}
.pan-logo {
  width: 100px;
  height: auto;
  display: block;
  margin: auto;
}

/* hide an element */
.hidden {
  display: none;
}

/* ensure named anchors are displayed under header */
.id_anchor_ref {
  scroll-margin-top: calc(var(--header-height) * 2);
}

/* PDF in iframe */
.pdf-frame {
  width: 100%;
  height: 500px;
}

/* poems */
.poem {
  text-align: center;
  margin: 0 auto;
}

/* background colors */
.bluebg {
  background-color: blue;
}
.yellowbg {
  background-color: yellow;
}
.greenbg {
  background-color: green;
}
.orangebg {
  background-color: orange;
}
.redbg {
  background-color: red;
}
.violetbg {
  background-color: violet;
}
.indigobg {
  background-color: indigo;
}
.silverbg {
  background-color: silver;
}
.whitebg {
  background-color: white;
}
.goldbg {
  background-color: gold;
}
.purpurbg {
  background-color: #800080;
}

/** EFFECTS **/

.glow {
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transition: text-shadow 1s linear;
       -moz-transition: text-shadow 1s linear;
         -o-transition: text-shadow 1s linear;
            transition: text-shadow 1s linear;
}

.glow.in {
  text-shadow:
    0.25em 0.25em 0.25em rgba(149, 128, 255, 0.5),
    0 0 0.5em rgba(255, 255, 255, 0.3);
}


.fade {
  opacity: 0;
    -webkit-transition: opacity 1s linear;
       -moz-transition: opacity 1s linear;
         -o-transition: opacity 1s linear;
            transition: opacity 1s linear;
}

.fade.in {
  opacity: 1;
}

/* top button */
#top-button {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: calc(var(--footer-height) + 20px); /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: gray; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 16px; /* Increase font size */
}
#top-button:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* 
 * RESPONSIVENESS
 */

@media (max-width: 768px) {
  h1, h2, h3 {
    text-align: center;
  }

  .container-row {
    flex-direction: column;
    padding-bottom: var(--footer-height);
  }

  .container-navi {
    width: 100%;
    min-width: unset;
    z-index: 2;
    font-size: 18px;
    text-align: center;
  }

  .container-navi-nonsticky {
    width: 100%;
    min-width: unset;
    z-index: 2;
    font-size: 18px;
    text-align: center;
  }

  .container-content {
    width: 100%;
    padding: 10px;
    z-index: 1;
  }

  .mobile-menu {
    display: block;
    text-align: center;
    background-color: var(--draculaBackground);
  }

  .desktop-menu {
    display: none;
  }

  .blog-container {
    width: 100%;
    max-width: 100%;
  }
  .pan-logo {
    display: none;
  }
  .statsview-container {
    text-align: center;
  }
}

@media (min-width: 769px) {
  .container-navi {
    position: sticky;
    top: var(--header-height);
    align-self: flex-start;
    height: calc(100vh - var(--header-height));
    z-index: 1;
    flex: 0 1 250px;
    padding-bottom: var(--footer-height);
    margin: 0 auto;
  }
  .container-navi-nonsticky {
    position: relative;
    top: var(--header-height);
    align-self: flex-start;
    height: calc(100vh - var(--header-height));
    z-index: 1;
    flex: 0 1 250px;
    padding-bottom: var(--footer-height);
    text-align: center;
  }
  .container-row {
    height: 100%;
    min-height: 850px;
    padding-bottom: var(--footer-height);
  }
  .mobile-menu {
    display: none;
  }
  .rainbow-flag {
    display: none;
  }
}