.NavMain { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 15px; padding: 15px 0 0 0; .FundingCampaign { width: 100%; background: rebeccapurple; display: flex; flex-direction: row; justify-content: center; align-items: center; margin: -15px 0 0 0; @media (max-width: 992px) { flex-direction: column; } .FundingCampaignLink { color: rgba(255, 255, 255, 0.75); font-weight: bold; text-decoration: unset; padding: 10px; flex-grow: 1; text-align: center; @media (max-width: 992px) { width: 100%; } &:hover { color: rgb(255, 255, 255); } } } .NavMainTop, .NavMainBottom { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .NavMainBottom { border-top: solid 1px rgba(255, 255, 255, 0.05); border-bottom: solid 1px rgba(255, 255, 255, 0.05); } .NavMainTopInside { width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; @media (max-width: 768px) { grid-template-columns: 1fr; } .NMTI_Sec { display: flex; flex-direction: row; justify-content: start; @media (max-width: 768px) { justify-content: center; } .NMTI_Sec_HomeLink { transition: ease 0.4s; display: flex; flex-direction: row; justify-content: start; align-items: center; grid-gap: 25px; text-decoration: unset; color: rgb(255, 255, 255); font-weight: bold; padding: 0; opacity: 0.5; min-width: 75px; &:hover { transition: ease 0.4s; text-decoration: unset; font-weight: bold; opacity: 1; color: unset; } } .NMTI_Sec_HomeLink_Logo { width: 100%; max-width: 100px; .NMTI_Sec_HomeLink_LogoImg { width: 100%; } } .NMTI_Sec_HomeLink_Name { width: 100%; height: 75px; width: 75px; } .NMTI_SecInside { width: 100%; display: flex; flex-direction: row; justify-content: end; align-items: center; grid-gap: 15px; padding: 5px 0; @media (max-width: 768px) { grid-gap: 10px; white-space: nowrap; max-width: 93vw; justify-content: start; overflow-x: auto; } .NMTI_SecInside_Link { position: relative; transition: ease 0.4s; display: flex; flex-direction: row; grid-gap: 10px; justify-content: start; align-items: center; height: auto; width: auto; padding: 10px 15px; border-radius: 10px; color: rgba(255, 255, 255, 0.25); text-decoration: unset; font-weight: bold; transform: scale(1); cursor: pointer; white-space: nowrap; line-height: 1; max-width: 200px; &:hover { transition: ease 0.4s; color: rgba(255, 255, 255, 0.75); box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1); text-decoration: unset; &::before { transition: ease 0.4s; opacity: 1; } } &:active { transition: ease 0.1s; transform: scale(0.98); } &::before { transition: ease 0.4s; opacity: 0; content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: linear-gradient( to top right, #262626, #292929, #262626 ); z-index: -1; border-radius: 10px; } @media (max-width: 576px) { flex-grow: 1; padding: 10px 10px; } &.NMTI_SI_LinkTip { position: relative; transition: ease 0.4s; display: flex; flex-direction: row; grid-gap: 10px; justify-content: center; align-items: center; height: auto; width: auto; border-radius: 10px; color: rgba(255, 255, 255, 0.25); text-decoration: unset; font-weight: bold; transform: scale(1); cursor: pointer; overflow: initial; &:hover { transition: ease 0.4s; color: #ffff5d; } } &.NMTI_SI_LinkRelay:hover { transition: ease 0.4s; color: #a549ff; } &.NMTI_SecInside_LinkActive { color: rgba(255, 255, 255, 0.75); box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.05); } .NMTI_SecInside_LinkImg { width: 25px; height: 25px; border-radius: 5px; } .NMTI_SecInside_Username { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } } .NavMainBottomInside { width: 100%; display: flex; flex-direction: row; grid-gap: 10px; justify-content: center; align-items: center; padding: 10px; white-space: nowrap; overflow-x: auto; .NavMainBottomInsideLink { transition: ease 0.4s; text-decoration: unset; color: rgba(255, 255, 255, 0.25); font-weight: bold; padding: 5px 15px; &:hover { transition: ease 0.4s; color: rgba(255, 255, 255, 0.75); text-decoration: unset; } &.NMBILActive { color: rgba(255, 255, 255, 0.65); } } } }