/**
 * @file
 * custom.css
 *
 * Layout and Theme styles for the entire site
 *
 * -------------------------------------------------
 * Attached thru `.info.yml`
 *
 ============================================================================ */

/**
 * Global
 ========================================*/
:root {
  --background-height: 704px;
  --background-tablet-height: 868px;

  --frame-length: 148px;

  --primary: #FAFAFA;
  --tertary: #D4AF37;
  --secondary: #AAA;

  --background-color: #1C1C1C;
}

@media screen and (min-width: 768px) {
    :root {
        --frame-length: clamp(112px, calc(112px + 6vw) ,186px);
        --background-height: 868px;
    }
}


body {
  color: var(--primary);
  background-color: var(--background-color);
}


/**
 * Regions
 ========================================*/
 
 
/* 
 * Main Content
 */
main.main-content {
  position: relative;
  z-index: 1;
}

/**
 * Responsive
 ========================================*/
 #block-letsgo-adjustedbackground {
     position: absolute;
     width: 100%;
     height: var(--background-height);
 }
 
 #block-letsgo-adjustedbackground .background {
     position: absolute;
  height: var(--background-height);
  width: 100%;
  overflow: hidden;
    
    background-color: #212121;
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -2;
 }
 
 #background-svg {
     position: absolute;
  height: var(--background-height);
  width: 100%;
  overflow: hidden;

  background-image: url("../images/triangle.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  z-index: -1;
  top: 0.25px;
 }


main.main-content  .main-inner {
  min-height: var(--background-height);
}

/*
Border Box
*/
.half-a-border-on-bottom {
    border-bottom: 3px solid;
  border-image: linear-gradient(to left, var(--tertary) var(--frame-length), transparent var(--frame-length)) 100% 1;
}

.half-a-border-on-right {
    border-right: 3px solid;
  border-image: linear-gradient(to top, var(--tertary) var(--frame-length), transparent var(--frame-length)) 0% 1;
}

.half-a-border-on-top {
    border-top: 3px solid;
  border-image: linear-gradient(to right, var(--tertary) var(--frame-length), transparent var(--frame-length)) 100% 1;
}

.half-a-border-on-left {
    border-left: 3px solid;
  border-image: linear-gradient(to bottom, var(--tertary) var(--frame-length), transparent var(--frame-length)) 0% 1;
  padding: 10px;
}

@media screen and (min-width: 768px) {
    .half-a-border-on-bottom {
        border-bottom: 5px solid;
    }
        

    .half-a-border-on-right {
        border-right: 5px solid;
    }

    .half-a-border-on-top {
        border-top: 5px solid;
    }
    
    .half-a-border-on-left {
        border-left: 5px solid;
        padding: 15px;
    }
}

 @media screen and (min-width: 900px) {

  .layout-sidebar {
    width: 21em;
    min-width: 21em;
    opacity: .9;
    margin-left: 2em;
  }
}