textarea {
  transform: matrix(
    1, /* scaleX() */
    0.0, /* skewY() */ 
    0.0, /* skewX() */ 
    1, /* scaleY() */ 
    0, /* translateX() */ 
    0);/* translateY() */ 
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/SourceSansPro.ttf");
}

@font-face {
  font-family: "Source Sans Pro Bold";
  src: url("/fonts/SourceSansProBold.ttf");
}

@font-face {
  font-family: "Cambria Math";
  src: url("/fonts/CambriaMath.ttf");
}

@font-face {
  font-family: "Segoe UI Symbol";
  src: url("/fonts/SegoeUISymbol.ttf");
}

@font-face {
  font-family: "Noto Color Emoji";
  src: url("/fonts/NotoColorEmoji.ttf");
}

html {
  color: #f0fff0;
  
  padding: 0;
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
  /*border: 1px solid purple;*/
}

body {
  background-color: #111;
  margin: 0;
  height: inherit;
}

.nowrap {
  white-space: nowrap;
}

#main-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr 6em minmax(auto, 2.2em);
  grid-auto-rows: max-content;

  /*border: 1px solid green;*/

  /* Force the entire vertical dimension of the background remain always fully visible by background-size: auto 100% */
  background: #070103 url('images/mystic_landscape_ghobot_happy.jpg') center/auto 100% no-repeat;
  height: inherit;
  margin: auto;
  /*padding: 0px 10px 10px 5px;*/
  /* Remove vertical scrollbar due to background image otherwise overflowing */
  box-sizing: border-box;
}

#header {
  grid-column: 1 / -1;
  grid-row: 1;

  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 15px;
  padding-left: clamp(15px, 1.9vw, 46.4px);
  padding-right: 0.4em;
  /*position: relative;*/
  /*display: table-row;*/
  /*left: 0;*/
  /*width: 100%;*/

}

#logo-container {
  /*border: 1px solid red;*/
  padding: 11px 0;
  width: 25%;
}

#logo-container img {
  width: 100%;
  min-width: 220px;
}

/* 880 1056 laptop icon */
/* 1344 224 head */
/* 1152 944 star */


#logo-container a {
  display: block;
}

#logo-image-narrow {
  display: none;
  height: 44px;
}

/* Once the menu transforms from text items to right-edge column with icons, keep
   the logo size constant instead of allowing take-over by full container width */
@media only screen and (max-width: 746.9px) {
  #logo-container img {
    max-width: 220px; 
  }
}

@media only screen and (max-width: 389.9px) {
  #main-container {
    padding-left: 5px;
    padding-right: 5px;
  }

  #logo-container a {
    text-align: center;
    position: relative;
    width: 100%;
    margin-left: 0;
  }
}


#menu-container {
  width: 62%;
  /*border: 1px solid red;*/
  display: flex;
  justify-content: space-between;
  text-align: right;
  font-size: calc(2.4vw + 6px);
  font-weight: bold;
  font-variant: small-caps;
}

#menu-container a {
  color: #0A66C2;
  padding: 0px 0.45em 0.2em 0px;
  text-decoration: none;
}

#menu-container a:hover, #menu-container a img {
  /*color: #0A66C2;*/
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

/* Bouncy ball in front of menu items' */
@media only screen and (min-width: 747px) {
  #menu-container a[href]:before { 
    font-size: 25%; 
    left: .75em; 
    position: relative; 
    bottom: .63em; 
    content: "⦿"; 
    visibility: hidden;
  }
}

#menu-container a#blog:after { content: "blog"; }
#menu-container a#contact:after { content: "contact"; }
#menu-container a#youtube:after { content: "youtube"; }
#menu-container a#linkedin:after { content: "linkedin"; }

#menu-container img {
  height: 35px;
}

[class*='menu-icon'] {
  display: none;
  vertical-align: middle;
}

#content {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: 60.4% auto;
  grid-template-rows: 0.8em 0.39em 0.39em 0.72em;

  align-self: end;

  /* horizontal, grid items should only consume minimum width */
  justify-content: end; 

  /* horizontal inside grid item */
  justify-items: end;

  box-sizing: border-box;

  color: rgb(240 255 240 / 0.7);
  font-variant: small-caps;
  font-size: calc(4vw + 4vh - 10px);
  margin-right: 0.35em;


  overflow: hidden;
  /*overflow-y: visible;*/
}

@supports (-moz-appearance: none) {
  #content {
    grid-template-rows: 0.83em 0.39em 0.39em 0.72em;
  }
}

@supports (-webkit-touch-callout: none) {
  #content {
    /* 307% margin-bottom: -3px; */ 
    grid-template-rows: 0.83em 0.39em 0.39em 0.74em;
  }
}

#content p {
  white-space: nowrap;
  align-self: end;
  margin: 0; 
  height: 0.37em;
  line-height: 0;
  text-shadow: 0.06em 0.06em rgb(0 0 0 / 0.5);
  font-weight: normal;
}

#content > p:nth-of-type(1) {
  /*tales from*/
  position: relative;
  left: 0.02em;
  
  font-weight: bold;
  font-size: 156.5%;
  grid-column: 1 / -1;
  grid-row: 1;
}

@supports (-moz-appearance: none) {
  #content > p:nth-of-type(1) {
    left: 0.03em;
    font-size: 147%;
  }
}
/*
@supports (-webkit-touch-callout: none) {
  #content > p:nth-of-type(1) {
    left: 0.04em; 
    font-size: 150%;
  }
}
*/

@media not all and (min-resolution:.001dpcm) { @media {
  #content > p:nth-of-type(1) {
    transform: scaleY(110%);
    font-family: 'Source Sans Pro Bold', sans-serif;
    font-weight: normal;
  }
}}

#content > p:nth-of-type(2) {
  /*the remote*/
  font-size: 60%;
  letter-spacing: 0.05em;
  grid-column: 2 / -1;
  grid-row: 2;
  z-index: 2;
}

@supports (-moz-appearance: none) {
  #content > p:nth-of-type(2) {
    position: relative;
    top: -0.01em;
  }
}

#content > p:nth-of-type(3) {
  /*oceans of*/
  font-size: 60%;
  letter-spacing: 0.08em;
  grid-column: 2 / -1;
  grid-row: 3;
  z-index: 3;
}

@supports (-moz-appearance: none) {
  #content > p:nth-of-type(3) {
    position: relative;
    top: -0.03em;
  }
}

#content > p:nth-of-type(4) {
  /*rpa*/
  font-weight: bold;
  font-size: 284%;
  position: relative;
  left: 0.1em;
  /*top: 0.005em;*/
  margin-right: 0.05em;

  grid-column: 1;
  grid-row: 2 / -1;
  z-index: 4;
  align-self: end
}

@supports (-moz-appearance: none) {
  #content > p:nth-of-type(4) {
    top: 0.01em;
    left: 0.12em;
    font-size: 267%;
  }
}

/*
@supports (-webkit-touch-callout: none) {
  #content > p:nth-of-type(4) {
    margin-right: 0.01em; 
    font-size: 297%; 
  }
}
*/

@media not all and (min-resolution:.001dpcm) { @media {
  #content > p:nth-of-type(4) {
    font-size: 287%;
    left: 0.096em;
    transform: scaleY(102%);
    font-family: 'Source Sans Pro Bold', sans-serif;
    font-weight: normal;
    bottom: 0.007em;
  }
}}

#content > p:nth-of-type(5) {
  /*verse*/
  font-size: 130%;
  grid-column: 2 / -1;
  grid-row: 4;
  z-index: 5;
}

@supports (-moz-appearance: none) {
  #content > p:nth-of-type(5) {
    font-size: 126%;
  }
}

@supports (-webkit-touch-callout: none) {
  #content > p:nth-of-type(5) {
    margin-bottom: 0.03em; 
  }
}

.aqua {
  color: rgb(80 255 255 / 0.6);
}

#footer:before, #footer:after { content: "•"; }

#footer {
  grid-column: 1 / -1;
  grid-row: 4;
  align-self: end;
  justify-self: center;

  box-sizing: border-box;
  font-size: .86em;
  white-space: nowrap;
}

#footer-wide {
  
}

#footer-narrow {
  display:none;
}

/* Normal or narrower: Show icons with menu item texts with icons and bring entries to the right edge */
@media only screen and (max-width: 746.9px) {
  #header {
    display: block;
  }

  #menu-container {
    width: 5.6em;
    margin-top: calc(10.4vh - 30px);
    padding-bottom: .2em;
    padding-top: .4em;

    font-size: 1.3em;
    position: fixed;
    right: 0;
    padding-right: 20px;

    border-radius: 1.2em 0;
    background: rgb(20 20 20 / .85);

    display: flex;
    flex-direction: column;
  }

  @supports (-moz-appearance: none) {
    #menu-container {
      width: 5.9em;
    }
  }

  #menu-container a {
    margin-left: 0.5em;
    padding-bottom: 0;
    margin-bottom: .2em;
    padding-right: 0;
    white-space: nowrap;
  }

  #menu-container a:before {
    position: relative;
    display: inline-block;
    text-align: right;
  }


  #menu-container a#blog:after  { content: ""; }
  #menu-container a#blog:before { content: "blog"; }
  #menu-container a#contact:before { content: "contact"; }
  #menu-container a#contact:after  { content: ""; }
  #menu-container a#youtube:before { content: "youtube"; }
  #menu-container a#youtube:after  { content: ""; }
  #menu-container a#linkedin:before { content: "linkedin"; }
  #menu-container a#linkedin:after  { content: ""; }

  .menu-icon {
    display: inline;
  }

  #content {
    grid-template-columns: 3.6em auto;
    justify-content: start;
    margin-right: 0;
  }
  
  @supports (-webkit-touch-callout: none) {
    #content {
      grid-template-columns: 3.9em auto; 
    }
  }
}

@media only screen and (max-height: 299.9px) {
  #main-container {
    grid-template-rows: auto 1fr auto minmax(auto, 2.2em);
  }
}

@media only screen and (min-width: 390px) and (max-width: 746.9px) and (max-height: 299.9px) {
  #menu-container {
    display: block;
    width: 11.3em;
    top: 50%;
    transform: translateY(-50%);
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 0.3em;
  }

  #menu-container a { 
    display: inline-block; 
    margin-top: 0.1em; 
    margin-bottom: 0.1em;
  }

  #menu-container a:before {
    width: 3em;
  }

  @supports (-moz-appearance: none) {
    #menu-container {
      width: 11.9em;

    }

    #menu-container a {
      /*position: relative;*/
      width: 5.2em;
      /*overflow-x: visible;*/
      /*text-align: left;*/
      /*margin-right: 0.3em;*/
    }

    #menu-container a:before {
      width: 3.4em;
    }
  }
}

@media only screen and (max-width: 389.9px) {
  #header {
    padding: 0;
  }

  #menu-container {
    left: 50%;
    transform: translateX(-50%);

    padding-top: 0.4em;
    margin-top: 0;
  }

  #logo-container {
    width: 100%;
  }
}

/* Hide content */
@media only screen and (max-width: 240px) {
  #content {
    display: none;
  }
}

/* Very narrow: Orient menu icons horizontally below the logo */
@media only screen and (max-width: 240px) {
  #main-container {
    grid-template-columns: 1fr;
  }

  #header {
    /*grid-column*/
  }

  #logo-container {
    display: block;
    width: 100%;
  }

  #logo-container img {
    min-width: unset;
    width: unset;
  }

  #logo-image-narrow {
    display: inline;
  }

  #logo-image-wide {
    display: none;
  }

  #footer:before, #footer:after { content: ""; }
  #footer-wide { display: none; }
  #footer-narrow { display: inline-block; }
}


/* ========= HOVER ANIMATIONS ========= */

/* Wide and larger: animate menu item texts and transparent backgrounds */
@media only screen and (min-width: 746.9px) and (hover: hover) {

  /* Menu item text color change and transparent background box appear with rounding corners */
  @keyframes menu-text-color-warp {
    to {
      background-color: rgb(60 60 60 / .4);
      border-radius: .4em;
      color: #a978ff;
    }
  }

  /* Prefix dot symbol color change */
  @keyframes menu-dot-color-warp {
    from {
      color: #a978ff;
    }

    to {
      color: #02feb6;
    }
  }

  /* Prefix dot symbol appear and move */
  @keyframes menu-dot-move {
    to {
      left: 0.5em;
      visibility: visible;
    }
  }

  #menu-container a:hover {
    animation-name: menu-text-color-warp;
    animation-duration: .7s;
  }
  
  #menu-container a:hover:before {
    animation:
      menu-dot-color-warp .5s linear .2s infinite alternate,
      menu-dot-move .5s linear .2s infinite alternate;
  }
}


/* Normal and narrower: Setup default icon animation properties */
@media only screen and (max-width: 746.9px) and (hover: hover) {

  /* Set icon scaling */
  @keyframes menu-icon-zoom {
    to {
      transform: scale(1.1, 1.1);
    }
  }

  /* Menu item text color change and transparent background box appear with rounding corners */
  @keyframes menu-text-color-warp {
    to {
      /*background-color: rgb(60 60 60 / .4) /*/
      /*border-radius: .4em;*/
      color: #a978ff;
    }
  }

  #menu-container a:hover {
    animation-name: menu-text-color-warp;
    animation-duration: .1s;
  }

  #menu-container a img.hover {
    animation-name: menu-icon-zoom;
    animation-duration: .1s;
  }
}

@media (hover: none) {
  #menu-container a:active {
    background-color: #383838;
    color: #a978ff; 
  }
}

@media only screen and (min-width:  400px) { #footer { font-size: 0.94em; } }
@media only screen and (min-width:  500px) { #footer { font-size: 0.98em; } }
@media only screen and (min-width:  600px) { #footer { font-size: 1.02em; } }
@media only screen and (min-width:  700px) { #footer { font-size: 1.06em; } }
@media only screen and (min-width:  800px) { #footer { font-size: 1.10em; } }
@media only screen and (min-width:  900px) { #footer { font-size: 1.14em; } }
@media only screen and (min-width: 1000px) { #footer { font-size: 1.18em; } }
@media only screen and (min-width: 1100px) { #footer { font-size: 1.22em; } }
@media only screen and (min-width: 1200px) { #footer { font-size: 1.26em; } }
@media only screen and (min-width: 1300px) { #footer { font-size: 1.30em; } }
@media only screen and (min-width: 1400px) { #footer { font-size: 1.34em; } }
@media only screen and (min-width: 1500px) { #footer { font-size: 1.38em; } }
@media only screen and (min-width: 1600px) { #footer { font-size: 1.42em; } }
@media only screen and (min-width: 1700px) { #footer { font-size: 1.46em; } }
@media only screen and (min-width: 1800px) { #footer { font-size: 1.50em; } }
@media only screen and (min-width: 1900px) { #footer { font-size: 1.54em; } }
@media only screen and (min-width: 2000px) { #footer { font-size: 1.58em; } }
@media only screen and (min-width: 2100px) { #footer { font-size: 1.62em; } }
@media only screen and (min-width: 2200px) { #footer { font-size: 1.66em; } }
@media only screen and (min-width: 2300px) { #footer { font-size: 1.70em; } }
@media only screen and (min-width: 2500px) { #footer { font-size: 1.74em; } }
@media only screen and (min-width: 2600px) { #footer { font-size: 1.78em; } }
@media only screen and (min-width: 2700px) { #footer { font-size: 1.82em; } }