@import url('subcontent.css');
:root {
    --menu-width: 100vw;
    --max-menu-rows: 6;
    --max-shortmenu-rows: 3;
    --items: 8;
    --item-width: calc((var(--menu-width) / var(--items)));
    --subMenu1ItemCount: 6;  /* Money */
    --subMenu2ItemCount: 5;  /* Other */
    --subMenu3ItemCount: 4;  /* Entertain */
    --subMenu4ItemCount: 2;  /* Social */
    --subMenu5ItemCount: 4;  /* Cloud */
    --subMenu6ItemCount: 15; /* Streaming */
    --subMenu7ItemCount: 6;  /* Medical */
    --subMenu8ItemCount: 3;  /* Wayback Machine */

    /* The "round" css function may not work in all browsers yet.   */
    --subMenu1ColCount: round(up, calc(var(--subMenu1ItemCount) / 6), 1);
    --subMenu2ColCount: round(up, calc(var(--subMenu2ItemCount) / var(--max-shortmenu-rows)), 1);
    --subMenu3ColCount: round(up, calc(var(--subMenu3ItemCount) / 6), 1);
    --subMenu4ColCount: round(up, calc(var(--subMenu4ItemCount) / 6), 1);
    --subMenu5ColCount: round(up, calc(var(--subMenu5ItemCount) / 6), 1);
    --subMenu6ColCount: round(up, calc(var(--subMenu6ItemCount) / 6), 1);
    --subMenu7ColCount: round(up, calc(var(--subMenu7ItemCount) / 6), 1);
    --subMenu8ColCount: round(up, calc(var(--subMenu8ItemCount) / 6), 1);

    --subMenu1RowCount: min(var(--subMenu1ItemCount), var(--max-menu-rows));
    --subMenu2RowCount: min(var(--subMenu2ItemCount), var(--max-shortmenu-rows));
    --subMenu3RowCount: min(var(--subMenu3ItemCount), var(--max-menu-rows));
    --subMenu4RowCount: min(var(--subMenu4ItemCount), var(--max-menu-rows));
    --subMenu5RowCount: min(var(--subMenu5ItemCount), var(--max-menu-rows));
    --subMenu6RowCount: min(var(--subMenu6ItemCount), var(--max-menu-rows));
    --subMenu7RowCount: min(var(--subMenu7ItemCount), var(--max-menu-rows));
    --subMenu8RowCount: min(var(--subMenu8ItemCount), var(--max-menu-rows));

    --icon-box-height: 2.5em;
}

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(45deg, purple, #d8b8ff);
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size-adjust: none;
    font-stretch: normal;
    font-family: helvetica,arial,sans-serif;
    font-size:12pt;
    line-height: 14pt;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
}
.digileeHeader {
    display: flex;
    flex-direction: column;     /* Stack children vertically */
    align-items: flex-start;
    padding: 0.5em 0 0em 10px;
    font-family: "UnifrakturMaguntia", cursive;
    font-size: 4.0em;
    color: yellow;
}

.digileeHeader > .top-row 
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3em; /* spacing between link and subText */
    font-size: 1em;
}

.digileeHeader a {
    color:#FFFF90;
    text-decoration:none;
}

.subText {
    font-family: 'Over the Rainbow';
    font-size: .25em;
    color: white;
}

.quoteText {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: .25em;
    color: white;
    margin-top: 0.1em;
    margin-left: 1em;
}


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#ruler {
    width: 100vw;
    height: 1em;
    border-bottom: 2px solid black;
    position: fixed;
    top: 0;
    left: 0;
    background-image: linear-gradient(to right, black 1px, transparent 1px);
    background-size: 1em 100%;
}

nav {
    width: var(--menu-width);
    display: flex;
    justify-content: left;
    position: relative;
    z-index: 2;
    margin: 0px auto;
    margin-left: 3em;
    top: 1em;
}

nav .menu-item {
    color: pink;
    box-sizing: border-box;
    flex-grow: 0;
    display: flex;
/*    justify-content: center; */
    padding: 1em 0.5em;
    letter-spacing: 0.5px;
    min-height: 1em;
    position: relative;
}

nav .menu-text, nav .menu-text a {
    font-size: 1.1em;
    font-weight: 600;
    color: white;
    text-decoration: none;
    text-shadow: 0 1px 5px rgba(0,0,0,0.1);
    transition: color 0.1s ease-out;
    text-align: center;
}

nav .menu-text a:hover {
    color: rgba(255,255,255,0.5);
}

.menu-text:after {
    transition: bottom 0.25s ease-out, opacity 0.01s ease-out 0.01s;
    opacity: 0;
    content: '';
    position: absolute;
    pointer-events: none;
    bottom: -5em;
    left: calc(50% - 10px);
    border-color: transparent transparent white transparent;
    border-width: 10px;
    border-style: solid;
}
.menu-item:hover .menu-text:after {
    bottom: 0.5em;
    opacity: 1;
    transition: bottom 0.25s ease-out, opacity 0.01s ease-out 0.15s;
}

.menu-item .sub-menu {
    /* Absolute positioning removes the height of the sub-menu
     * from being considered part of the menu-item.
     */
    position: absolute;
    top: 3em;
    color: rgba(0,0,0,1.5);
    border-radius: 10px;
    min-width: 1em;
    box-sizing: border-box;
    z-index: 999;
    background: linear-gradient(to top, white, #cc92ea);
    display: grid;
    align-content: start;       /* Ensures rows stick close together at the top */
    grid-auto-flow: column;     /* Fills items vertically first */
    gap: .2em;                 /* Gap between rows */
    column-gap: .5em;
    padding: 0.5em 0.5em;
    pointer-events: none;
    opacity: 0;
    margin-left: -2em;
  
}

.menu-item:hover .sub-menu {
    pointer-events: all;
    clip-path: inset(0 0 0 0);  /* Hides every thing outside the visible .sub-menu */
    opacity: 1;
    background-color: white;
}

/* Define specific action for each sub-menu when hovering over 
 * the menu-item that coresponds to the menu-item column.
 */

nav .menu-item:nth-of-type(1):hover .sub-menu {
    grid-template-rows: repeat(var(--subMenu1RowCount), auto);
    grid-template-columns: repeat(var(--subMenu1ColCount), 1fr);
    grid-auto-flow: column;     /* Fills items vertically first */
    height: calc((var(--icon-box-height) + .5em) * var(--subMenu1RowCount));
}
nav .menu-item:nth-of-type(2):hover .sub-menu {
    grid-template-rows: repeat(var(--subMenu2RowCount), auto);
    grid-template-columns: repeat(var(--subMenu2ColCount), 1fr);
    grid-auto-flow: column;     /* Fills items vertically first */
    height: calc((var(--icon-box-height) + .5em) * var(--subMenu2RowCount));
}
nav .menu-item:nth-of-type(3):hover .sub-menu {
    grid-template-rows: repeat(var(--subMenu3RowCount), auto);
    grid-template-columns: repeat(var(--subMenu3ColCount), 1fr);
    grid-auto-flow: column;     /* Fills items vertically first */
    height: calc((var(--icon-box-height) + .5em) * var(--subMenu3RowCount));
}
nav .menu-item:nth-of-type(4):hover .sub-menu {
    grid-template-rows: repeat(var(--subMenu4RowCount), auto);
    grid-template-columns: repeat(var(--subMenu4ColCount), 1fr);
    grid-auto-flow: column;     /* Fills items vertically first */
    height: calc((var(--icon-box-height) + .5em) * var(--subMenu4RowCount));
}
nav .menu-item:nth-of-type(5):hover .sub-menu {
    grid-template-rows: repeat(var(--subMenu5RowCount), auto);
    grid-template-columns: repeat(var(--subMenu5ColCount), 1fr);
    grid-auto-flow: column;     /* Fills items vertically first */
    height: calc((var(--icon-box-height) + .5em) * var(--subMenu5RowCount));
}
nav .menu-item:nth-of-type(6):hover .sub-menu {
    grid-template-rows: repeat(var(--subMenu6RowCount), auto);
    grid-template-columns: repeat(var(--subMenu6ColCount), 1fr);
    grid-auto-flow: column;     /* Fills items vertically first */
    height: calc((var(--icon-box-height) + .5em) * var(--subMenu6RowCount));
}
nav .menu-item:nth-of-type(7):hover .sub-menu {
    grid-template-rows: repeat(var(--subMenu7RowCount), auto);
    grid-template-columns: repeat(var(--subMenu7ColCount), 1fr);
    grid-auto-flow: column;     /* Fills items vertically first */
    height: calc((var(--icon-box-height) + .5em) * var(--subMenu7RowCount));
}
nav .menu-item:nth-of-type(8):hover .sub-menu {
    grid-template-rows: repeat(var(--subMenu8RowCount), auto);
    grid-template-columns: repeat(var(--subMenu8ColCount), 1fr);
    grid-auto-flow: column;     /* Fills items vertically first */
    height: calc((var(--icon-box-height) + .5em) * var(--subMenu8RowCount));
}


/* .box is inside .sub-menu because of this syntax, which also
 * defines the <a> link characteristics, but ONLY those links 
 * within a .box that's in a .sub-menu.
 */
.sub-menu .box a {
    width: 100%;
    color: #7a8a94;
    text-decoration: none;
    align-items: start;
}

.sub-menu .box a:hover {
    color: rgb(44 70 86);
}

.sub-menu .box {
    margin: 0 0 0em 0;
/*    border: 2px solid #FF0000; */
}

/* Apply these features to everything inside an .icon-box */
.menu-item .icon-box * {
    transition: all 0.1s ease-out;
    position: relative;
    color: inherit;     /* Use the same color as parent */
    text-decoration: none;
}
.menu-item .icon-box {
    cursor: pointer;
    margin: 0;
    height: var(--icon-box-height);
    row-gap: 0;
    align-items: center;
}

.menuIcon a {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Prevents wrapping onto new lines */
    }

.icon-box .menuIcon {
    display: flex;
    align-items: center;
    font-size: .75em;
    }    

.icon-box .menuIcon .menuImg {
    height: 40px;
    width: 40px;
    vertical-align: middle;
    margin-right: 10px; /* Add space before the link text */
}    
.icon-box .menuIcon .menuImg1 {
    height: 40px;
    width: 60px;
    vertical-align: middle;
    margin-right: 10px; /* Add space before the link text */
}    
.menu-item .icon-box:hover .icon,
.menu-item .icon-box:hover .title,
.menu-item .icon-box:hover .sub-text,
.menu-item .icon-box:hover .menuIcon
{
    color: rgb(240 10 13);
    background-color: pink;
}

.image-container 
{
    position: relative;
    width: 100px; /* Adjust as needed */
    height: 100px; /* Adjust as needed */
    overflow: hidden;
}


.image-container img 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

img.top 
{
    z-index: 2;
    opacity: 1;
    transition: opacity 2.5s ease-in-out;
}

img.bottom 
{
    z-index: 1;
    opacity: 0;
    transition: none;
}

.image-container:hover img.top 
{
    opacity: 0;
    transition: none;   /* Disable fade-out */
}
   
.image-container:hover img.bottom 
{
    opacity: 1;
}
   

#info-box 
{
    color: white;
    position: absolute;
    bottom: 1em;
    right: 1em;
    display:block;
    font-size: 0.9em;
}

#info-box a 
{
    color: white;
    text-decoration: none;
    text-align: right;
    font-size: 0.9em;
    right: .1em;
}

.top-line
{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}