/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html, body {
  touch-action: none;
  position: fixed;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
body {
  background: rgb(48, 100, 48);
}

body {
  height: 100%;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1200' height='800' preserveAspectRatio='none' viewBox='0 0 1200 800'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1037%26quot%3b)' fill='none'%3e%3crect width='1200' height='800' x='0' y='0' fill='rgba(48%2c 100%2c 48%2c 1)'%3e%3c/rect%3e%3cpath d='M659.4 266.87 a177 177 0 1 0 354 0 a177 177 0 1 0 -354 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M470.24 564.43 a172.14 172.14 0 1 0 344.28 0 a172.14 172.14 0 1 0 -344.28 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M465.022%2c607.128C520.061%2c606.037%2c582.177%2c601.817%2c609.717%2c554.151C637.266%2c506.469%2c613.947%2c448.084%2c583.377%2c402.28C556.604%2c362.165%2c513.216%2c339.19%2c465.022%2c337.352C412.914%2c335.365%2c359.713%2c349.812%2c329.93%2c392.616C295.517%2c442.075%2c277.934%2c509.104%2c310.043%2c560.089C340.878%2c609.052%2c407.17%2c608.274%2c465.022%2c607.128' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M656.347%2c560.86C736.737%2c558.062%2c788.593%2c483.554%2c825.21%2c411.933C857.889%2c348.014%2c871.682%2c273.005%2c835.095%2c211.24C799.104%2c150.483%2c726.946%2c125.268%2c656.347%2c126.868C588.765%2c128.4%2c527.552%2c162.106%2c491.101%2c219.035C451.232%2c281.304%2c433.635%2c357.874%2c465.816%2c424.443C502.253%2c499.817%2c572.679%2c563.772%2c656.347%2c560.86' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1041.93 62.24 a137.95 137.95 0 1 0 275.9 0 a137.95 137.95 0 1 0 -275.9 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M979.18 512.96 a189.63 189.63 0 1 0 379.26 0 a189.63 189.63 0 1 0 -379.26 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M404.937%2c822.664C462.431%2c824.889%2c525.24%2c817.261%2c556.844%2c769.181C591.004%2c717.213%2c587.582%2c647.788%2c554.506%2c595.124C523.301%2c545.44%2c463.595%2c528.562%2c404.937%2c527.314C343.411%2c526.005%2c274.616%2c535.176%2c243.925%2c588.517C213.284%2c641.771%2c237.299%2c707.539%2c272.112%2c758.165C302.003%2c801.633%2c352.223%2c820.624%2c404.937%2c822.664' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M395.588%2c354.209C460.373%2c354.461%2c524.288%2c332.76%2c560.658%2c279.147C602.075%2c218.095%2c624.79%2c136.644%2c585.573%2c74.156C547.847%2c14.043%2c466.439%2c11.998%2c395.588%2c16.122C333.621%2c19.729%2c273.194%2c41.544%2c240.402%2c94.247C205.715%2c149.996%2c199.075%2c221.491%2c232.73%2c277.869C265.667%2c333.044%2c331.33%2c353.959%2c395.588%2c354.209' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M-128.71 449.88 a173.41 173.41 0 1 0 346.82 0 a173.41 173.41 0 1 0 -346.82 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M41.672%2c304.782C78.899%2c304.081%2c109.365%2c279.575%2c129.038%2c247.962C150.153%2c214.032%2c165.863%2c171.966%2c145.852%2c137.373C125.86%2c102.813%2c81.536%2c94.711%2c41.672%2c96.932C6.049%2c98.917%2c-25.728%2c117.418%2c-44.171%2c147.959C-63.317%2c179.664%2c-69.369%2c218.874%2c-51.585%2c251.362C-33.149%2c285.042%2c3.283%2c305.505%2c41.672%2c304.782' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M232.961%2c831.384C261.994%2c831.859%2c293.126%2c824.645%2c307.746%2c799.557C322.441%2c774.34%2c313.001%2c743.866%2c298.83%2c718.351C284.116%2c691.858%2c263.225%2c666.49%2c232.961%2c664.906C200.37%2c663.2%2c169.339%2c681.984%2c153.961%2c710.77C139.346%2c738.126%2c145.301%2c771.235%2c162.295%2c797.18C177.663%2c820.644%2c204.916%2c830.926%2c232.961%2c831.384' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M775.52 343.42 a233.9 233.9 0 1 0 467.8 0 a233.9 233.9 0 1 0 -467.8 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M939.47 690.62 a231.29 231.29 0 1 0 462.58 0 a231.29 231.29 0 1 0 -462.58 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1112.137%2c454.288C1135.626%2c452.579%2c1159.157%2c445.045%2c1171.052%2c424.719C1183.055%2c404.209%2c1178.756%2c379.616%2c1168.334%2c358.259C1156.094%2c333.177%2c1140.032%2c304.869%2c1112.137%2c303.996C1083.396%2c303.097%2c1063.957%2c329.683%2c1049.502%2c354.541C1034.94%2c379.583%2c1020.825%2c409.997%2c1036.23%2c434.529C1051.132%2c458.261%2c1084.188%2c456.322%2c1112.137%2c454.288' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M315.79 65.25 a163.94 163.94 0 1 0 327.88 0 a163.94 163.94 0 1 0 -327.88 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M974.008%2c131.555C997.616%2c131.78%2c1023.632%2c125.767%2c1034.415%2c104.764C1044.658%2c84.812%2c1030.522%2c63.154%2c1019.006%2c43.908C1007.949%2c25.429%2c995.481%2c5.426%2c974.008%2c3.808C950.199%2c2.014%2c927.568%2c15.507%2c915.505%2c36.111C903.318%2c56.928%2c902.96%2c83.064%2c915.566%2c103.63C927.659%2c123.36%2c950.868%2c131.334%2c974.008%2c131.555' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M-67.24 459.09 a244.33 244.33 0 1 0 488.66 0 a244.33 244.33 0 1 0 -488.66 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M165.1 669.6 a163.05 163.05 0 1 0 326.1 0 a163.05 163.05 0 1 0 -326.1 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M473.81 696.26 a145.97 145.97 0 1 0 291.94 0 a145.97 145.97 0 1 0 -291.94 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M488.05 220.35 a198.02 198.02 0 1 0 396.04 0 a198.02 198.02 0 1 0 -396.04 0z' fill='rgba(32%2c 45%2c 32%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1037'%3e%3crect width='1200' height='800' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
}


#head {
  height: 640px;
  width: 480px;
  position: absolute;
  left: calc(50% - 240px);
  top:  calc(50% - 320px);
}
#head::after {
  background: url('../images/phil-eyes-open-transparent.png') 0 0 / 100% 100%;
  height: 640px;
  width: 480px;
  /* opacity: 0.3; */
  z-index: 2;
  position: absolute;
  left: calc(50% - 240px);
  top:  calc(50% - 320px);
  content: '';
}
#head.blinking::after {
  background-image: url('../images/phil-eyes-closed.png');
}

.eye {
  width: 40px;
  height: 40px;
  background: radial-gradient(farthest-side at 30% 35%, white, white 50%, #aaa);
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  z-index: -1;
  top: calc(640px / 2 - 640px * 0.1);
}
.iris {
  width: 20px;
  height: 20px;
  background: radial-gradient(
      black, black 40%, 
      green 40%, darkgreen);
  border-radius: 100%;
  display: inline-block;
  position: relative;
  top: 4px;
  left: 10px;
  z-index: -1;
}


.eye.left-eye {
  left: calc(240px / 2 + 240px * 0.74);
}
.eye.right-eye {
  left: calc(240px / 2 + 240px * 0.26);
}

nav {
  height: 100vh;
  display: flex;
}
#dock {
  margin: auto 0;
  border: 1px solid #888a;
  background: #6664;
  padding: 10px;
  border-radius: 20px;
  display: inline-flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 0 10px #0006;
}
#dock > a img {
  height: 72px;
  display: block;
}
#dock > a > .icon-bg {
  content: 'foo';
  display: block;
  background: linear-gradient(slategray, black);
  width: 65px;
  height: 65px;
  border-radius: 10px;
}