@font-face {
  font-family: oxa-regular;
  src: url("/trinteencz/Oxanium-Regular.ttf") format('truetype');
}
@font-face {
  font-family: oxa-bold;
  src: url("/trinteencz/Oxanium-Bold.ttf") format('truetype');
}
@font-face {
  font-family: oxa-light;
  src: url("/trinteencz/Oxanium-Light.ttf") format('truetype');
}

:root {
  --black: #000000;
  --white: #FFFFFF;
  --green: #7EC242;
  --summary: #e9edea;
  --border: rgba(0, 230, 58, .18);

  --padding: 20px;
}

/*
  cursor:
*/
* {
  cursor: url("/trinteencz/cur/normal.cur"), auto;
}
p {
  cursor: url("/trinteencz/cur/text.cur"), auto;
}
a {
  cursor: url("/trinteencz/cur/Link.cur"), auto;
}

/*
  scrollbar:
*/
* {
    scrollbar-color: #7EC242 #000;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #7EC242;
    border-radius: 4px;
}

/*
  Lightbox2:
*/
.lightbox .lb-image {
  border: 4px solid var(--border) !important;
}
.lightbox .lb-container {
  background: var(--green) !important;
  border-radius: var(--padding) !important;
}
.lightbox img, 
.lightbox .lb-outerContainer {
  border-radius: var(--padding) !important;
}
.lightbox .lb-nav a.lb-prev,
.lightbox .lb-nav a.lb-next {
  cursor: url("/trinteencz/cur/Link.cur"), auto !important;
}

* {
  box-sizing: border-box;
  font-family: "oxa-regular", Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6, strong, b {
  font-family: "oxa-bold", Arial, Helvetica, sans-serif;
  margin: 0;
}

small, summary {
  font-family: "oxa-light", Arial, Helvetica, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
}

header, main, footer {
  display: flex;
  justify-content: center;
  align-content: center;
}

header .container,
main .container,
footer .container {
  width: 1366px;
}

/*
  header:
*/
header {
  position: sticky;
  z-index: 100;
  top:0;
  background: var(--black);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 80%, rgba(126, 194, 66, 0.8) 100%);
}
header .container {
  padding: var(--padding);
  display: flex;
  flex-direction: row;
  max-height: 100px;
  gap: var(--padding);
  border-bottom: 1px solid var(--border);
}
header .container .logo {
  display: flex;
  flex-direction: row;
  width: auto;
}
header .container .logo img {
  width: auto;
  height: 100%;
}
header .container .menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
}
header .container .menu-mobile {
  display: none;
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}
header .container .menu-mobile a {
  text-decoration: none;
  color: var(--white);
  font-family: "oxa-bold";
  font-size: 20px;
}
header .container .menu-mobile .menu-mobile-container {
  position: absolute;
  top:0;
  left: 0;
  background: var(--black);
  margin: var(--padding);
  border: 2px solid var(--green);
  width: calc(100% - (2*var(--padding)));
  display: none;
  flex-direction: column;
}
header .container .menu-mobile {
  display: none;
}
header .container .menu-mobile .open-menu,
header .container .menu-mobile .menu-mobile-container .menu-close {
  cursor: pointer;
}

header .container .menu-mobile .menu-mobile-container.active {
  display: flex;
}
header .container .menu-mobile .menu-mobile-container .titlebar {
  display: flex;
  flex-direction: row;
  background: var(--green);
  padding: var(--padding);
  color: var(--black)
}
header .container .menu-mobile .menu-mobile-container .titlebar h2 {
  width: 100%;
  text-transform: uppercase;
}
header .container .menu-mobile .menu-mobile-container .content ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
header .container .menu-mobile .menu-mobile-container .content ul li {
  padding: calc(var(--padding)/2);
}

header .container .menu ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  width: 100%;
  gap: calc(var(--padding)*1.5);
}
header .container .menu ul li a {
  text-align: center;
  padding: var(--padding);
  text-decoration: none;
  color: var(--green);
  font-family: "oxa-light";
}
header .container .menu ul li:hover a {
  background: var(--green);
  color: var(--black);
  font-family: "oxa-bold";
  border-radius: var(--padding);
  border: 1px solid var(--border);
}

/*
  main:
*/
main .container {
  padding: var(--padding);
}

main .container p {
  line-height: 30px;
}
main .container h1 {
  text-transform: uppercase;
  font-size: 40px;
  color: var(--green)
}
main .container .gal-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
main .container .gal-image img {
  max-width: 500px;
  object-fit: contain;
  border-radius: var(--padding);
  border: 2px solid var(--border);
}
main .container .gal-image img:hover {
  border: 2px solid var(--green);
}

main .container li::marker {
  color: var(--green);
  font-size: 1.2em;
}
main .container ul:not(.list-article) li,
main .container ol li {
  padding: calc(var(--padding)/3) 0;
}

main .container a,
main .container a:active, 
main .container a:hover {
  text-decoration: none;
  color: var(--green);
  width: auto;
}

/*
  homepage:
*/
main .container .hero {
  border-radius: var(--padding);
  width: 100%;
  min-height: 455px;
  padding: 50px 4vw 35px;
  display: grid;
  grid-template-columns: 44% 56%;
  overflow: hidden;
  background: radial-gradient(circle at 74% 50%, #00e63a1a, transparent 35%), linear-gradient(100deg, #000, #020604 45%, #031008);
}
main .container .hero h1,
main .container .hero h2 {
  font-size: clamp(43px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -4px;
  margin: 12px 0 18px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 0;
}
main .container .hero h2 {
  color: var(--green)
}
main .container h3 {
  color:var(--green);
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(126, 194, 66, 0.8) 100%);
  padding: var(--padding) 0;
  margin-top: calc(var(--padding)*3);
  border-radius: var(--padding);
}
main .container h2.title {
  font-size: 24px;
  margin: 5px 0 0;
}
main .container h1.title {
  font-size: 40px;
  margin: 5px 0 0;
  color: var(--white);
}
main .container h2.title::after {
    content: "";
    display: block;
    width: 37px;
    border-top: 3px solid var(--green);
    margin-top: 11px;
}
main .container h1.title::after {
    content: "";
    display: block;
    width: 37px;
    border-top: 3px solid var(--green);
    margin-top: 11px;
    margin-bottom: calc(var(--padding)*2);
}
main .container section {
  padding: var(--padding) 0;
}
main .container section .list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--padding);
  padding: var(--padding) 0;
}
main .container section .list article {
  border-radius: var(--padding);
  background: var(--border);
  border: 2px solid var(--border);
}
main .container section .list article:hover{
  border: 2px solid var(--green);
}
main .container section .list article img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--padding) var(--padding) 0 0;
}
main .container section .list article img.gearlist {
  object-fit: contain;
  background: var(--white);
  padding: var(--padding);
}
main .container section .list article .body {
  padding: var(--padding);
  display: flex;
  justify-content: center;
  align-items: center;
}
main .container section .list article:hover .body {
  color: var(--white);
}
main .container section .button-more {
  display: flex;
  justify-content: end;
  align-items: center;
}
main .container section .button-more a {
  padding: var(--padding);
  background: var(--border);
  border-radius: var(--padding);
  color: var(--white);
  font-family: "oxa-bold";
}
main .container section .button-more a:hover {
  color: var(--green);
}

main .container nav {
  margin: calc(var(--padding)*2) 0 0;
}
main .container nav ul.navbar.locations {
  border-top: 1px solid #1a1a1a;
  padding: var(--padding);
}
main .container nav ul.navbar {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
}
main .container nav ul.navbar.lang {
  gap: var(--padding);
}
main .container nav:has(ul.navbar.lang) {
  margin-bottom: var(--padding);
}
main .container nav ul.navbar li a.home {
  color:var(--white);
}
main .container nav ul.navbar li a span.delim {
  padding: 0 5px;
}
main .container nav ul.navbar li a span {
  font-family: "oxa-light" !important;
  color: var(--summary)
}

main .container ul.list-article {
  list-style: none;
  padding: 0;
  margin: 0;
}
main .container ul.list-article li a {
  color: var(--green);
  padding: var(--padding);
  border-radius: var(--padding);
  background: var(--border);
  margin: var(--padding) 0;
  border: 2px solid transparent;
  display: block;
  font-family: "oxa-bold";
}
main .container ul.list-article li:hover a {
  border: 2px solid var(--green);
  color: var(--white);
}

/*
  video:
*/
.embed_video {
  display: flex;
  justify-content: center;
  align-items: center;
}
.embed_video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 500px;
  border: 2px solid var(--border);
  border-radius: var(--padding);
}
.embed_video iframe:hover {
  border: 2px solid var(--green);
}

/*
  gallery:
*/
#gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--padding);
}
#gallery img {
  width: 100%;
  height: 100%;
  border-radius: var(--padding);
  border: 2px solid var(--border);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
#gallery img:hover {
  border: 2px solid var(--green);
}

/*
  codeblock:
*/
.codeblock {
  border: 1px solid var(--border);
  border-radius: var(--padding);
  padding: 0 var(--padding);
  background: var(--border);
  margin: var(--padding) 0;
}
.codeblock p {
  font-family: "oxa-light";
}

/*
  table:
*/
table {
  border-collapse: collapse;
  width: 100%;
}
table tr th,
table tr td {
  border: 1px solid var(--border);
  padding: var(--padding);
}
table tr:has(th) {
  background: var(--border);
  color: var(--green);
}

/*
  spoiler:
*/
#spoiler_main {
  width: 100%;
  border-radius: var(--padding);
  border: 1px solid var(--border);
  margin-bottom: var(--padding);
}
#spoiler_main .title {
  padding: var(--padding);
  background: var(--border);
  color: var(--green);
  border-radius: var(--padding);
  cursor: pointer;
}
#spoiler_main .content {
  padding: var(--padding);
  display: none;
}
#spoiler_main .content .text {
  line-height: calc(var(--padding)*2);
}

/*
  gearlist:
*/
.gearlist {
  display: flex;
  flex-direction: column;
  gap: var(--padding);
}
.gearlist .gearlist-item {
  padding: var(--padding);
  border-radius: var(--padding);
  border: 2px solid var(--border);
  background: var(--border);
  display: flex;
  flex-direction: row;
  gap: var(--padding);
}
.gearlist .gearlist-item .image img {
  border-radius: var(--padding);
  max-width: 150px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--white);
  padding: var(--padding);
}
.gearlist .gearlist-item h2 {
  color: var(--green);
}
.gearlist .gearlist-item:hover {
  border: 2px solid var(--green);
}
/*
  footer:
*/
footer .container {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: row;
  padding: var(--padding);
  gap: calc(2*var(--padding));
}
footer .container img {
  width: 64px;
  height: auto;
}
footer .container .box.logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
footer .container .box.social {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
footer .container .box.social div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding);
}
footer .container .box.social div a {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .container .box.social h2 {
  color: var(--green);
  text-transform:uppercase;
  font-size: 12px;
  text-align: center;
}
footer .container .box.social svg {
  fill: var(--white);
  width: 32px;
  aspect-ratio: 1/1;
}
footer .container .box.social svg:hover {
  fill: var(--green)
}
footer .container .box.banner {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
footer .container .box.banner .banner-container {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--padding);
}
footer .container .box.banner a img,
footer .container .box.banner div form {
  height: auto;
  aspect-ratio: 1/1;
  width: 80px;
  border-radius: var(--padding);
  border: 2px solid var(--border);
}
footer .container .box.banner a img:hover,
footer .container .box.banner div form:hover {
  border: 2px solid var(--green);
}

/*
  setup-view:
*/
.view-setup {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--padding);
  margin: 0 0 calc(var(--padding)*2) 0;
}
.view-setup img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--padding);
  border: 2px solid var(--border);
}
.view-setup img:hover {
  border: 2px solid var(--green);
}



/*
  mobile:
*/
@media(max-width:1000px){
  header .container .logo img.image-subtitle {
    display: none;
  }
  main .container section .list {
    grid-template-columns: repeat(2, 1fr);
  }
  #gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  footer .container .box.banner .banner-container {
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:600px){
  header .container {
    max-height: 100%;
  }
  header .container .logo img.image-logo {
    width: 100%;
    max-width: 64px;
    height: auto;
  }
  footer .container .box.banner {
    display: none;
  }
  footer .container .box.social {
    flex: 1;
  }
  main .container .gal-image img {
    width: 100%;
    height: auto;
  }
  header .container .menu {
    display: none;
  }
  header .container .logo img.image-logo {
    max-width: 32px;
  }
  header .container .menu-mobile {
    display: inherit;
  }
  main .container section .list {
    grid-template-columns: repeat(1, 1fr);
  }
  #gallery {
    grid-template-columns: repeat(1, 1fr);
  }
  .gearlist .gearlist-item {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .view-setup {
    grid-template-columns: repeat(1, 1fr);
  }
}