@import '_variables.css';

:root {
  --main-color-bg: var(--app-main-color-bg);
  --main-color: var(--app-main-color);
  --navbar-color-bg: var(--app-menu-color-bg);
  --navbar-nav-item-color: var(--app-menu-color);
  --navbar-nav-item-color-bg: var(--app-menu-color-bg);
  --navbar-nav-item-color-bg-active: var(--app-menu-color-bg-active);
  --navbar-nav-item-color-active: var(--app-menu-color-active);

  /* --navbar-item-color: rgba(0,0,0,.87); */
  /* --navbar-item-color-inverted: rgba(255,255,255,.9); */

  --navbar-height: var(--app-navbar-height);
  --navbar-height-min: var(--app-navbar-height-min);
  --navbar-margin: var(--app-navbar-margin);

  --navbar-shadow: var(--app-element-shadow);

  --app-color-bg: var(--app-color-grey-light);
  --app-color-anchor-hover: var(--app-color-main-medium);

  --default-margin: var(--app-margin-1em);

  --app-font-default: var(--app-font-source), var(--app-font-sansserif);
}

html {
  font-family: var(--app-font-default);
  font-size: var(--app-font-size-large);
  background-color: var(--main-color-bg);
  color: var(--app-main-color);
}

@media only screen and (max-width: 767px) {
  html {
    font-size: var(--app-font-size-medium);
  }
}

/* View container */
.appContainerLayout {
  display: flex;
  flex-direction: column;
  /* align-items: stretch; */
  /* background-color: var(--app-color-bg); */
}

.appContainerTopMenu {
  position: sticky;
  top: 0;
  z-index: 50;
  border-radius: 0 !important;
  height: var(--app-navbar-height);
  margin: 0 !important;
  display: flex;
  flex: 1 0 auto;
  align-self: center;
}

.appContainerSideBar {
  flex: 0 0 280px;
  /* width: 280px !important; */

  max-width: '90%';

  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: auto !important;

  overflow: auto;

  z-index: 60;

  border-radius: 0 !important;
}

.appContainerMainContent {
  flex: auto;
  display: flex;
  flex-direction: column;
  /* width: calc(100vw - 280px - var(scrollbar-width)) !important; */
  /* position: absolute;
  right: 0; */
}

#topMenuDynamicArea {
  flex: 0 1 100%;
  display: flex;
  height: inherit;
}

a, .anchor  {
  color: black;
  text-decoration: underline;
}

a:hover, .anchor:hover {
  color: var(--app-color-anchor-hover);
  text-decoration: underline;
  /* font-weight: bold; */
}

strong {
  color: var(--app-color-main-light);
  font-weight: bold;
}

.contentContainer {
  background-color: white;
  /* position: relative; */
}

.contentContainer.bordered {
  border-radius: 4px;
  border: 1 solid rgba(34,36,38,.15);
}

.contentContainer.padding {
  padding: 1em;
}

.contentContainer.margin {
  margin: var(--default-margin);
}

.margin {
  margin: var(--default-margin);
}

.marginX {
  margin-left: var(--default-margin);
  margin-right: var(--default-margin);
}

.marginY {
  margin-top: var(--default-margin);
  margin-bottom: var(--default-margin);
}

.boxContainer {
  margin: var(--default-margin);
  display: flex;
  flex-direction: column;
  /* align-items: stretch; */
  /* justify-items: stretch; */
  flex: 1;

  /* --- Both max-height and overflow are needed for when limiting the size of the container. */
  /* --- Alternatively overflow can be set to auto if scrollbars are needed. */
  /* max-height: 300px; */
  overflow: hidden;
}

.boxContainer div {
  padding: var(--default-margin);
  background-color: #170303;
  border-left: 1px solid #FF9C00;
  border-right: 1px solid #FF9C00;
}

.boxContainer div:first-child {
  border-top: 1px solid #FF9C00;
  border-top-left-radius: 0.4em;
  border-top-right-radius: 0.4em;
}

.boxContainer div:last-child {
  border-bottom: 1px solid #FF9C00;
  border-bottom-left-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
}

.boxContainer .header {
  border-bottom: 2px solid  #FF9C00;
  background-color: #FF9C00;
}

.boxContainer .footer {
  border-top: 2px solid #221103;
  /* background-color: #221103; */
}

.boxContainer .content {
  height: 100%;
}

.menu {
  /* background-color: var(--navbar-color-bg); */
  color: var(--navbar-nav-item-color);
}

/* Top navigation menu height (also shadow) */
.menu.top {
  z-index: 50;
  position: sticky;
  top: 0;
  height: var(--navbar-height);
  box-shadow: var(--navbar-shadow) !important;
  display: flex;
  align-items: center;
  justify-items: center;
}

.menu.top.minimized {
  height: var(--navbar-height-min);
}

.menu.top div {
  flex: 1;
  display: flex;
  align-self: normal;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.menu.top div:hover, .menu.top div:active {
  /* box-shadow: 0 -4px 0 0 inset var(--navbar-nav-item-color); */
  background-color: var(--navbar-nav-item-color);
  background: linear-gradient(0deg, var(--navbar-nav-item-color) 0%, #17202730 90%);
  color: #000;
  font-weight: 950;
  cursor: pointer;
}

.menu.top div:visited, .menu.top div:focus {
  /* box-shadow: 0 -4px 0 0 inset var(--navbar-nav-item-color); */
  background-color: var(--navbar-nav-item-color);
  background: unset;
  font-weight: unset;
  cursor: pointer;
}

.menu.top div: {
  /* box-shadow: 0 -4px 0 0 inset var(--navbar-nav-item-color); */
  background-color: var(--navbar-nav-item-color);
  background: linear-gradient(0deg, var(--navbar-nav-item-color) 0%, #17202730 90%);
  color: #000;
  font-weight: 950;
  cursor: pointer;
}

/* Calculate the top navigation menu image height based on navbar-height */
.menu.top .image {
  /* The 2em is to compensate for the semantic ui padding for .item inside which the image resides. */
  max-height: calc(var(--navbar-height) - 2em) !important;
}

.ui.vertical.menu .item  {
  display: flex;
  align-items: center;
}

.ui.vertical.menu .item>i.icon,
.ui.vertical.menu .item>i.icons {
  float: unset;
  margin: 0 .5em 0 0;
}

.ui.vertical.menu .item>i.notification {
  align-self: center;
  margin: 0 0 0 auto;
}

/* Only the left sidebar */
.left.sidebar {
  box-shadow: var(--navbar-shadow) !important;
}

.sidebarHeader {
  background-color: var(--app-color-main-medium);
  color: white;
}

/* Left sidebar divider */
.left .divider {
  height: 2em !important;
  border-top: 0px; /* 1px solid rgba(255, 255, 255, 0.1) !important; */
  border-bottom: 0px; /* 1px solid rgba(255, 255, 255, 0.1) !important; */
}

/* Fill svg colors (useful for mdi icons) */
.menu svg {
  /* fill: var(--navbar-item-color); */
}
.inverted.menu svg {
  /* fill: var(--navbar-item-color-inverted); */
}

/* --- Input placeholder overrides BEGIN --- */

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* color: var(--app-color-grey-dark); */
  font-style: italic !important;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  /* color: var(--app-color-grey-dark); */
  font-style: italic !important;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  /* color: var(--app-color-grey-dark); */
  font-style: italic !important;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* color: var(--app-color-grey-dark); */
  font-style: italic !important;
}

/* --- Input placeholder overrides END --- */

/* --- Grid BEGIN -- */

.grid {
  /* margin-top: -1rem;
  margin-bottom: -1rem;
  margin-left: -1rem;
  margin-right: -1rem; */

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  /* padding: 0; */
}

@media only screen and (max-width: 767px) {
  .grid>.row>.column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .stackable.grid {
    width: auto;
    margin-left: 0!important;
    margin-right: 0!important;
    margin-top: 0!important;
    margin-bottom: 0!important;
  }

  .stackable.grid>.column:not(.row) {
    width: 100%!important;
    margin: 0 0!important;
    box-shadow: none!important;
    /* padding: 1rem 1rem!important; */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.grid>.column:only-child, .grid>.row>.column:only-child {
  width: 100%;
}

.grid>.row {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: inherit;
  align-items: stretch;
  width: 100%!important;
  padding: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

[class*="equal width"].grid>.column:not(.row), [class*="equal width"].grid>.row>.column {
  /* display: inline-block; */
  flex-grow: 1;
}

[class*="two column"].grid>.column:not(.row), [class*="two column"].grid>.row>.column {
  width: 50%;
}

[class*="three column"].grid>.column:not(.row), [class*="three column"].grid>.row>.column {
  width: 33.33333333%;
}

[class*="four column"].grid>.column:not(.row), [class*="four column"].grid>.row>.column {
  width: 25%;
}

[class*="five column"].grid>.column:not(.row), [class*="five column"].grid>.row>.column {
  width: 20%;
}

[class*="six column"].grid>.column:not(.row), [class*="six column"].grid>.row>.column {
  width: 16.66666667%;
}

[class*="seven column"].grid>.column:not(.row), [class*="seven column"].grid>.row>.column {
  width: 14.28571429%;
}

[class*="eight column"].grid>.column:not(.row), [class*="eight column"].grid>.row>.column {
  width: 12.5%;
}

[class*="nine column"].grid>.column:not(.row), [class*="nine column"].grid>.row>.column {
  width: 11.11111111%;
}

[class*="ten column"].grid>.column:not(.row), [class*="ten column"].grid>.row>.column {
  width: 10%;
}

[class*="eleven column"].grid>.column:not(.row), [class*="eleven column"].grid>.row>.column {
  width: 9.09090909%;
}

[class*="twelve column"].grid>.column:not(.row), [class*="twelve column"].grid>.row>.column {
  width: 8.33333333%;
}

[class*="thirteen column"].grid>.column:not(.row), [class*="thirteen column"].grid>.row>.column {
  width: 7.69230769%;
}

[class*="fourteen column"].grid>.column:not(.row), [class*="fourteen column"].grid>.row>.column {
  width: 7.14285714%;
}

[class*="fifteen column"].grid>.column:not(.row), [class*="fifteen column"].grid>.row>.column {
  width: 6.66666667%;
}

[class*="sixteen column"].grid>.column:not(.row), [class*="sixteen column"].grid>.row>.column {
  width: 6.25%;
}

.grid>.row>.column {
  margin-top: 0;
  margin-bottom: 0;
}

.grid>.column:not(.row) {
  /* padding-top: 1rem;
  padding-bottom: 1rem; */
}

.grid>.column:not(.row), .grid>.row>.column {
  position: relative;
  display: flex;
  /* display: inline-block; */
  width: 6.25%;
  /* padding-left: 1rem;
  padding-right: 1rem; */
  vertical-align: top;
}

/* --- Grid END -- */

/* Specific custom styles */

.paddingHorizontal {
  padding-left: 1em;
  padding-right: 1em;
}

.fillVisible {
  width: 100%;
  height: 100%;
}

.noScroll {
  overflow: hidden !important;
  position: fixed !important;
}

.blackBackground {
  background-color: black !important;
}

.topSubMenu {
  position: sticky;
  top: var(--app-navbar-height);
  z-index: 40;
  background-color: var(--app-color-bg)
}

.topSubHeader {
  position: sticky;
  top: var(--app-navbar-height);
  z-index: 10;
  background-color: var(--app-color-bg)
}

/* Site background */

.siteBackground {
  background-image: url("../images/Site-BG-2000x1500.jpg");
  background-repeat: no-repeat;
  /* background-position: 50% -300px; */
  background-position: 50% 45%;
  background-attachment: fixed;
}

@media only screen and (max-width: 767px) {
  .siteBackground {
    background-size: 1000px;
    background-position: 50% -150px;
  }
}

/* Site top = logo, subtitle, menu*/

.topSectionContainer {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  /*flex-wrap: wrap;*/
  justify-content: space-around;
  align-items: flex-start;
  align-self:center
  padding: 0;
  /*padding-top: 1rem;*/
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;

  z-index: 1;

  width: 100%;
  background-color: #0008;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #0008 50%, rgba(0,0,0,0) 100%);

  background-repeat: no-repeat;
  /* background-position: 50% -300px; */
  /* background-size: 1000px; */
  background-position: 50% -320px;
  background-attachment: fixed;

  background-image: url("../images/Site-BG-2000x1500.jpg");
  box-shadow: 0px 6px 30px 10px #040409AA;
}

.topSectionBackground {
  position:absolute;
  width: inherit;
  height: 100%;

  background-repeat: no-repeat;
  /* background-position: 50% -300px; */
  /* background-size: 1000px; */
  background-position: 50% -320px;
  background-attachment: fixed;

  background-image: url("../images/Site-BG-2000x1500.jpg");
  filter: blur(10px);
}

.topSectionContainer .siteLogo, .topSectionContainer .siteSubtitle {
  z-index: 1;
}

.topSectionContainer.minimized {
  /* flex-direction: row; */
}

.topSectionContainer.minimized .siteLogoContainer {
  /* height: var(--navbar-height); */
  /* background: linear-gradient(0deg, #172027 0%, #17202700 100%); */
}

.topSectionContainer.minimized .siteLogo {
  width: 0px;
  margin-left: 1rem;
  margin-right: .5rem;
  margin-top: auto;
  margin-bottom: auto;

  /* content: url("../images/SiteLogo-Sigil.png"); */

  visibility: hidden;

  -webkit-transition: width .2s, visibility 0s linear .2s;
  transition: width .2s, visibility 0s linear .2s;
}

.topSectionContainer.minimized .siteSigil {
  width: 100%;

  margin-left: .5rem;
  margin-right: .5rem;

  visibility: visible;

  -webkit-transition: width .2s, visibility 0s;
  transition: width .2s, visibility 0s;
}

.topSectionContainer.minimized .siteSubtitle {
  width: 0px;

  visibility: hidden;

  -webkit-transition: width .2s, visibility 0s linear .2s;
  transition: width .2s, visibility 0s linear .2s;
}

.topSectionContainer.minimized .menuContainer {
  justify-content: space-between; /* end; */
  /*padding-right: 1rem;*/
}

/* Align vertically for large screens */
/*
@media only screen and (min-height: 700px) {
  .topSectionContainer {
    margin-top: 27vh;
  }
}
*/

@media only screen and (max-width: 767px) {
  .topSectionContainer {
    /*position: sticky;*/
    top: 0;
    width: 100%;
    margin-top: unset;
  }
}

/* Site logo */

.siteLogoContainer {
  position: relative;
  display: flex;
  flex-direction: column;

  align-self: center;

  /* background-color: var(--navbar-color-bg); */
  /* background: linear-gradient(0deg, #172027 0%, #17202700 100%); */
}

.siteLogo {
  width: 100%;
  max-width: fit-content;
  /*
  width: 827px;
  height: 154px;
  */

  display: block;
  margin-left: auto;
  margin-right: auto;

  margin-top: 1rem;

  align-self: center;

  -webkit-transition: width .2s, margin 0s;
  transition: width .2s, margin 0s;

  /*content: url("../images/SiteLogo.png");*/
}

@media only screen and (max-width: 767px) {
  .siteLogo {
    width: 90%;
    content: url("../images/SiteLogo-Gray.png");
  }
}

.siteSigil {
  max-width: fit-content;

  display: block;
  margin: 0;

  align-self: center;

  width: 0%;

  visibility: hidden;

  -webkit-transition: width .2s, visibility 0s linear .2s;
  transition: width .2s, visibility 0s linear .2s;
}

.siteSubtitle {
  width: 100%;
  /* width: fit-content; */
  max-width: fit-content;
  
  display: block;
  margin-left: auto;
  margin-right: auto;

  visibility: visible;

  -webkit-transition: width .2s, visibility 0s;
  transition: width .2s, visibility 0s;
}

@media only screen and (max-width: 767px) {
  .siteSubtitle {
    width: 80%;
  }
}

.menuContainer {
  width: inherit;
  position: relative;
  display: flex;
  flex-direction: row;
  /*flex-wrap: wrap;*/
  justify-content: center;
  align-items: stretch;
  padding: 0;

  align-self: center;

  /* background-color: var(--navbar-color-bg); */
  background: linear-gradient(0deg, #172027 0%, #17202700 100%);
}

.contentsContainer {
  width: 850px;
  max-width: 850px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  margin-left: auto;
  margin-right: auto;

  /* margin-top: 17rem; */
}

.contentsContainer > * {
  margin: .5rem;
  flex-flow: row;
}

@media only screen and (max-width: 767px) {
  .contentsContainer {
    width: 100%;
  }
}

.sectionContainer {
  width: 850px;
  max-width: 850px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  margin-left: auto;
  margin-right: auto;

  /* margin-bottom: 7rem; */
}

.sectionContainer > * {
  margin: .5rem;
  flex-flow: row;
}

.sectionContainer > .sectionText {
  width: 100%;
  margin-left: 2rem;
  margin-right: 2rem;
}

.sectionText p {
  text-align: justify;
  text-justify: inter-word;
  margin-top: 0;
}

.headingMain {
  width: 100%;

  margin: 1rem;
  /* margin-top: 7rem; */

  /* text-transform: uppercase; */

  background-image: url("../images/StakeH.png");
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 100%;
  
  color: #D78C46;
  text-align: center;

  display: flex;
  align-items:center;
  justify-content:center;
}

.headingLogo {
  width: 100%;

  margin: 0rem;
  margin-left: 1rem;
  margin-right: 1rem;

  background-image: url("../images/StakeH.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100%;

  text-align: center;

  display: flex;
  align-items:center;
  justify-content:center;
}

.headingLogo img {
  max-width: fit-content;
  width: 90%;
}

/* Adds a "margin to the top of the element,
so that it can be navigated to without it ending under fixed topmenu items, etc. " */
.sectionTopMarginFix {
  position: absolute;
  top:-100px;
  margin: 0;
  padding: 0;
  height: 0;
}

/* Icon Button */

.iconButton {
  display: flex;
  align-items: center;
  flex-direction: row;

  border: none;
  padding: 0;
  background: none;

  border-radius: 1.7rem;

  text-decoration: none;

  opacity: .85 !important;

  color: #FFFFFF00;
}

@media only screen and (max-width: 767px) {
  .iconButton {
    width: 100%;
    max-width: 80vw;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 0.5rem;
  }
  .iconButton span {
    max-width: 50rem !important;
    margin-left: 0.5rem;
    margin-right: 1.5rem;
    padding-left: 0.5rem;
  }
  .iconButton.expanded {
    width: 100%;
  }
}

.iconButton img {
  border-radius: inherit;
}

.iconButton span {
  max-width: 0rem;
  
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  background: #00000000;
  
  text-decoration: none;
}

.iconButton:hover {
  text-decoration: none;
  opacity: 1 !important;

  transform: scale(1.1);
  margin-left: 0.7rem !important;
  margin-right: 0.7rem !important;
}

.iconButton:hover span {
  /*
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  */
}

.iconButton.expandable:hover {
  padding-left: 0.5rem;
  opacity: 1 !important;
}

.iconButton.expandable:hover span {
  max-width: 50rem;
  margin-left: 0.5rem;
  margin-right: 1.5rem;
}

.iconsContainer.expandable:hover .iconButton {
  padding-left: 0.5rem;
}

.iconsContainer.expandable:hover .iconButton span {
  max-width: 50rem;
  margin-left: 0.5rem;
  margin-right: 1.5rem;
}

.iconButton.expanded {
  padding-left: 0.5rem;
}

.iconButton.expanded.maxw {
  width: 100%;
}

.iconButton.expanded:hover {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

.iconButton.justifyw {
  width: 90%;
}

.iconButton.expanded span {
  max-width: 50rem !important;
  margin-left: 0.5rem;
  margin-right: 1.5rem;
  padding-left: 0.5rem;
}

.iconsContainer {
  max-width: inherit;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}

.iconsContainer > .iconButton {
  margin: 0.5rem;
}

.iconsContainer > .iconButton.expanded {
  /* flex-grow: 1; */
}

.iconFacebook, .iconFacebook * {
  color: #FFFFFF;
  background: #3b5998;
  background: linear-gradient(90deg, #3b5998 20%, #3b599830 90%);
}

.iconInstagram, .iconInstagram * {
  color: #FFFFFF;
  background-color: #55192d;
  background: linear-gradient(90deg, #55192d 20%, #55192d30 90%);
}

.iconTwitter, .iconTwitter * {
  color: #FFFFFF;
  background-color: #03a9f4;
  background: linear-gradient(90deg, #03a9f4 20%, #03a9f430 90%);
}

.iconYouTube, .iconYouTube * {
  color: #FFFFFF;
  background-color: #bd252a;
  background: linear-gradient(90deg, #bd252a 20%, #bd252a30 90%);
}

.iconDeviantArt, .iconDeviantArt * {
  color: #FFFFFF;
  background-color: #009443;
  background: linear-gradient(90deg, #009443 20%, #00944330 90%);
}

.iconBandcamp, .iconBandcamp * {
  color: #FFFFFF;
  background-color: #1DA0C3;
  background: linear-gradient(90deg, #1DA0C3 20%, #1DA0C330 90%);
}

.iconSpotify, .iconSpotify * {
  color: #FFFFFF;
  background-color: #09883B;
  background: linear-gradient(90deg, #09883B 20%, #09883B30 90%);
}

.iconAppleMusic, .iconAppleMusic * {
  color: #FFFFFF;
  background-color: #FF2D43;
  background: linear-gradient(90deg, #FF2D43 20%, #FF2D4330 90%);
}