:root {
  --minWebsiteSize: 300px;
  --focusSize: 4px;
  --focusStyle: highlight solid var(--focusSize);
  --generalBackgroundColor: rgba(0, 0, 0, .2);
  --scrollBarWidth: 0px;
  --contentHeadingColor: #b6b6b6;
  --notificationBarButtonSize: clamp(1rem, .8rem + 1vw, 1.5rem);
  --notificationBarMarginSide: 5px;
}

@font-face {
  font-family: "rancho";
  src: url("../fonts/Rancho-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@-moz-document url-prefix() {
  * {
    scrollbar-width: auto;
    scrollbar-color: #6a6a6a #1e1e1e;
  }
}

::-webkit-scrollbar {
  width: auto;
}

::-webkit-scrollbar-track {
  background: #1e1e1e;
}

::-webkit-scrollbar-thumb {
  background-color: #6a6a6a;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #898989;
}

::-webkit-scrollbar-thumb:active {
  background-color: #a5a5a5;;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  background-color: rgb(32, 32, 32);
  background-image: url("../../images/background/background.jpg?v=1746056278");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overscroll-behavior: none;
}

body {
  display: flex;
  overflow-y: hidden;
  overscroll-behavior: none;
}

.notificationBar {
  display: flex;
  position: absolute;
  top: var(--headerFullHeight);
  width: fit-content;
  max-width: 100%;
  background-color: rgb(100, 210, 250);
  border-radius: 5px;
  padding: 2px 0;
  justify-self: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  align-items: center;
  font-size: clamp(.8rem, .5rem + 1vw, 1rem);
  z-index: 15;
}

.notificationBarHidden {
  display: none !important;
}

.notificationBar > p {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0 10px;
  gap: 5px;
}

.notificationBar > p > a {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  padding: 0 5px 0 0;
  cursor: pointer;
}

.notificationBar > p > a:focus-visible {
  outline: var(--focusStyle);
}

a:link {
  color: blue;
  text-decoration: underline;
}

a:visited {
  color: purple;
  text-decoration: underline;
}

.notificationBarSuccess {
  background-color: rgb(144, 249, 144);
}

.notificationBarError {
  background-color: rgb(255, 158, 164);
}

.notificationBar > button {
  background-color: #83838300;
  border: none;
  width: fit-content;
  height: fit-content;
  margin: 0 var(--notificationBarMarginSide) 0 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--notificationBarButtonSize);
  cursor: pointer;
}

.notificationBar > button:focus-visible {
  outline: var(--focusStyle);
}

#fullPageContent {
  height: 100dvh;
  min-width: 100dvw;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /*display: flex;
  flex-direction: column;*/
  overflow-x: auto;
  overflow-y: scroll;
  overscroll-behavior: none;
  position: relative;
}

.noScroll {
  overflow-y: auto;
  padding: 0;
}

#pageContentContainer {
  grid-row: 2;
  max-width: 100dvw;
  width: 100%;
  min-width: var(--minWebsiteSize);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 30px;
  box-sizing: border-box;
  gap: 30px;
}

form button:focus-visible {
  outline: var(--focusStyle);
}

.pageSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.contentContainer {
  display: flex;
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  flex-direction: column;
  color: #999999;
  padding: 10px 0 0 0;
  border-radius: 10px;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
}

.contentHeading {
  display: flex;
  color: var(--contentHeadingColor);
  width: fit-content;
  justify-content: center;
  align-items: center;
  /*padding: 70px 0 30px 0;*/
  padding: 70px 0 10px 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.2rem, .7rem + 1.5vw, 2.5rem);
  font-weight: 700;
  box-sizing: border-box;
  position: relative;
}

.contentHeading::after {
  content: "";
  height: 2px;
  min-width: 100%;
  width: 70vw;
  position: absolute;
  bottom: 0;
  justify-self: center;
  align-self: center;
  background-color: var(--contentHeadingColor);
}

.interiorContent {
  margin: 70px 170px;
}

.text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.8rem, .6rem + 1vw, 1.2rem);
  text-align: justify;
  padding: 10px;
  box-sizing: border-box;
  line-height: 1.5;
}

#skiplinksContainer {
  z-index: 9;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  background-color: rgba(30, 30, 30, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-right: #000 solid 1px;
  border-bottom: #000 solid 1px;;
  box-sizing: border-box;
  transition: transform 0.1s;
  transform: translateX(-100%);
  border-radius: 0 0 5px 0;
}

#skiplinksContainer:focus-within {
  transform: translateX(0%);
}


.skiplink {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: rgb(60, 60, 60);
  border-radius: 5px;
  border: #000 solid 1px;
  text-decoration: none;
  color: #cecece;
  font-size: 1rem;
  transition: filter .2s;
  flex: 1;
  flex-wrap: wrap;
  width: 100%;
  font-size: clamp(1rem, .7rem + 1vw, 2rem);
}

.skiplink:link {
  color: #cecece;
  text-decoration: none !important;
}

.skiplink:visited {
  color: #cecece;
  text-decoration: none !important;
}

.skiplink:hover {
  filter: brightness(1.2);
}

.skiplink:active {
  filter: brightness(1.5);
}

.skiplink:focus-visible {
  outline: var(--focusStyle);
}