@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

:root                   {
    --main-color:       #185C37;
    --box-background:   #FBE3D6;
}

#headbar                {
    display:            flex;
    align-items:        center;
    background-color:   var(--main-color);
    height:             40px;
    position:           relative;
    margin-top:         min(6vw, 60px);
}
#headbar a              {
    position:           absolute;
}
#headbar a img          {
    height:             min(21vw, 160px);
    transform:          translateY(-50%);
    position:           absolute;
    top:                50%;
    left:               10px;
}
#wideNav, #narrowNav    {
    display:            flex;
    width:              100%;
    justify-content:    space-between;
    align-items:        center;
    padding-left:       max(calc(min(21vw, 160px) + 20px), 200px);
    color:              white;
}
#narrowNav              {
    display:            none;
}
/* Left and Right Menu Sections */
#menu-left              {
    display:            flex;
    gap:                20px;
}
#menu-right             {
    display:            flex;
    gap:                10px;
    padding-right:      12px;
}
.nav-item               {
    font-size:          16pt;
    font-weight:        bold;
    cursor:             pointer;
}
#narrowNav .nav-item    {
    position:           relative;
    top:                -0.05px;
    padding-left:       8px;
}

/* Hide on smaller screens for future hamburger menu */
@media (max-width: 768px) {
    #wideNav {
        display: none;
    }
    #narrowNav {
        display: flex;
    }
}



#footbar                {
    width:              100%;
    background:         var(--main-color);
    height:             min(5vw, 30px);
    margin:             min(5vw, 30px) 0;
    padding:            0;
}
main                    {
    text-align:         center;
}
.foot                   {
    text-align:         center;
}
h1                      {
    text-align:         center;
}
p,h3                    {
    text-align:         left;
}
.link                   {
    color:              #185C37;
}
.panel                  {
    display:            inline-block;
    max-width:          700px;
    border:             solid thin var(--main-color);
    padding:            4px 12px;
    vertical-align:     top;
    margin:             12px auto;
}
.label                  {
    text-align:         right;
    vertical-align:     top;
}
.list                   {
    border-collapse:    collapse;
}
.list tr:nth-child(even)    {
    background:         #F4F4F4;
}
.list tr:nth-child(odd)    {
    background:         #E4E4E4;
}
.formsub                {
    text-align:         right;
    padding:            6px 0;
}
.formBox                {
    margin:             auto;
    width:              100%;
    max-width:          600px;
    border:             solid medium var(--main-color);
    border-radius:      8px;
    padding:            20px 0;
    box-sizing:         border-box;
}
.resetPassword          {
    width:              90%;
    font-size:          14pt;
    margin:             4px 0;
}
.material-symbols-outlined  {
    position:           relative;
    top:                4px;
}
.button                 {
    background:         var(--main-color);
    color:              white;
    font-size:          12pt;
    border-radius:      6px;
}
.button:disabled        {
    background:         lightgrey;
    color:              dimgrey;
}
#mediaBlock,#textBlock  {
    display:            inline-block;
    width:              100%;
}
#mediaBlock             {
    text-align:         left;
    max-width:          400px;
    margin-right:       16px;
}
.navTab                 {
    display:            inline-block;
    background:         #E4E4E4;
    border-radius:      8px 8px 0 0;
    width:              110px;
    padding:            8px 0;
    cursor:             pointer;
}
.nopost                 {
    width:              300px;
    font-size:          16pt;
    font-weight:        bold;
    text-align:         center;
    padding:            6px;
}
#textBlock              {
    vertical-align:     top;
    max-width:          500px;
    margin-left:        16px;
}
.smPlat                 {
    width:              35px;
}
#bskyDrop               {
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    flex-wrap:          wrap;
//    gap:                1px;
    width:              35%;
    aspect-ratio:       1/1;
    background:         #F4F4F4;
    border:             solid thin grey;
}
#bskyEdit               {
    width:              62%;
    display:            inline-block;
    vertical-align:     top;
}
#bskyTextBox            {
    background:         white;
    border:             solid thin lightgrey;
    border-radius:      4px;
    text-align:         left;
    padding:            4px 6px;
}
    
.overlay                {
    background:         var(--box-background);
    border:             solid medium var(--main-color);
    padding:            12px 8px;
    display:            none;
    position:           fixed;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    max-height:         90vh;
    text-align:         center;
}