@import './constants.css';

/* HEADER */
#header-passepartout {
  position: relative;
}

#header-passepartout picture * {
  width: 100%;
  height: auto;
  border-bottom: 2px solid #fdf6ed;
}

@media screen and (min-width: 2200px) {
  #header-passepartout picture * {
    width: 2200px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-bottom: none;
  }
}

#header-passepartout svg {
  height: 60px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 30px 0 0 #000000;
  top: -100%;
  left: 0;
}

/* CONTAINER WIDTH FOR CONTENT */
#content .block-paragraph_block {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.thincontainer {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* LINK BUTTONS */
.link-button-margin {
  margin: 2px;
}

.link-button-sign:link, .link-button-sign:visited {
  border: 1px solid black;
  display: inline-block;
  color: black;
  padding: 14px 25px;
  font-size: 1.0rem;
  text-align: center;
  text-decoration: none;
}

.link-button-sign:hover {
  color: white;
  border-color: #ece5dc;
  background-color: #6c734a;
  text-decoration: none;
}

.red:hover {
  background-color: #a34118;
}

.link-button:link, .link-button:visited {
  border: 1px solid #888888;
  display: inline-block;
  color: #666666; 
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}

.link-button:hover {
  background-color: #ece5dc;
  text-decoration: none;
}

/* CONTENT CONTAINER CHANGES */
.wholeviewport {
  position: absolute;
  left: 0;
  right: 0;
}

/* CONCERT INDEX PAGE */
.concert-date {
  color: #a34118;
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}

.concert-location {
  font-style: italic;
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}

.concert-description {
  line-height: 170%;
  max-width: 50rem;
  font-size: 1.2rem;
  margin-bottom: 10px;
  margin-top: 10px;
}

/* RIGHT-HAND SIDE TREE */
#side-navigation-bar {
  max-width: 300px;
  border-left: 1px solid #888888;
  font-size: 1.0rem;
  line-height: 1.5;
}

#tree-links-container {
  padding-top: 10px;
  padding-bottom: 10px;
}

.side-title {
  color: #6c734a;
}

.tree-link-box {
  text-decoration: none;
  color: #666666;
}

.tree-link-box:hover {
  font-weight: bold;
  color: #6c734a;
}

.tree-link-unmark:hover {
  font-weight: normal;
  color: #6c734a;
}

.tree-link-text {
  margin-left: 10px;
}

.but-conc:link, .but-conc:visited {
  width: 100%;
  display: block;
  color: #666666; 
  padding: 6px 12px;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
}

.but-conc:hover {
  text-decoration: none;
  font-weight: bold;
}

.but-conc-prev {
  border-bottom: 1px solid #888888;
}

.but-conc-next {
  border-top: 1px solid #888888;
}

/* MEMBER BLOCK */
.block-members_block {
  width: 100%;
  margin-bottom: 50px;
  margin-top: 50px;
}

@media screen and (min-width: 992px) {
  .block-members_block {
    width: calc(100% - 60px);
    margin-left: 60px;
  }
}

.member-inkl-frame {
  margin-bottom: 50px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}

.member-exkl-frame {
  background-color: #ece5dc;
}

/* PAGE OVERVIEW */

.page-overview {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
  align-items: stretch;
}

.page-overview a .card {
  background-color: var(--color-dark-bg);
  height: 100%;
  width: 100%;
}

.page-overview .page-overview-image {
  height: 300px;
  width: 300px;
}

.page-overview a {
  color: black;
  text-decoration: none;
  margin: 10px;
  width: 300px;
}

.page-overview a:hover {
  transform: scale(1.05);
}

@media screen and (min-width: 992px) {
  .member-exkl-frame {
    background-color: #ece5dc;
    display: flex;
    align-items: start;
  }
}

.block-members_block svg{
  height: 40px;
  width: 100%;
}

.member-image {
  display: block;
  width: 240px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: -60px;
  margin-bottom: -60px;
}

@media screen and (min-width: 992px) {
  .member-image {
    display: inline-block;
    left: -60px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }
}

.member-infos {
  display: block;
  padding: 20px;
}

@media screen and (min-width: 992px) {
  .member-infos {
    display: inline-block;
    position: relative;
    left: -40px;
  }
}

.block-members_block svg polygon{
  fill: #ece5dc;
}

.member-vita a {
  text-decoration: none;
  color: #a34118;
}

.member-vita a:hover {
  text-decoration: underline;
  color: inherit;
}