/* ------------- HERO PAGE ---------- */ h1, h2 { margin: 0; padding: 0; cursor: default; } h2 { font-size: 1.5rem; margin-bottom: 4rem; color: #ffffffbc; } h1 a { font-family: Yellowtail, sans-serif; color: white; text-decoration: none; display: inline-block; -webkit-mask-image: linear-gradient( -75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70% ); -webkit-mask-size: 200%; animation: shine 3s linear infinite; cursor: default; width: 100%; font-size: 4rem; } @keyframes shine { from { -webkit-mask-position: 150%; } to { -webkit-mask-position: -50%; } } .hero-container { height: 100vh; min-height: 50rem; overflow: hidden; } .hero { text-align: center; background: url(../img/herobg.webp); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .hero-logo { position: relative; display: flex; width: 90vw; height: 90vw; max-width: 35rem; max-height: 35rem; padding: 2rem; } .hero-logo-image { width: 100%; height: 100%; object-fit: cover; clip-path: polygon( 43.966% 2.098%, 43.966% 2.098%, 45.087% 1.411%, 46.265% 0.876%, 47.486% 0.494%, 48.736% 0.265%, 50% 0.188%, 51.264% 0.265%, 52.514% 0.494%, 53.735% 0.876%, 54.913% 1.411%, 56.034% 2.098%, 56.034% 2.098%, 56.034% 2.098%, 56.751% 2.56%, 57.498% 2.96%, 58.271% 3.297%, 59.066% 3.569%, 59.879% 3.777%, 60.706% 3.92%, 61.542% 3.995%, 62.385% 4.004%, 63.229% 3.944%, 64.072% 3.815%, 64.072% 3.815%, 64.072% 3.815%, 65.374% 3.645%, 66.666% 3.638%, 67.936% 3.788%, 69.171% 4.089%, 70.357% 4.536%, 71.481% 5.122%, 72.53% 5.842%, 73.491% 6.691%, 74.351% 7.661%, 75.096% 8.747%, 75.096% 8.747%, 75.096% 8.747%, 75.564% 9.462%, 76.085% 10.132%, 76.655% 10.756%, 77.271% 11.33%, 77.929% 11.852%, 78.627% 12.32%, 79.36% 12.731%, 80.127% 13.083%, 80.922% 13.373%, 81.744% 13.6%, 81.744% 13.6%, 81.744% 13.6%, 83.002% 13.976%, 84.186% 14.498%, 85.286% 15.154%, 86.292% 15.934%, 87.194% 16.827%, 87.984% 17.822%, 88.65% 18.909%, 89.185% 20.076%, 89.578% 21.314%, 89.819% 22.61%, 89.819% 22.61%, 89.819% 22.61%, 89.957% 23.455%, 90.161% 24.281%, 90.43% 25.083%, 90.76% 25.859%, 91.15% 26.605%, 91.598% 27.317%, 92.102% 27.993%, 92.659% 28.627%, 93.268% 29.218%, 93.927% 29.761%, 93.927% 29.761%, 93.927% 29.761%, 94.925% 30.619%, 95.795% 31.579%, 96.534% 32.628%, 97.137% 33.752%, 97.6% 34.936%, 97.918% 36.168%, 98.088% 37.433%, 98.103% 38.718%, 97.961% 40.009%, 97.657% 41.292%, 97.657% 41.292%, 97.657% 41.292%, 97.441% 42.121%, 97.294% 42.958%, 97.214% 43.801%, 97.201% 44.645%, 97.256% 45.486%, 97.377% 46.32%, 97.563% 47.143%, 97.816% 47.95%, 98.133% 48.739%, 98.516% 49.504%, 98.516% 49.504%, 98.516% 49.504%, 99.079% 50.695%, 99.485% 51.928%, 99.736% 53.189%, 99.832% 54.461%, 99.776% 55.733%, 99.568% 56.988%, 99.21% 58.213%, 98.704% 59.393%, 98.052% 60.515%, 97.254% 61.562%, 97.254% 61.562%, 97.254% 61.562%, 96.722% 62.231%, 96.248% 62.936%, 95.834% 63.673%, 95.481% 64.439%, 95.19% 65.229%, 94.963% 66.041%, 94.801% 66.869%, 94.704% 67.71%, 94.675% 68.56%, 94.715% 69.415%, 94.715% 69.415%, 94.715% 69.415%, 94.747% 70.734%, 94.619% 72.026%, 94.338% 73.28%, 93.911% 74.482%, 93.344% 75.62%, 92.646% 76.682%, 91.824% 77.655%, 90.884% 78.527%, 89.834% 79.284%, 88.681% 79.915%, 88.681% 79.915%, 88.681% 79.915%, 87.924% 80.309%, 87.206% 80.759%, 86.529% 81.263%, 85.897% 81.819%, 85.311% 82.422%, 84.775% 83.07%, 84.292% 83.76%, 83.863% 84.489%, 83.493% 85.254%, 83.182% 86.051%, 83.182% 86.051%, 83.182% 86.051%, 82.678% 87.269%, 82.038% 88.398%, 81.274% 89.428%, 80.397% 90.352%, 79.418% 91.16%, 78.351% 91.845%, 77.206% 92.398%, 75.994% 92.81%, 74.728% 93.073%, 73.42% 93.178%, 73.42% 93.178%, 73.42% 93.178%, 72.569% 93.228%, 71.731% 93.346%, 70.908% 93.53%, 70.106% 93.779%, 69.326% 94.091%, 68.574% 94.464%, 67.853% 94.897%, 67.167% 95.388%, 66.519% 95.935%, 65.913% 96.536%, 65.913% 96.536%, 65.913% 96.536%, 64.959% 97.443%, 63.917% 98.212%, 62.802% 98.841%, 61.627% 99.326%, 60.406% 99.665%, 59.153% 99.855%, 57.884% 99.892%, 56.61% 99.773%, 55.347% 99.496%, 54.109% 99.057%, 54.109% 99.057%, 54.109% 99.057%, 53.311% 98.755%, 52.498% 98.52%, 51.672% 98.353%, 50.838% 98.252%, 50% 98.218%, 49.162% 98.252%, 48.328% 98.353%, 47.502% 98.52%, 46.689% 98.755%, 45.891% 99.057%, 45.891% 99.057%, 45.891% 99.057%, 44.653% 99.496%, 43.39% 99.773%, 42.116% 99.892%, 40.847% 99.855%, 39.594% 99.665%, 38.373% 99.326%, 37.198% 98.841%, 36.083% 98.212%, 35.041% 97.443%, 34.087% 96.536%, 34.087% 96.536%, 34.087% 96.536%, 33.481% 95.935%, 32.833% 95.388%, 32.147% 94.897%, 31.426% 94.464%, 30.674% 94.091%, 29.894% 93.779%, 29.092% 93.53%, 28.269% 93.346%, 27.431% 93.228%, 26.58% 93.178%, 26.58% 93.178%, 26.58% 93.178%, 25.272% 93.073%, 24.006% 92.81%, 22.794% 92.398%, 21.649% 91.845%, 20.582% 91.16%, 19.603% 90.352%, 18.726% 89.428%, 17.962% 88.398%, 17.322% 87.269%, 16.817% 86.051%, 16.817% 86.051%, 16.817% 86.051%, 16.507% 85.254%, 16.137% 84.489%, 15.708% 83.76%, 15.225% 83.07%, 14.689% 82.422%, 14.103% 81.819%, 13.471% 81.263%, 12.794% 80.759%, 12.076% 80.309%, 11.319% 79.915%, 11.319% 79.915%, 11.319% 79.915%, 10.166% 79.284%, 9.116% 78.527%, 8.176% 77.655%, 7.354% 76.682%, 6.656% 75.62%, 6.089% 74.482%, 5.662% 73.28%, 5.381% 72.026%, 5.253% 70.734%, 5.285% 69.415%, 5.285% 69.415%, 5.285% 69.415%, 5.325% 68.56%, 5.296% 67.71%, 5.199% 66.869%, 5.037% 66.041%, 4.81% 65.229%, 4.519% 64.439%, 4.166% 63.673%, 3.752% 62.936%, 3.278% 62.231%, 2.746% 61.562%, 2.746% 61.562%, 2.746% 61.562%, 1.948% 60.515%, 1.296% 59.393%, 0.79% 58.213%, 0.432% 56.988%, 0.225% 55.733%, 0.168% 54.461%, 0.264% 53.189%, 0.515% 51.928%, 0.921% 50.695%, 1.484% 49.504%, 1.484% 49.504%, 1.484% 49.504%, 1.867% 48.739%, 2.184% 47.95%, 2.437% 47.143%, 2.624% 46.32%, 2.744% 45.486%, 2.799% 44.645%, 2.786% 43.801%, 2.706% 42.958%, 2.559% 42.121%, 2.343% 41.292%, 2.343% 41.292%, 2.343% 41.292%, 2.039% 40.009%, 1.897% 38.718%, 1.912% 37.433%, 2.082% 36.168%, 2.4% 34.936%, 2.863% 33.752%, 3.466% 32.628%, 4.205% 31.579%, 5.075% 30.619%, 6.072% 29.761%, 6.072% 29.761%, 6.072% 29.761%, 6.731% 29.218%, 7.341% 28.627%, 7.898% 27.993%, 8.402% 27.317%, 8.85% 26.605%, 9.24% 25.859%, 9.57% 25.083%, 9.839% 24.281%, 10.043% 23.455%, 10.181% 22.61%, 10.181% 22.61%, 10.181% 22.61%, 10.422% 21.314%, 10.815% 20.076%, 11.35% 18.909%, 12.016% 17.822%, 12.806% 16.827%, 13.708% 15.934%, 14.714% 15.154%, 15.814% 14.498%, 16.998% 13.976%, 18.256% 13.6%, 18.256% 13.6%, 18.256% 13.6%, 19.078% 13.373%, 19.873% 13.083%, 20.64% 12.731%, 21.373% 12.32%, 22.071% 11.852%, 22.729% 11.33%, 23.345% 10.756%, 23.915% 10.132%, 24.436% 9.462%, 24.904% 8.747%, 24.904% 8.747%, 24.904% 8.747%, 25.649% 7.661%, 26.509% 6.691%, 27.47% 5.842%, 28.519% 5.122%, 29.643% 4.536%, 30.829% 4.089%, 32.064% 3.788%, 33.334% 3.638%, 34.626% 3.645%, 35.928% 3.815%, 35.928% 3.815%, 35.928% 3.815%, 36.771% 3.944%, 37.615% 4.004%, 38.458% 3.995%, 39.294% 3.92%, 40.121% 3.777%, 40.934% 3.569%, 41.729% 3.297%, 42.502% 2.96%, 43.249% 2.56%, 43.966% 2.098%, 43.966% 2.098% ); animation: clipRotateAnim 25s linear infinite; } .hero-logo-image:before { content: ""; position: absolute; inset: -10%; background-image: url(../img/pfp.webp); background-position: center; background-repeat: no-repeat; background-size: cover; animation: inherit; animation-direction: reverse; } @keyframes clipRotateAnim { to { transform: rotate(360deg); } } .hero-logo-icon { width: 30%; height: 30%; background-color: #0000003f; bottom: 0; right: 0; position: absolute; clip-path: polygon( 41.954% 4.828%, 41.954% 4.828%, 43.343% 5.418%, 44.772% 5.885%, 46.232% 6.229%, 47.714% 6.449%, 49.207% 6.542%, 50.701% 6.508%, 52.186% 6.346%, 53.654% 6.054%, 55.092% 5.632%, 56.493% 5.077%, 56.493% 5.077%, 58.251% 4.305%, 60.072% 3.554%, 61.944% 2.838%, 63.858% 2.171%, 65.801% 1.567%, 67.764% 1.041%, 69.736% 0.607%, 71.705% 0.279%, 73.661% 0.072%, 75.594% 0%, 75.594% 0%, 77.575% 0.081%, 79.512% 0.319%, 81.398% 0.708%, 83.226% 1.243%, 84.991% 1.915%, 86.686% 2.72%, 88.304% 3.65%, 89.84% 4.7%, 91.288% 5.863%, 92.639% 7.132%, 92.639% 7.132%, 93.933% 8.489%, 95.119% 9.943%, 96.189% 11.488%, 97.138% 13.119%, 97.959% 14.827%, 98.645% 16.608%, 99.19% 18.453%, 99.588% 20.358%, 99.831% 22.314%, 99.913% 24.316%, 99.913% 24.316%, 99.846% 26.11%, 99.654% 27.922%, 99.348% 29.743%, 98.941% 31.563%, 98.446% 33.374%, 97.875% 35.165%, 97.24% 36.928%, 96.555% 38.653%, 95.832% 40.332%, 95.082% 41.954%, 95.082% 41.954%, 94.493% 43.343%, 94.025% 44.772%, 93.681% 46.232%, 93.462% 47.714%, 93.368% 49.207%, 93.402% 50.701%, 93.564% 52.186%, 93.856% 53.654%, 94.279% 55.092%, 94.833% 56.493%, 94.833% 56.493%, 95.605% 58.252%, 96.357% 60.073%, 97.073% 61.947%, 97.741% 63.861%, 98.345% 65.805%, 98.871% 67.769%, 99.306% 69.742%, 99.634% 71.712%, 99.841% 73.669%, 99.913% 75.603%, 99.913% 75.603%, 99.829% 77.622%, 99.582% 79.596%, 99.177% 81.516%, 98.623% 83.376%, 97.925% 85.17%, 97.09% 86.89%, 96.125% 88.53%, 95.037% 90.084%, 93.832% 91.544%, 92.518% 92.903%, 92.518% 92.903%, 91.17% 94.152%, 89.729% 95.296%, 88.202% 96.328%, 86.593% 97.242%, 84.91% 98.033%, 83.159% 98.693%, 81.346% 99.218%, 79.476% 99.6%, 77.557% 99.834%, 75.594% 99.913%, 75.594% 99.913%, 73.661% 99.841%, 71.704% 99.635%, 69.735% 99.308%, 67.764% 98.874%, 65.801% 98.349%, 63.858% 97.746%, 61.945% 97.08%, 60.072% 96.364%, 58.251% 95.613%, 56.493% 94.842%, 56.493% 94.842%, 55.092% 94.287%, 53.654% 93.865%, 52.186% 93.573%, 50.701% 93.411%, 49.207% 93.377%, 47.714% 93.47%, 46.232% 93.69%, 44.772% 94.034%, 43.343% 94.501%, 41.954% 95.091%, 41.954% 95.091%, 40.331% 95.84%, 38.652% 96.563%, 36.926% 97.247%, 35.162% 97.881%, 33.37% 98.45%, 31.559% 98.944%, 29.738% 99.35%, 27.916% 99.655%, 26.103% 99.847%, 24.308% 99.913%, 24.308% 99.913%, 22.306% 99.831%, 20.35% 99.588%, 18.446% 99.19%, 16.601% 98.646%, 14.821% 97.96%, 13.112% 97.139%, 11.482% 96.19%, 9.937% 95.12%, 8.483% 93.936%, 7.127% 92.642%, 7.127% 92.642%, 5.858% 91.291%, 4.696% 89.844%, 3.647% 88.308%, 2.717% 86.69%, 1.913% 84.996%, 1.241% 83.231%, 0.708% 81.404%, 0.319% 79.519%, 0.081% 77.583%, 0% 75.603%, 0% 75.603%, 0.072% 73.668%, 0.278% 71.711%, 0.605% 69.741%, 1.038% 67.768%, 1.562% 65.805%, 2.165% 63.861%, 2.831% 61.947%, 3.546% 60.074%, 4.297% 58.252%, 5.068% 56.493%, 5.068% 56.493%, 5.623% 55.092%, 6.046% 53.654%, 6.338% 52.186%, 6.5% 50.701%, 6.533% 49.207%, 6.44% 47.714%, 6.221% 46.232%, 5.877% 44.772%, 5.409% 43.343%, 4.82% 41.954%, 4.82% 41.954%, 4.071% 40.332%, 3.348% 38.654%, 2.664% 36.928%, 2.031% 35.165%, 1.462% 33.374%, 0.969% 31.564%, 0.563% 29.744%, 0.259% 27.923%, 0.067% 26.111%, 0% 24.316%, 0% 24.316%, 0.079% 22.354%, 0.313% 20.435%, 0.695% 18.566%, 1.22% 16.753%, 1.88% 15.002%, 2.67% 13.319%, 3.584% 11.711%, 4.616% 10.184%, 5.759% 8.743%, 7.007% 7.395%, 7.007% 7.395%, 8.367% 6.081%, 9.827% 4.876%, 11.38% 3.788%, 13.02% 2.824%, 14.74% 1.989%, 16.534% 1.291%, 18.394% 0.736%, 20.314% 0.332%, 22.288% 0.084%, 24.308% 0%, 24.308% 0%, 26.103% 0.067%, 27.916% 0.259%, 29.737% 0.565%, 31.559% 0.971%, 33.37% 1.466%, 35.162% 2.036%, 36.926% 2.67%, 38.652% 3.355%, 40.331% 4.079%, 41.954% 4.828% ); animation: clipRotateAnim 60s linear infinite; } .hero-logo-icon:before { content: ""; position: absolute; inset: +10%; background-image: url(../img/dragon_logo.svg); background-position: center; background-repeat: no-repeat; background-size: cover; animation: inherit; animation-direction: reverse; } .hero-logo-icon-2 { width: 30%; height: 30%; background-color: #0000003f; bottom: 0; right: 0; position: absolute; clip-path: polygon( 41.954% 4.828%, 41.954% 4.828%, 43.343% 5.418%, 44.772% 5.885%, 46.232% 6.229%, 47.714% 6.449%, 49.207% 6.542%, 50.701% 6.508%, 52.186% 6.346%, 53.654% 6.054%, 55.092% 5.632%, 56.493% 5.077%, 56.493% 5.077%, 58.251% 4.305%, 60.072% 3.554%, 61.944% 2.838%, 63.858% 2.171%, 65.801% 1.567%, 67.764% 1.041%, 69.736% 0.607%, 71.705% 0.279%, 73.661% 0.072%, 75.594% 0%, 75.594% 0%, 77.575% 0.081%, 79.512% 0.319%, 81.398% 0.708%, 83.226% 1.243%, 84.991% 1.915%, 86.686% 2.72%, 88.304% 3.65%, 89.84% 4.7%, 91.288% 5.863%, 92.639% 7.132%, 92.639% 7.132%, 93.933% 8.489%, 95.119% 9.943%, 96.189% 11.488%, 97.138% 13.119%, 97.959% 14.827%, 98.645% 16.608%, 99.19% 18.453%, 99.588% 20.358%, 99.831% 22.314%, 99.913% 24.316%, 99.913% 24.316%, 99.846% 26.11%, 99.654% 27.922%, 99.348% 29.743%, 98.941% 31.563%, 98.446% 33.374%, 97.875% 35.165%, 97.24% 36.928%, 96.555% 38.653%, 95.832% 40.332%, 95.082% 41.954%, 95.082% 41.954%, 94.493% 43.343%, 94.025% 44.772%, 93.681% 46.232%, 93.462% 47.714%, 93.368% 49.207%, 93.402% 50.701%, 93.564% 52.186%, 93.856% 53.654%, 94.279% 55.092%, 94.833% 56.493%, 94.833% 56.493%, 95.605% 58.252%, 96.357% 60.073%, 97.073% 61.947%, 97.741% 63.861%, 98.345% 65.805%, 98.871% 67.769%, 99.306% 69.742%, 99.634% 71.712%, 99.841% 73.669%, 99.913% 75.603%, 99.913% 75.603%, 99.829% 77.622%, 99.582% 79.596%, 99.177% 81.516%, 98.623% 83.376%, 97.925% 85.17%, 97.09% 86.89%, 96.125% 88.53%, 95.037% 90.084%, 93.832% 91.544%, 92.518% 92.903%, 92.518% 92.903%, 91.17% 94.152%, 89.729% 95.296%, 88.202% 96.328%, 86.593% 97.242%, 84.91% 98.033%, 83.159% 98.693%, 81.346% 99.218%, 79.476% 99.6%, 77.557% 99.834%, 75.594% 99.913%, 75.594% 99.913%, 73.661% 99.841%, 71.704% 99.635%, 69.735% 99.308%, 67.764% 98.874%, 65.801% 98.349%, 63.858% 97.746%, 61.945% 97.08%, 60.072% 96.364%, 58.251% 95.613%, 56.493% 94.842%, 56.493% 94.842%, 55.092% 94.287%, 53.654% 93.865%, 52.186% 93.573%, 50.701% 93.411%, 49.207% 93.377%, 47.714% 93.47%, 46.232% 93.69%, 44.772% 94.034%, 43.343% 94.501%, 41.954% 95.091%, 41.954% 95.091%, 40.331% 95.84%, 38.652% 96.563%, 36.926% 97.247%, 35.162% 97.881%, 33.37% 98.45%, 31.559% 98.944%, 29.738% 99.35%, 27.916% 99.655%, 26.103% 99.847%, 24.308% 99.913%, 24.308% 99.913%, 22.306% 99.831%, 20.35% 99.588%, 18.446% 99.19%, 16.601% 98.646%, 14.821% 97.96%, 13.112% 97.139%, 11.482% 96.19%, 9.937% 95.12%, 8.483% 93.936%, 7.127% 92.642%, 7.127% 92.642%, 5.858% 91.291%, 4.696% 89.844%, 3.647% 88.308%, 2.717% 86.69%, 1.913% 84.996%, 1.241% 83.231%, 0.708% 81.404%, 0.319% 79.519%, 0.081% 77.583%, 0% 75.603%, 0% 75.603%, 0.072% 73.668%, 0.278% 71.711%, 0.605% 69.741%, 1.038% 67.768%, 1.562% 65.805%, 2.165% 63.861%, 2.831% 61.947%, 3.546% 60.074%, 4.297% 58.252%, 5.068% 56.493%, 5.068% 56.493%, 5.623% 55.092%, 6.046% 53.654%, 6.338% 52.186%, 6.5% 50.701%, 6.533% 49.207%, 6.44% 47.714%, 6.221% 46.232%, 5.877% 44.772%, 5.409% 43.343%, 4.82% 41.954%, 4.82% 41.954%, 4.071% 40.332%, 3.348% 38.654%, 2.664% 36.928%, 2.031% 35.165%, 1.462% 33.374%, 0.969% 31.564%, 0.563% 29.744%, 0.259% 27.923%, 0.067% 26.111%, 0% 24.316%, 0% 24.316%, 0.079% 22.354%, 0.313% 20.435%, 0.695% 18.566%, 1.22% 16.753%, 1.88% 15.002%, 2.67% 13.319%, 3.584% 11.711%, 4.616% 10.184%, 5.759% 8.743%, 7.007% 7.395%, 7.007% 7.395%, 8.367% 6.081%, 9.827% 4.876%, 11.38% 3.788%, 13.02% 2.824%, 14.74% 1.989%, 16.534% 1.291%, 18.394% 0.736%, 20.314% 0.332%, 22.288% 0.084%, 24.308% 0%, 24.308% 0%, 26.103% 0.067%, 27.916% 0.259%, 29.737% 0.565%, 31.559% 0.971%, 33.37% 1.466%, 35.162% 2.036%, 36.926% 2.67%, 38.652% 3.355%, 40.331% 4.079%, 41.954% 4.828% ); animation: clipRotateAnim 60s linear infinite; animation-direction: reverse; } .hero-text { width: 100%; } @media only screen and (min-width: 750px) { h1 a { font-size: 6rem; } h2 { font-size: 2rem; } }