:root {
    font-family: monospace;
    --text: #f8f8f8;
    --surface0: #ccd0da;
    --surface1: #acafba;
    --base: rgba(0, 0, 0, 0.7);
    --lavender: #7287fd;
    --maroon: #e64553;
    --brdr: #69696b;
  
    --range-height: 12px;
    --range-accent: var(--lavender);
    --link-accent: var(--lavender);
  }


html {
    cursor: url('../assets/scursor.png'), default;

    background: url(../assets/backgrounds/bg2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    font-family: 'Futura', sans-serif;
    font-stretch: condensed;
    font-size:x-large;
}

body {
    width: calc(100% - 4rem - 2px);
    height: calc(100vh - 6rem - 2px);
    height: calc(100svh - 6rem - 2px);
    padding: 2rem;
    margin: 0;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    body {
      width: calc(100% - 8rem - 2px);
      height: calc(100vh - 10rem - 2px);
      height: calc(100svh - 10rem - 2px);
      padding: 4rem;
    }
  }

  main {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin: 2rem;
  }

@media (min-width: 768px) {
    main {
      width: 80%;
    }
  }
  
  @media (min-width: 1024px) {
    main {
      width: 50%;
    }
  }
.outer-container {
  height: 100%;
  width: 100%;
  background-color: var(--base);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 144px,144px 0,calc(100% - 144px) 0,100% 144px,100% 100%,0 100%);
}

.border {
  position:relative;
  height: calc(100% - 14px);
  width: calc(100% - 14px);
}

.border:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brdr);
  clip-path: polygon(0 140px,140px 0,calc(100% - 140px) 0,100% 140px,100% 100%,0 100%,0 140px,3.5px  calc(140px + 1.45px),3.5px calc(100% - 3.5px),calc(100% - 3.5px) calc(100% - 3.5px),calc(100% - 3.5px) calc(140px + 1.45px),calc(100% - 140px - 1.45px) 3.5px,calc(140px + 1.45px) 3.5px,3.5px calc(140px + 1.45px));
}

.content-container {
  height: calc(100% - 14px);
  width: calc(100% - 14px);
  position: relative;
  display: flex;
  align-items: end;
  justify-content: start;
}

.content-container::before {
  content: '';
  position: absolute;
  bottom: -28.4px;
  left: -16.5px;
  width: 50px;
  height: 50px;
  background-image: url('../assets/border/bdrimg-l.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.content-container::after {
  content: '';
  position: absolute;
  bottom: -28.4px;
  right: -29.5px;
  width: 50px;
  height: 50px;
  background-image: url('../assets/border/bdrimg-r.png');
  background-size: contain;
  background-repeat: no-repeat;
}



h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    /* font-weight: 400; */
    color: var(--text);
    font-family: 'Futura', sans-serif;
    font-stretch: condensed;
    font-weight: lighter;
}

header {
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    margin: auto;
    width: 50%;
    height: 100%;
    padding: 10px;
    text-align: center;
}

header a {
    margin: 3%;
}

footer {
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    margin: auto;
    width: 50%;
    height: 100%;
    padding: 10px;
    text-align: center;
}

.button {
    border: 2px solid var(--text);
    background: var(--base);
    position: relative;
    font-family: 'Futura', sans-serif;
    font-stretch: condensed;
    font-weight: lighter;
    font-size: large;
    padding: 0.5rem;
    color: var(--text);
    width: 68px;
    text-align: center;
    cursor: inherit;
}

.button:hover {
    background: var(--surface1);
    color: var(--text);
}

.button:active {
    background: var(--surface0);
}

.button-container {
    margin-top: 2rem;
    display: flex;
}