/* 
	https://mypassword.fairview.org
	
	Oscar Hammons IV
	Principal Cybersecurity Engineer - Cybersecurity AI Automation
	Fairview Health Sercvices

	REV:  3.0
    DATE: Wednesday, July 8, 2026 05:00am PST

*/

:root {
        --color-sun: #f39c12; /* warm yellow */
        --color-moon: #5dade2; /* cool blue */
        --color-gray: #888;
        --bg-light: #fff;
        --bg-dark: #222;
        --text-light: #222;
        --text-dark: #eee;
}

body.light {
      --text-color: #000000;
      --heading-color: #1C1840;
      --border-color: #8CC96D;
      --border-hover: #C5EBB2;
      --bg-color: #FFFFFF;
      --btn-color: #fadaad;
      --btn-text: #1C1840;
      --btn-color-hover: #ccab7c;
      --btn-text-hover: #000000;
      --btn-link-hover: #FF0000;
      --gen-btn-color: #a3a3a3;
      --link-color: #0000FF;
      --link-hover: #FF0000;
      --color-moon: #646668; 
      --color-sun: #5dade2; 
      --edge-text: #FFFFFF;
      --pass-box: #4e4e4e; 
      --footer-bg: #1C1840;
      --box-shadow:  3px 3px 6px black;
      --overlay: rgba(0,0,0,0.45); 
}

body.dark {
      --text-color: #FFFFFF;
      --heading-color: #FCF5EB;
      --border-color: #FA7861;
      --border-hover: #FFAF97;
      --bg-color: #0e0e30;
      --btn-color: #fadaad;
      --btn-text: #1C1840;
      --btn-color-hover: #ccab7c;
      --btn-text-hover: #000000;
      --btn-link-hover: #FF0000;
      --gen-btn-color: #979797;
      --link-color: #7993E8;
      --link-hover: #8CC96D;
      --color-moon: #5dade2; 
      --color-sun: #646668; 
      --edge-text: #FCF5EB;
      --pass-box: #636060; 
      --footer-bg: #1C1840;
      --box-shadow:  3px 3px 6px #000000;
      --overlay: rgba(0,0,0,0.65); 
} 

body {
    background-image: linear-gradient(#aaaaaa, #cccccc 20%, #FFFFFF);
    background-image: url("images/healthcare_keyboard.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-color: #eeecef;
    margin: 0px;
    padding: 0px;
    color: #cccccc;
    font-size: 12pt;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
    font-size: 100%;
    letter-spacing: .2px;
    line-height: 1.4em;
    font-weight: 400;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100vh;
}

p {
        font-size: 1.0625rem;
        line-height: 1.65rem;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
}

#HeaderText{
        font-family: Montserrat, sans-serif; 
        font-size: 32px; 
        line-height: 1.07em; 
        color: var(--edge-text);
}

#declare {
    font-size: 1.555rem; 
    line-height: 1.9rem;
    padding-top: 16px; 
    margin-left: 10%; 
    margin-right: 10%; 
    color: var(--edge-text);
}


a {
    color: var(--link-color);
    text-decoration: underline;
}

a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

a:visited {
    color: var(--link-color);
    text-decoration: underline;
}


h2 {
      color: #1C1840;
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
      font-size: 120%;
      font-weight: bold;
      line-height: 130%;
      padding-bottom: 8px;
}

.light h2 { 
      font-family: Montserrat, sans-serif; 
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco"; 
      font-size: 1.253rem;
      color: #1C1840;
      letter-spacing: .2px;
      line-height: 1.4em;
      font-weight: bold;
      text-rendering: optimizelegibility;
      -webkit-font-smoothing: antialiased !important;
      text-shadow: 2px 2px 2px rgba(0,0,0,0.004);
}

.dark h2 { 
      font-family: Montserrat, sans-serif; 
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";   
      font-size: 1.253rem;
      color: #FCF5EB;
      letter-spacing: .2px;
      line-height: 1.4em;
      font-weight: bold;
      text-rendering: optimizelegibility;
      -webkit-font-smoothing: antialiased !important;
      text-shadow: 2px 2px 2px rgba(247,231,205,0.004);
}


.button-link {
        margin-top: auto;
        padding-left: 6px;
        padding-right: 6px;
        background-color: var(--btn-color);
        color: var(--btn-text);
        font-weight: bold;
        height: 32px;
        min-width: 210px;
        vertical-align: middle;
        border-radius: 3px; 
        box-shadow:
            inset 0 2px 5px rgba(255, 255, 255, 0.6),
            0 4px 6px rgba(0, 0, 0, 0.4);
        transition: background-color 0.3s, color 0.3s;
}

.button-link:hover {
        margin-top: auto;
        background-color: var(--btn-color-hover);
        color: var(--btn-text-hover);
        font-weight: bold;
        height: 32px;
        border-radius: 3px;
}


#CrownHeader {
    background-color: #1C1840;
    width: 98%;
    visibility: visible;
    display: block;
    height: 51px;
    width: 100%;
    vertical-align: top;
}

#IdentityBand {
    background-color: #FFCC33;
    width: 98%;
    height: 51px;
    visibility: visible;
    display: block;
    padding-left: 2px;
    height: 117px;
    width: 100%;
    vertical-align: middle;
}

#Necklace {
    background-color: #000000;
    width: 98%;
    height: 51px;
    visibility: visible;
    display: block;
    padding-left: 2px;
    height: 21px;
    width: 100%;
    vertical-align: middle;
    box-shadow: 3px 3px 6px black;
}

#DisplayTray {
    width: 98%;
    visibility: visible;
    display: block;
    line-height: 140%;
    vertical-align: middle;
    text-align: left;
}

#perimeter {
    padding-top: 20px;
    text-align: center;
    margin: auto;
}

#wrapper, #wrapper2, #wrapper3 {
    display: inline-block;
    margin: auto;
    text-align: left;
    vertical-align: top;
    height: 100%;
}

#wrapper4 {
    display: block;
    margin: auto;
    width: 75%;
    max-width: 75%;
    text-align: left;
    vertical-align: top;
    margin-top: 25px;
}

#content-top, #content-top2, #content-top3, #content-top4 {
    display: inline-block;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
    width: 100%;
    height: 100%;
    text-align: left;
    padding-bottom: 12px;
}

#content-container, #content-container2, #content-container3, #content-container4 {
    border-radius: 9px;
    border-width: 9px;
    border-style: solid;
    border-color: #8CC96D;
    width: 100%;
    height: 100%;
    padding: 20px;
    color: #000000;
    margin: auto;
    vertical-align: top;
    box-shadow: 3px 3px 6px black;
}

#content-container, #content-container2, #content-container3, #content-container4 {
    border-radius: 9px;
    margin: auto;
    height: 100%;
}

#content-border, #content-border2, #content-border3 {
    position: relative;
    min-height: 260px;
    height: 100%;
}

#content-border4 {
    position: relative;
    height: 100%;
}

#content-container, #content-border, #content-top, #content-container2, #content-border2, #content-top2, #content-container3, #content-border3, #content-top3, #content-container4, #content-border4, #content-top4 {
    vertical-align: top;
    font-size: 100%;
    line-height: 130%;
    height: 100%;
}

#content-container:hover, #content-border:hover, #content-top:hover, #content-container3:hover, #content-border3:hover, #content-top3:hover, div#content-container2:hover, div#content-border2:hover, #content-top2:hover, #content-bottom:hover, #content-container4:hover, #content-border4:hover, #content-top4:hover, li:hover {
    border-color: #C5EBB2;
}

.button-box {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    text-align: right;
}


/* ----------------------------- BOTTOM SECTION --------------------------------------------------------------------------------------------------------------------------------*/

#content-bottom {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
    display: block;
    border-radius: 9px;
    border-width: 9px;
    border-color: #8CC96D;
    width: 80%;
    max-width: 680px;
    font-size: 100%;
    margin: 15px auto;
    text-align: center;
    padding: 0 20px 0 20px;
    vertical-align: top;
    background-image: linear-gradient(
       rgba(247, 231, 205, 0.9),
       rgba(247, 231, 205, 0.8)
    );
    box-shadow: 3px 3px 6px black;
}

#VidTutorials {
    display: table;
    margin: auto;
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    vertical-align: top;
}

.VideoSection {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
    color: #1C1840;
    font-size: 110%;
    margin: auto;
    padding-bottom: 8px;
}

#VidPlayer {
    width: 160px;
    border-style: solid;
    border-color: #000000;
}

.BottomLinks {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
    font-size: 90%;
}

#footer {
    background-color: black;
}

#Tutorials {
    display: table-cell;
    text-align: left;
    vertical-align: top;
}

#videoBox {
    display: table-cell;
    vertical-align: top;
    padding-left: 12px;
}

.TDSpacer {
    display: table-cell;
    max-width: 5%;
}

.linkList:hover {
    color: #FFCC33;
}

.passwordPolicy {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
    padding-bottom: 8px;
}



/* -------------- 2026 BRAND FAIRVIEW --------------------------- */


  * {
    box-sizing: border-box;
  }

  html, body {
    min-height: 100%;
    margin: 0;
  }

  body {
        margin: 60px;
        font-family: Arial, sans-serif;
        min-height: 100vh;
  }



a {
    color: var(--link-color);
    text-decoration: underline;
}

a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

a:visited {
    color: var(--link-color);
}

  .container {
        max-width: 1200px;
        margin: 0 auto;
  }
  
  .rowx {
    display: flex;
    gap: 20px;
  }

  /* Top row 3 panels */
  .top-rowx {
        margin-bottom: 20px;
        padding-left: 36px;
        padding-right: 36px;
  }

  .top-rowx > .panelx {
        flex: 1;
        display: flex;
        text-align: left;
        color: #000000;
        flex-direction: column;
        background: var(--bg-color);
        padding: 20px;
        border-radius: 6px;
        border-radius: 9px;
        border-width: 9px;
        border-style: solid;
        border-color: var(--border-color);
        box-shadow: var(--box-shadow);
        min-height: 250px; 
        transition: border-color 0.3s, box-shadow 0.3s, background 0.3s,  color 0.3s;
  }

  .panelx {
        flex: 1;
        display: flex;
        text-align: left;
        color: var(--text-color);
        flex-direction: column;
        background: var(--bg-color);
        padding: 20px;
        border-radius: 6px;
        border-radius: 9px;
        border-width: 9px;
        border-style: solid;
        border-color: var(--border-color);
        box-shadow: var(--box-shadow);
        min-height: 250px; 
        transition: border-color 0.3s, box-shadow 0.3s, background 0.3s,  color 0.3s;
  }

  .top-rowx > .panelx:hover {
        border-color: var(--border-hover);
  }


  /* Second row: 2 panels equal width and height */
  .bottom-rowx {
        padding-left: 36px;
        padding-right: 36px;
  }

    .bottom-rowx > .panelx:hover {
        border-color: var(--border-hover);
    }

    .bottom-rowx > .panelx {
        flex: 1;
        display: flex;
        text-align: left;
        color: var(--text-color);
        flex-direction: column;
        background: var(--bg-color);
        padding: 20px;
        border-radius: 6px;
        border-radius: 9px;
        border-width: 9px;
        border-style: solid;
        border-color: var(--border-color);
        box-shadow: var(--box-shadow);
        min-height: 300px; 
        transition: border-color 0.3s, box-shadow 0.3s, background 0.3s,  color 0.3s;
    }


  /* Responsive: below 1010px all panels stack */
  @media (max-width: 1010px) {
    .rowx {
        flex-direction: column;
    }

    .panelx {
        min-height: auto; /* height not constrained, except buttons remain bottom */
    }
  }

    body {
        margin: 0; 
        padding: 0; 
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
        background-color: #eeecef;
        min-height: 100vh;
    }

    p {
        font-size: 1.0625rem;
        line-height: 1.65rem;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
    }

    #HeaderText{
        font-family: Montserrat, sans-serif; 
        font-size: 32px; 
        line-height: 1.07em; 
        color: var(--edge-text);
    }

    .MustHaveText{
        font-family: Montserrat, sans-serif; 
        font-size: .95rem; 
        color: var(--edge-text);
        line-height: 1.07em; 
        margin-top: 4px;
        margin-left: 12px;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
  
    #DisplayTray.light {
        visibility: visible;
        display: block;
        width: 98%;
        color: #FFFFFF;
        font-size: 1.553rem;
        line-height: 160%;
        vertical-align: middle;
        text-align: left;
    }

    #DisplayTray.dark {
        visibility: visible;
        display: block;
        width: 98%;
        color: #FCF5EB;
        font-size: 1.553rem;
        line-height: 160%;
        vertical-align: middle;
        text-align: left;
    }

    #GenerateButton1, #GenerateButton2 {
        background-color: var(--gen-btn-color);
        color: var(--btn-text);
        font-weight: bold;
        border-radius: 3px;
        box-shadow:
            inset 0 2px 5px rgba(255, 255, 255, 0.6),
            0 4px 6px rgba(0, 0, 0, 0.4);
    }

    #GenerateButton1:hover, #GenerateButton2:hover  {
        background-color: var(--btn-color-hover);
        color: var(--btn-link-hover);
        font-weight: bold;
        border-radius: 3px;
    }

    #SuggestedPassphrase1, #SuggestedPassphrase2 {
        border: 1px solid #1C1840;
        width: 100%;
        margin-bottom: 12px; 
        color: #007A19; 
        font-weight: bold;
        font-size: .9rem;
        padding: 6px;
        border-radius: 3px;
    }

    .VideoSection {
        padding-bottom: 8px;
        font-family: Montserrat, sans-serif; 
        font-size: 1.253rem;
        color: #1C1840;
        letter-spacing: .2px;
        line-height: 1.4em;
        text-rendering: optimizelegibility;
        -webkit-font-smoothing: antialiased !important;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    }

    #CrownRoyalty {
        display: table; 
        border-collapse: collapse; 
        border-spacing: 0px; 
        border-style: none;
        border: 0px;
        padding: 0px; 
        margin: 0px;
        height: auto;
        width: 100%;
    }

    #tableRow {
        border-style: none;
        width: 100%; 
        margin: 0px; 
        padding: 0px;
    }

    .LogoBox {
        display: table-cell; 
        border-style: none;
        height: auto; 
        min-width: 180px; 
        border: 0px; 
        margin-left: 18px; 
        padding-left: 24px;
        background-color: #1c1840; 
    }

    #HeaderBox {
        display: table-cell; 
        border-style: none;
        border: 0px; 
        max-height: 146px; 
        width: 500px; 
        margin: 0px 0px 0px 0px; 
        padding: 0px 0px 3px 33px; 
        color: var(--edge-text);
        background-color: #1c1840; 
    }

    #MHF_Logo {
        border: 0px;
        margin-left: 8px;
        display: inline;
        width: 265px;
        height: 38px;
    }

    .photo {
        width: 25%;
        border-style: none;
        border: 0px;
        padding: 0px;
        margin: 0px;
    }

    #video-perimeter {
        width: 84%;
        margin: auto;
    }

    #video-player {
       width: 100%;
    }

    .video-container {
        position: relative;
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

   #bgVideo {
        position:absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        width: 100%;
        min-height: 100%;
        object-fit: cover;
        z-index: -8;
    }

    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        background: var(--overlay); 
        z-index: -7;
        transition: background 0.3s,  color 0.3s;
    }   

    .spacer {
        flex-grow: 1; /* fills extra space when content is short */
    }

    /*  Theme generated by MYRA AI: Asymmetrical operational leverage (63X) 
                   Creator of MYRA: OScar Hammons IV                  */

    :root {
        --color-sun: #f39c12; /* warm yellow */
        --color-moon: #5dade2; /* cool blue */
        --color-gray: #888;
        --bg-light: #fff;
        --bg-dark: #222;
        --text-light: #222;
        --text-dark: #eee;
    }

    #btn-moon {
        color: var(--color-moon);
    }

    body.light {
        min-height: 100vh;
        background-color: var(--bg-light);
        color: var(--text-light);
        transition: background-color 0.3s, color 0.3s;
    }

    body.dark {
        min-height: 100vh;
        background-color: var(--bg-dark);
        color: var(--text-dark);
        transition: background-color 0.3s, color 0.3s;
    }

    #overlay.light {
        background: rgba(0,0,0,0.45); /* adjust dim level */
        transition: background-color 0.3s, color 0.3s;
    }

    #overlay.dark {
        background: rgba(0,0,0,0.65); /* adjust dim level */
        transition: background-color 0.3s, color 0.3s;
    }

    .theme-selector {
        position: fixed;
        display: inline-block;
        top: 10px;
        right: 10px;
        padding-top:  8px;
        padding-right:  12px;
        font-size: 1.8rem;
        font-family: Arial, sans-serif;
        user-select: none;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: default;
        z-index: 9999;
    }

    .theme-btn {
        display: inline-block;
        border: none;
        background: none;
        padding: 0;
        margin: 0;
        font-size: 1.8rem;
        line-height: 1;
        filter: grayscale(100%);
        opacity: 0.5;
        transition: filter 0.3s, opacity 0.3s;
    }

    .dark #btn-moon {
        opacity: 1;
        filter: grayscale(0);
        cursor: default;
    }

    .light #btn-moon {
        opacity: .25;
        filter: grayscale(100%);
        cursor: pointer;
    }

    .dark #btn-sun {
        opacity: .25;
        filter: grayscale(100%);
        cursor: pointer;
    }

    .light #btn-sun {
        opacity: 1;
        filter: grayscale(0);
        cursor: default;
    }

    .theme-btn.color {
        filter: none;
        opacity: 1;
        cursor: default;
    }

    .theme-btn.clickable {
        cursor: pointer;
        filter: grayscale(0);
        opacity: 0.75;
    }

    .theme-btn.clickable:hover {
        opacity: 1;
    }

    /* Separator: stylized ascii for robust rendering */
    .separator {
        color: var(--color-gray);
        font-weight: bold;
        user-select: none;
    }



/* ------------------------------- RESPONSIVE VIEWS --------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 380px) {

        #MHF_Logo {
            border: 0px;
            margin-left: 4px;
            display: inline;
            width: 156px;
            height: 23px;
        }

    #LogoBox {
        width: 128px;
        padding: 12px;
    }

    #HeaderText {
            font-family: Montserrat, sans-serif;
            font-size: 12px;
            line-height: 1.07em;
            color: #ffffff;
    }


    #HeaderBox {
            display: table-cell;
            border-style: none;
            border: 0px;
            height: 108px;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 3px 18x;
            color: var(--edge-text);
            background-color: #1C1840;
    }

    #missionStatement {
        display: none;
    }

    #wrapper, #wrapper2, #wrapper3, #wrapper4 {
        border-radius: 4px;
        border-width: 4px;
        border-color: #8CC96D;
        width: 80%;
        max-width: 80%;
        margin: auto;
        margin-top: 15px;
        box-shadow: 2px 2px 4px black;
    }

    #declare {
        font-size: .9rem; 
        line-height: 1.3rem;
        color: var(--edge-text);
    }

    #content-border, #content-border2, #content-border3 {
        min-height: 200px;
        height: 100%;
    }

    .VideoSection {
        color: #1C1840;
        font-size: 90%;
        margin: auto;
        padding-bottom: 8px;
    }

    #video-player {
        height: 370px;
    }

    li {
        font-size: 90%;
        line-height: 110%;
    }

    .theme-selector, #btn-sun, #btn-moon {
         font-size: 1.3rem;
         display: none;
    }
}

@media screen and (min-width: 381px) {
       
     #MHF_Logo {
            border: 0px;
            margin-left: 4px;
            display: inline;
            width: 156px;
            height: 23px;
    }

    #LogoBox {
        width: 128px;
        padding: 12px;
    }

    #HeaderBox {
            display: table-cell;
            border-style: none;
            border: 0px;
            height: 108px;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 3px 18x;
            color: var(--edge-text);
            background-color: #1C1840;
    }

    #HeaderText {
            font-family: Montserrat, sans-serif;
            font-size: 12px;
            line-height: 1.07em;
            color: #ffffff;
    }

    #perimeter {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
        text-align: center;
    }

    #wrapper, #wrapper2, #wrapper3, #wrapper4 {
        border-radius: 9px;
        width: 90%;
        max-width: 90%;
        margin: auto;
    }

    #declare {
        font-size: 1.1rem; 
        line-height: 1.5rem;
        color: var(--edge-text);
    }

    #wrapper2, #wrapper3, #wrapper4 {
        margin-top: 15px;
    }

    #content-border, #content-border2, #content-border3 {
        min-height: 200px;
        height: 100%;
    }

    #content-bottom {
        width: 80%;
        box-shadow: 3px 3px 6px black;
    }

    .theme-selector, #btn-sun, #btn-moon {
         font-size: 1.3rem;
         display: none;
    }

    #video-player {
       height: 390px;
    }

}

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

        #MHF_Logo {
            border: 0px;
            margin-left: 4px;
            display: inline;
            width: 156px;
            height: 23px;
        }

        #HeaderBox {
            display: table-cell;
            border-style: none;
            border: 0px;
            height: 88px;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 3px 26px;
            color: var(--edge-text);
            background-color: #1C1840;
        }

        #HeaderText {
            font-family: Montserrat, sans-serif;
            font-size: 12px;
            line-height: 1.07em;
            color: #ffffff;
        }

    #perimeter {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
        text-align: center;
    }

    #wrapper, #wrapper2, #wrapper3, #wrapper4 {
        width: 90%;
        margin: auto;
    }

    #wrapper2, #wrapper3, #wrapper4 {
        margin-top: 15px;
    }

    #content-border, #content-border2, #content-border3 {
        min-height: 200px;
        height: 100%;
    }

    #DisplayTray {
        font-size: 110%
    }

    #declare {
        font-size: 1.2rem; 
        line-height: 1.6rem;
        color: var(--edge-text);
    }

    #btn-sun, #btn-moon {
      font-size: 1.6rem;
    }

    #content-bottom {
        width: 80%;
        max-width: calc(75% + 40px);
        margin-top: 15px;
        display: block;
        border-radius: 9px;
        border-width: 9px;
        border-color: #8CC96D;
        box-shadow: 3px 3px 6px black;
    }

    .theme-selector, #btn-sun, #btn-moon {
        font-size: .9rem;
        display: inline-block;
    }

    #video-player {
       height: 420px;
    }
}

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

        #MHF_Logo {
            border: 0px;
            margin-left: 4px;
            display: inline;
            width: 156px;
            height: 23px;
        }
        
        #SuggestedPassphrase1, #SuggestedPassphrase2 {
            font-size: 1rem;
        }

        #HeaderText {
            font-family: Montserrat, sans-serif;
            font-size: 16px;
            line-height: 1.07em;
            color: #ffffff;
        }

        #declare {
            font-size: 1.1rem; 
            line-height: 1.5rem;
            color: var(--edge-text);
        }

        #LogoBox {
            width: 128px;
        }

        #HeaderBox {
            display: table-cell;
            border-style: none;
            border: 0px;
            height: 88px;
            margin: 0px 0px 0px 0px;
            padding: 0x 0px 3px 16px;
            color: var(--edge-text);
            background-color: #1C1840;
        }

        #tutorialType {
            display: none;
        }

    #video-player {
       height: 448px;
    }
}

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

        #MHF_Logo {
            border: 0px;
            margin-left: 4px;
            display: inline;
            width: 208px;
            height: 30px;
        }

        .LogoBox {
            width: 212px;
        }

        #HeaderText {
            font-family: Montserrat, sans-serif;
            font-size: 18px;
            line-height: 1.07em;
            color: var(--edge-text);
        }

        #HeaderBox {
            display: table-cell;
            border-style: none;
            border: 0px;
            height: 104px;
            width: 500px;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 3px 28px;
            color: var(--edge-text);
            background-color: #1C1840;
        }

        #btn-sun, #btn-moon {
            font-size: 1.6rem;
        }

        
        #video-player {
             height: 462px;
        }
}

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

        #MHF_Logo {
            border: 0px;
            margin-left: 6px;
            display: inline;
            width: 230px;
            height: 33px;
        }

        #HeaderText {
            font-family: Montserrat, sans-serif;
            font-size: 24px;
            line-height: 1.07em;
            color: var(--edge-text);
        }

        #HeaderBox {
            display: table-cell;
            border-style: none;
            border: 0px;
            height: 116px;
            width: auto;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 3px 48px;
            color: var(--edge-text);
            background-color: #1C1840;
        }

        #video-player {
             height: 490px;
        }
}

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


    #HeaderText {
            font-family: Montserrat, sans-serif;
            font-size: 26px;
            line-height: 1.18em;
            color: var(--edge-text);
    }

    #perimeter {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
        text-align: center;
        display: block;
    }

    #wrapper, #wrapper2, #wrapper3 {
        border-radius: 9px;
        display: inline-block;
        height: 100%;
    }

    #content-border, #content-border2, #content-border3 {
        position: relative;
    }

    #DisplayTray {
        font-size: 150%;
    }

    #wrapper2, #wrapper3, #wrapper4 {
        margin-top: 15px;
    }

    #wrapper4 {
        display: block;
    }

    
    #video-player {
       height: 500px;
    }


    #content-bottom {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
        max-width: calc(75% + 40px);
        margin-top: 15px;
        display: block;
        border-radius: 9px;
        border-width: 9px;
        border-color: #8CC96D;
        box-shadow: 3px 3px 6px black;
    }
}

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

    #wrapper, #wrapper2, #wrapper3 {
        display: inline-block;
        max-width: 28%;
        margin: 0 auto;
        padding: 0 20px 0 20px;
    }

    #video-player {
       height: 540px;
    }
    #content-border, #content-border2, #content-border3 {
        position: relative;
        min-height: 230px;
    }

    #wrapper4 {
        max-width: calc(65% + 40px);
        margin-top: 25px;
    }

    #content-top4 {
        width: 100%;
    }

    #content-bottom {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
        border-radius: 9px;
        border-width: 9px;
        border-color: #8CC96D;
        margin-top: 20px;
        max-width: calc(75% + 40px);
        display: block;
        box-shadow: 3px 3px 6px black;
    }

    .TDSpacer {
        display: table-cell;
        width: 0px;
        max-width: 15%;
    }
}

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

        #MHF_Logo {
            border: 0px;
            margin-left: 8px;
            display: inline;
            width: 265px;
            height: 38px;
        }

        #HeaderText {
            font-family: Montserrat, sans-serif;
            font-size: 28px;
            line-height: 1.07em;
            color: var(--edge-text);
        }

        #HeaderBox {
            display: table-cell;
            border-style: none;
            border: 0px;
        /* height: 146px; */
            width: 500px;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 3px 33px;
            color: var(--edge-text);
            background-color: #1C1840;
        }

    #video-player {
       height: 620px;
    }

    #wrapper, #wrapper2, #wrapper3 {
        display: inline-block;
        max-width: 28%;
        margin: 0 auto;
        padding: 0 20px 0 20px;
    }

    #content-border, #content-border2, #content-border3 {
        position: relative;
        min-height: 230px;
    }

    #wrapper4 {
        max-width: calc(65% + 40px);
        margin-top: 25px;
    }

    #content-top4 {
        width: 100%;
    }

    #content-bottom {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Calibri, Carlito, Helvetica, Arial, Roboto, Oxygen, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, "Droid Sans", "Ubuntu", "Fira Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "San Francisco";
        border-radius: 9px;
        border-width: 9px;
        border-color: #8CC96D;
        margin-top: 20px;
        max-width: calc(75% + 40px);
        display: block;
        box-shadow: 3px 3px 6px black;
    }

    .TDSpacer {
        display: table-cell;
        width: 0px;
        max-width: 15%;
    }
}