@import "./globals.css";

#months {


    position:relative;
    left:0 !important;
    top: 0 !important;

    display:flex;
    flex-direction: row;

    
    width:96%;
    padding:10px;
    margin-right:10px;

    text-align:center;
    border-bottom: 2px solid lightgray;
}


.month_chooser {

    background-color: white;

}


#month_label {

    display: inline-block;

    margin-top:6px;

    padding-left: 12px;
    padding-right: 12px;
    padding-bottom:6px;
    padding-top:2px;

    background-color: var(--LEEDZ_GREEN);

    line-height: 1.5em;

    font-family: var(--FONT_1);

    font-size:x-large;
    font-weight:600;

    border-radius: 4px;

}


    


#month-left {

    margin-top:5px;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-right: 30px solid var(--LEEDZ_DARKGREEN);
	border-bottom: 20px solid transparent;
}


#month-right {
   
    margin-top:5px;
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-left: 30px solid var(--LEEDZ_DARKGREEN);
	border-bottom: 20px solid transparent;
}


.month-menu {
    list-style: none;
    padding: 10px 24px;
    background-color: var(--LEEDZ_GRAY);
    border: 3px solid darkgreen;
    border-radius: 8px;
    width: fit-content;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 800;
  }


  .month-menu li {

    padding:8px;
    width:100%;
    line-height: 1em;

    font-family: var(--FONT_1);

    font-size:x-large;
    font-weight:600;

  }

  /* SMALL SCREEN */
@media screen and (max-height: 649px) {
  .month-menu li {
    line-height: 0.8em;
    font-size:large;
  }
}


  /* XTRA-SMALL SCREEN */
  @media screen and (max-height: 449px) {
    .month-menu li {
      line-height: 0.5em;
      font-size:medium;
    }
  }



  .deactivate {
    cursor:normal;
    background-color: var(--LEEDZ_GRAY);
    opacity: 0.4;
    pointer-events: none;
  }

  .month-menu li:not(.deactivate):hover {
    cursor: pointer;
    background-color: var(--LEEDZ_GREEN);
  }