@media (orientation: portrait) {
    .container {
      display: grid;
      /* background-color: var(--current-canvas-background); */
      grid-template-areas:
      
        "menu-bar-grid"
        "emoji-grid"
        "accessory-stack-grid "
        "accessories-grid"
        "attribution-grid";
      grid-template-columns: 100%;
      grid-template-rows: 85px calc((100% - 85px - 345px - 60px) / 2) 345px calc((100% - 85px - 345px - 60px) / 2) 60px;
      height: 100%;
    }
    h1 {
      color: var(--current-text-menu-bar);
      text-align: left;
      font-family: 'verdana';
      font-size: 20px;
      font-weight: 500;
      margin-top: 10px;
      margin-bottom: 3px;

    }
    
    p {
      font-family: verdana;
      font-size: 18px;
      color: var(--current-text);
      margin-top:3px;
      margin-bottom:3px;
    }
  
    div.emojidiv{   
      border: 1px solid var(--current-canvas-border);
      background-color: var(--current-canvas);
      aspect-ratio: 1;
      height: 95%;
    }
  
    div.accessories{
      margin: auto;
      width: calc(100% - 15px);
      height: calc((100vh - 85px - 345px - 60px - 205px - 100px) / 2);
      overflow-y: scroll;
      padding-left: 5px;
      padding-right: 5px;
      border: 1px solid var(--current-panel-border);
      background-color: var(--current-inner-panel-background);
    }
  
    button.accessorybtn{
      background-color: var(--current-inner-panel-background);
        width:100px;
        height:100px;
        border-radius:10px;
        border: var(--current-inner-panel-background) solid 3px;
    }
    td.textprop{
      border: 1px solid var(--current-canvas-border);
      text-align: left;
      padding: 5px;
      width: 100%;
    }
    
    td.colorprop{
      border: 1px solid var(--current-canvas-border);
      text-align: left;
      padding: 5px;
      width: 60px;
      height:135px;
      width: 100%;
  
    }
  
    div.accessorystack{
      height: 264px;
      overflow-y: scroll;
      border: var(--current-panel-border) solid 1px;
      background-color: var(--current-inner-panel-background);
    }
  
    input.colorpicker{
      padding:0;
      border-radius: 0;
      width: 55px;
      height:57px;
      padding:0px;
      margin:5px;
      background-color: transparent;
      border:transparent;
     }
     input.colorpicker:hover{
       cursor: pointer;
      }
  
      button.deleteaccessbtn{
        background-color: rgb(155, 92, 92);
        width:50px;
        height:50px;
        padding:0%;
        border: none;
        border-radius:2px;
        margin-left: 2px;
        margin-right:2px;
        margin-bottom: 4px;
      }
      button.deleteaccessbtn:hover{
        cursor: pointer;
        background-color: var(--red-lighter);
      }

      button.toggle-theme{
        border-radius: 50px;
        height: 50px;
        width: 100px;
        border: 2px solid var(--current-canvas-border);
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      svg.toggle-theme{
        overflow: visible; position: absolute;
        transition: transform 0.25s;
      }
      
      svg.toggle-theme:hover{
        cursor: pointer;
      }

      .accessory-stack-grid {
        grid-area: accessory-stack-grid;
        gap: 5px; 
        padding: 10px;
        display: flex;
        flex-direction:row;
      }
/* 
      div.properties-table{
        display: grid;
        grid-template-areas: 
          "x-prop-label xprop        y-prop-label yprop"
          "r-prop-label rprop        s-prop-label sprop"
          "c-prop-label c-prop-label c-prop-label c-prop-label"
          "cprop        cprop        cprop        cprop"
          ;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 15% 15% 15% 55%;
        height: 250px;

      } */
/* 
      .cprop{
        grid-area: cprop
      }

      .x-prop-label, .y-prop-label, .r-prop-label, .s-prop-label, .c-prop-label, .xprop, .yprop, .rprop,.sprop,.cprop{
        margin:5px;
      } */
       .properties-table-container{
          border: 1px solid var(--current-panel-border);
          font-family: 'verdana';

            padding: 10px;
            background-color: var(--current-inner-panel-background);
          }

      td.textprop{
        border: 1px solid var(--current-canvas-border);
        text-align: left;
        padding: 5px;
        width: 120px;
        margin-top:2px;
        margin-bottom:2px;
      }
      td:nth-child(odd) {
        padding-right: 7px;
        vertical-align:top;
        padding-top:5px;
        text-align: right;
        margin:10px;
      }

      div.accessorystackcontainer{
      background-color: var(--current-panel-background);
      width: 100%;
      padding:0;
      border: var(--current-panel-border) solid 1px;
      border-radius: 5px;
      box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .13), 0 1px 2px 0 rgba(0, 0, 0, .11);
    }

    .menu-item {
      color: var(--current-text-menu-bar);
      position: relative;
      padding: 5px 10px;
      cursor: pointer;
      width:150px;
    }

  
  }