:root {
  /* font sizes */
  --FONT_SIZE_GLOBAL:                     1rem;
  --FONT_SIZE_TITLE:                      2rem;
  --FONT_SIZE_SEMI_TITLE:                 1.4rem;
  --FONT_SIZE_TEXT:                       1.2rem;

  /* margins different width */
  --MARGIN_HEIGHT:                       15px;
  --MARGIN_PC:                          100px;
  --MARGIN_MOBILE:                       15px;

  --MARGIN_TABLE:                        0.6rem;
  
  /* nav bar & header & button */
  --NAV_BAR_HEIGHT:                       18px;
  --NAV_BAR_BUTTON_SPACING:               8px;
  --HEADER_IMG_HEIGHT:                  100px;
  --HEADER_IMG_HEIGHT:                  100px;
  /* position is relative to size */
  --NAV_BUTTON_CONTENT_PADDING:          15px; 
  --NAV_BUTTON_WITDTH:                   40px;
  --NAV_BUTTON_HEIGHT:                   40px;
  --NAV_BUTTON_TOP:                      30px;
  --NAV_BUTTON_RIGHT:                     0px;
  --NAV_BUTTON_CONTENT_TOP:              70px;
  --NAV_BUTTON_CONTENT_RIGHT:             0px;
  --NAV_BUTTON_CONTENT_PADDING:          10px;
  
  /* table */
  --TABLE-MIN-WIDTH:                    100%;
  --TABLE-BORDER-SIZE:                    2px;
  --TABLE-PADDING:                        5px;
  
  /* image container */
  --IMG_CONTAINER_GAP:                   10px;
  
  /* tied to scaling */
  --IMG_MAX_HEIGHT_MOBILE:               50vh;
  --IMG_MAX_HEIGHT_INBETWEEN:            30vh;
  --IMG_MAX_HEIGHT_PC:                   45vh;

  --IN_OUT_MAX_HEIGHT_PORTRAIT:          70vh;
  --IN_OUT_RATIO_PORTRAIT:                0.30;  /*ratio =  code-block-cell to img-preview-cell */
  --IN_OUT_RATIO_PORTRAIT_MOBILE:         0.57;
  
  /* ~~~C.O.L.O.U.R.S~~~ */
  
  /*font colors */
  --COLOR_DEFAULT_TEXT:                  #EEEEEE;
  --COLOR_DEFAULT_LINK:                  #00FAFF;

  
  /* backgrounds */
  --COLOR_BACKGROUND:                    #1E1E1E;
  --COLOR_HEADER_BACKGROUND:             #121212;
  --COLOR_NAV_BACKGROUND:                #0070B0;
  --COLOR_NAV_BACKGROUND_GRADIENT:       rgba(  0,  0,  0, 0.2);

}

/* root default opts */
* {
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  box-sizing: border-box;
  color: var(--COLOR_DEFAULT_TEXT);
  font-family: "Noto Sans", "monospace" !important;
}

body {
  background-color: var(--COLOR_BACKGROUND);
  min-height: 100vh;
}

/* top header */
.top_header {
  width: 100%;
  background-color: var(--COLOR_HEADER_BACKGROUND);
  min-height: var(--HEADER_IMG_HEIGHT);

  img {
    height: var(--HEADER_IMG_HEIGHT);
    vertical-align: top;
    object-fit: contain;
  }
}

/* navigation bar*/
.nav_bar {
  background-color: var(--COLOR_NAV_BACKGROUND);
  background-image: linear-gradient(var(--COLOR_NAV_BACKGROUND), var(--COLOR_NAV_BACKGROUND_GRADIENT));
 
  
  ul {
    list-style-type: none;
    overflow: hidden;
  }
  
  li {
    font-size: 1.6em;
    float: left;
    font-weight: bold;
  }
  
  li a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: var(--NAV_BAR_HEIGHT) var(--NAV_BAR_BUTTON_SPACING);
  }
}

.list__h2{
  /* display: inline-block; */
/* background-color: #00FAFF; */
li{
      /* margin: auto; */
      /* text-align: center; */
      margin-top: var(--MARGIN_TABLE);
      font-size: var(--FONT_SIZE_SEMI_TITLE) ;
    }
}

/* nav_button */
.active,
.nav_button:hover {
  background-color: var(--COLOR_NAV_BACKGROUND);
}


.nav_button {
  border-color: var(--COLOR_NAV_BUTTON_BORDER);
  display: none;
  background-color: var(--COLOR_NAV_BUTTON_BACKGROUND);
  width: var(--NAV_BUTTON_WITDTH);
  height: var(--NAV_BUTTON_HEIGHT);
  position: fixed;
  top: var(--NAV_BUTTON_TOP);
  right: var(--NAV_BUTTON_RIGHT);
  
}

.text-shadow{
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
p,
ul,
h1,
h2,
h3
{
text-shadow: black 1px 0 10px;
}


h1 {

  color: var(--COLOR_DEFAULT_TEXT);
  width: fit-content;
  font-size: var(--FONT_SIZE_TITLE);
  font-weight: bold;
}

h2 {
  color: var(--COLOR_DEFAULT_TEXT);
  width: fit-content;
  font-size: var(--FONT_SIZE_SEMI_TITLE);
  font-weight: bold;
}

h3 {
  color: var(--COLOR_DEFAULT_TEXT);
  width: fit-content;
  font-size: var(--FONT_SIZE_TEXT);
  font-weight: bold;
}

/* table & lists */
ol,
ul {
  list-style-position: inside;
}

ul {
  list-style-type: square;
}

dd::before {
  margin-left: 2.4rem;
  content: "- ";
}



/* tables */
.table {
  border-collapse: collapse;
  width: 100%;
  /* background-color: #00FAFF; */

  th,
  td {
    width: 33%;
    /* vertical-align: top; */
    border: var(--TABLE-BORDER-SIZE) solid transparent;
    /* padding: var(--TABLE-PADDING); */
    text-align: center;
    img{
      vertical-align: top;
      position: relative;
      bottom: 0.4rem;
      /* left: 1px; */
    }
  }
  th {
    color: var(--COLOR_DEFAULT_TEXT);
  }
}


/* image container  */
.img_container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--IMG_CONTAINER_GAP);
  row-gap: var(--IMG_CONTAINER_GAP);


  img {
    width: 100%;
    vertical-align: top;
    object-position: left;
    object-fit: contain;
  }
}

.icon{
width: 40px;
margin: 0;
padding: 0;
padding-right: 5px;
padding-left: 5px;
padding-top: 10px;
vertical-align: top;
}

/* align */
.center{
  display: block; 
  margin: auto;
}

/* scaling */

/* margins wide */
@media all and (min-width: 1000px) and (max-width: 2560px) {
  .global_margin {
    margin-left: var(--MARGIN_PC);
    margin-right: var(--MARGIN_PC);
  }

  .img_container img,
  img {
    max-height: var(--IMG_MAX_HEIGHT_MOBILE);
  }

  h3{
    display: block;
    margin: auto;
  }

.list__h2{
    li{
      margin: auto;
      text-align: center;
      margin-top: 0.4rem;
      font-size:var(--FONT_SIZE_SEMI_TITLE) ;
    }
}
}


/*margins average*/
@media all and (min-width: 500px) and (max-width: 1200px) {
  .global_margin {
    margin-left: var(--MARGIN_MOBILE);
    margin-right: var(--MARGIN_MOBILE);
  }


  img,
  img_container img {
    max-height: var(--IMG_MAX_HEIGHT_INBETWEEN);
    max-width: 200px;
  }
  
  .table{
    td{
      display: flex;
      width: auto;
    }
  }
}

/* margins narrow*/
@media all and (min-width: 0px) and (max-width: 500px) {
  .global_margin {
    margin-left: var(--MARGIN_MOBILE);
    margin-right: var(--MARGIN_MOBILE);
  }

  .img_container img,
  img {
    max-height: var(--IMG_MAX_HEIGHT_MOBILE);
  }

  .table{
    td{
      display: flex;
      width: auto;
    }
  }
}

/* adjust the intro_box when screen narrow */
/* @media all and (max-width: 600px) { */
/*   .intro_box > div { */
/*     flex-direction: column; */
/*     align-items: center; */
/*     text-align: center; */
/*   } */
/*  */
/*   .intro_box img { */
/*     height: auto; */
/*     max-width: 240px; */
/*     margin-bottom: 40px; */
/*   } */
/*  */
/*   .intro_box h3 { */
/*     text-align: left; */
/*   } */
/* } */