:root {
  --primary: #880000;
  --accent: #aa0000;
  --secondary: #5a5a5a;
}

@font-face {
  font-family: "tektur";
  src: url(/assets/fonts/tektur.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "roboto";
  src: url(/assets/fonts/roboto.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "openSans";
  src: url(/assets/fonts/openSans.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "inter";
  src: url(/assets/fonts/inter.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "raleway";
  src: url(/assets/fonts/raleway.ttf);
  font-weight: normal;
  font-style: normal;
}
.metal {
  background: linear-gradient(135deg, #444444, #5a5a5a, #444444);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.15), 0 2px 5px rgba(0, 0, 0, 0.3);
}

.metal-cold {
  background: linear-gradient(45deg, #333333, #555a6d, #333333);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1), 0 0 10px rgba(102, 153, 204, 0.3);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "openSans";
}

html, body {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

a:hover {
  color: red !important;
}

.mobile-shown {
  display: none !important;
}

.tablet-shown {
  display: none !important;
}

@media (max-width: 768px) {
  .tablet-hidden {
    display: none !important;
  }
  .tablet-shown {
    display: flex !important;
  }
}
@media (max-width: 430px) {
  .mobile-hidden {
    display: none !important;
  }
  .mobile-shown {
    display: flex !important;
  }
}