* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --blue-sapphire: #0F5C8C;
  --oxford-blue: #072A40;
  --davys-grey: #565958;
  --quick-silver: #9FA6A2;
  --smoky-black: #0D0D0D;
}

html {
  font-size: calc(100vw / 1920 * 10);
}

@media (max-width: 1024px) {
  html {
    font-size: calc(100vw / 1024 * 10);
  }
}

@media (max-width: 600px) {
  html {
    font-size: calc(100vw / 414 * 10);
  }
}

body {
  position: relative;
  overflow-x: clip;
  background: var(--smoky-black);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 430 862\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"none\"><rect x=\"0\" y=\"0\" height=\"100%\" width=\"100%\" fill=\"url(%23grad)\" opacity=\"0.20000000298023224\"/><defs><radialGradient id=\"grad\" gradientUnits=\"userSpaceOnUse\" cx=\"0\" cy=\"0\" r=\"10\" gradientTransform=\"matrix(-5.8446e-7 86.2 -50.299 -2.5921e-7 215 0.000001108)\"><stop stop-color=\"rgba(65,91,210,1)\" offset=\"0\"/><stop stop-color=\"rgba(65,91,210,0)\" offset=\"1\"/></radialGradient></defs></svg>");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input,
button,
textarea,
select {
  background: none;
  color: inherit;
  border: 0;
  padding: 0;
  font: inherit;
  outline: none;
  appearance: none;
}

button,
[role="button"] {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  color: white;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
}

.header {
  position: absolute;
  left: 19.5px;
  top: 19px;
  display: flex;
  align-items: center;
}

.header svg:last-of-type {
  margin-left: 7px;
}

.header svg, .header img {
  width: auto;
  height: 44px;
  object-fit: contain;
}

.header img {
  margin-left: 0px;
  width: 0px;
  cursor: pointer;
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header img.expanding {
  width: 44px;
  margin-left: 7px;
}

.header img.shake {
  animation: shake 0.2s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(3px); }
  75% { transform: translateX(-3px); }
}

.main-link {
  position: absolute;
  left: 20px;
  width: 390px;
  height: 110px;
  background: var(--quick-silver);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.main-link:hover {
  background: #e9e9e9;
  transform: translateY(-2px);
}

.link-website {
  top: 116px;
}

.link-youtube {
  top: 241px;
}

.link-blog {
  top: 366px;
  height: 111px;
}

.main-link-text {
  font-size: 16px;
  color: var(--smoky-black);
  letter-spacing: 0.8px;
  line-height: 16px;
  text-align: center;
  font-weight: bold;
}

.social-row {
  position: absolute;
  left: 20px;
  top: 492px;
  display: flex;
  gap: 15px;
}

.social-link {
  width: 120px;
  height: 100px;
  background: var(--quick-silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: #e9e9e9;
  transform: translateY(-2px);
}

.social-link:nth-child(2) {
  width: 120px;
}

.social-link:nth-child(3) {
  width: 120px;
}

.social-link-text {
  font-size: 8px;
  color: var(--smoky-black);
  letter-spacing: 0.4px;
  line-height: 16px;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
}

.link-contact {
  top: 607px;
}

.footer {
  position: absolute;
  left: 20px;
  top: 742px;
  width: 320px;
}

.footer-text {
  font-size: 16px;
  color: var(--quick-silver);
  letter-spacing: 0.8px;
  line-height: 16px;
  margin-bottom: 8px;
}

.footer-subtext {
  font-size: 16px;
  color: var(--quick-silver);
  letter-spacing: 0.8px;
  line-height: 16px;
  margin: 0;
}

.username {
  font-size: 12px;
  color: white;
  letter-spacing: 0.6px;
  line-height: 20px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .container {
    height: 100vh;
    padding: 0 10px;
  }

  .header {
    left: 10px;
  }

  .main-link,
  .social-row,
  .footer {
    left: 10px;
  }

  .main-link {
    width: calc(100vw - 20px);
  }

  .social-row {
    width: calc(100vw - 20px);
  }

  .social-link {
    flex: 1;
    min-width: 0;
  }

  .social-link:nth-child(2),
  .social-link:nth-child(3) {
    width: auto;
  }
}