:root {
--bgRed:               rgb(214, 0, 0);
}


html {
font-size: 16px;
}

body {
color: gold;   
background-color: var(--bgRed);  
padding-left: 10%;
padding-right: 10%;
text-align: left;
font-size: 14px;
}



button {
    border: var(--baseBlack) 2px solid;
    border-radius: 8px;
    color: var(--baseBlack);
    background-color: var(--baseTransparent); 
    font-weight: bolder;
    transition-property: box-shadow;
    transition-duration: 0.5s;
}





#headerContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 5%;
    background-color: var(--bgRed);
    font-size: 20px;
    gap: 2%;
    justify-content: space-between;
}
    #leftMenu {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
        #siteTitleText {
            border-top: 3px solid gold;
            border-bottom: 3px solid gold;
            padding-top: 8px;
            padding-bottom: 8px;
            font-weight: bold;
            text-decoration: dashed;
        }

    #rightMenu {
        display: flex;
        gap: 1rem;
    }
        #sideMenuDrop {
            font-weight: bold;
        }
            #sideMenuDrop:hover {
                text-decoration: underline;
                cursor: pointer;
            }

  #menuDropdown {
    position: relative;
    display: inline-block;
    margin-bottom: calc(auto);
  }
    #menuDropdownContent {
      position: absolute;
      top: 120%;
      left: 50%;
      transform: translateX(-100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 150px;
      overflow: auto;
      border-radius: 4px;
      background: rgb(176, 0, 0);
      box-shadow: 0px 8px 16px 0px black;
      z-index: 1;
      gap: none;
    }

      .menuText {
        border-bottom: gold 1px solid;
        width: 100%;
        text-align: center;
        margin-top: none;
        transition-property: background-color;
        transition-duration: 1s;
      }
        .menuText:hover {
          background-color: red;
        }
        .menuText a {
          text-decoration: none;
          width: 100%;
          height: 100%;
          transition-property: text-decoration;
          transition-duration: 1s;
        }
        .menuText:hover a {
          text-decoration: underline;
        }




  @font-face {
  }

    .titleText {
      font-size: 1.75rem;
      font-weight: bold;
    }

    .headingText {
      color:var(--textRed);
      font-size: 1.5rem;
      font-weight: bold;
    }

    .subHeadingText {
      color:var(--textRed);
      font-size: 1.25rem;
      font-weight: bold;
    }

    .subSubHeadingText {
      color:var(--textRed);
      font-size: 1.125rem;
      font-weight: bold;
    }

    .microHeadingText {
      color:var(--textRed);
      font-size: 0.875rem;
      font-weight: bold;
    }

    .sectionHeading {
      border-top: 3px solid gold;
      border-bottom: 3px solid gold;
      padding-top: 8px;
      padding-bottom: 8px;
      font-weight: bold;
      font-size: 24px;
      width: 300px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

  h1 {
    font-size: 2rem
  }

  h2 {
    font-size: 1.75rem
  }

  h3 {
    font-size: 1.5rem
  }

  p {
    font-size: 1rem 
  }

  a {
    color: var(--refBoxColorBlue);
    transition-property: color, text-shadow;
    transition-duration: 0.4s;
  }
  a:hover {
    color: var(--textRed);
    text-shadow: 0px 0px 3px var(--textRed);
  }


.bodyContainer {
    display: flex;
    flex-direction: column;
}
    .bodyTextContainer {
        border-bottom: gold 2px dashed;
    }
      .fourSwords {
        height: 150px;
        width: 120px;
        margin-top: 1%;
        margin-left: 1%;
        border: gold 2px solid;
      }

      .imgRow {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .linkBox {
        background-color: white;
        color: red;
        border: gold 2px solid;
        border-radius: 2px;
        margin-bottom: 1%;
        height: 100px;
      }

    .writingsLinkButton {
      border-radius: 2px;
      width: 360px;
      height: 120px;
      margin: 0.2%;
      padding-top: 2px;
      padding-left: 6px;
      padding-right: 6px;
      padding-bottom: 2px;
      font-weight: bolder;
      font-size: 20px;
      text-align: left;
      transition: background-color, text-decoration, text-shadow;
      transition-duration: 0.5s;
    }