:root
{
    font-family:Arial;
    background-color:black;
}
.mainbody
{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns: 20% 60% 20%; 
    grid-template-rows: 4% 20% 45% 1% 5%  auto auto;
    margin:0px;
    padding:0px;
}
.headLeft
{
    grid-area: 1/1/1/1;
    background-color:#20423a;
    color:#272629;
}
.headLogin
{
  grid-area: 1/3/1/span 1;
  background-color:#20423a;
  text-align:right;
  padding-right:2vm;
 
}
.headCenter
{
 grid-area: 1/1/1/span 2; 
 font:1.8vw garamond;
 background-color:#20423a;
 text-align:center;   
 margin-left:4vw;
}
.tables
{
    grid-area: 7/1/7/span 2;
    background-color:transparent;   
}
.consoleBox
{
    grid-area: 2/1/span 2/span 2;
    background-color:black;
    display:flex;
    margin-left:4vw;
}
.theConsole
{
    grid-area: 2/1/span 2/span 2;
    background-color:black;
    border:2pt solid white;
    border-radius: 0.5vw;
    visibility: hidden;
    overflow-y:scroll;
    overflow-wrap:break-word;
    padding-left:0.2vw;
    margin-left:4vw;    
}
.console
{
    flex:1;
    object-fit:fill;
    border:none;
    border-radius:2vw;
    height:100%;
}
.tablesContainer
{
    border:none;
    height:100%;
}
.consoleButton
{
    grid-area: 4/2/4/2;
    background-color: black;
}
.consoleMenu
{
    border-style:none;
    background-color:transparent;
    font: 2vmin arial;
    color:white;
}
.consoleMenu:hover
{
    color:red;
}

.consoleMenuSelected
{
    border-style:none;
    background-color:transparent;
    font: 2vmin arial;
    color:grey;
    font-style:italic;
}
.oracle
{
    grid-area: 6/1/6/span 2;
    background-color: transparent;
    text-align: center;
}
.bottom
{
    grid-area: 5/1/5/span 2;
    background-color: black;
    text-align:center;
}
.rolling
{
    grid-area: 2/3/2/3;
    background-color: black;
    object-fit: fill;
    text-align:center;
    align-content: center;
    border:4pt double white;
    color:white;
    font-size:1vw;
}
.messaging
{
    grid-area: 2/3/span 6/3;
    background-color: black;
    border:1pt solid white;
    padding-left: 2px;
    overflow: hidden;
}
.rollButton
{
    background-color:transparent;
    padding:0px;
    margin-top:0.5vw;
    border:none;
    height:20px;
}
.buttonImg
{
    height:2vw;
    width:2hw;
}
.rollHeader
{ 
  font-size:1.6vw
}
.rollType
{
 font-size:1.6vw;
}
.perkClass
{
    background-color:white;
    border:red;
    border-bottom-right-radius: 2vw;
    border-bottom-left-radius: 2vw;
    margin-left:4vw;

}
.notesInput
{
    width:95%;
    margin: auto;
}
.rollHeader2
{
    width:100%;
    background-color:blue;
    color:white;
    font-size:1.2vw;
}
.rollResults
{
font-size:2vw;
}
.theRoll
{
  font-size:0.7vw;
  font-style:italic;
}
.diceBox2
{
 border:1pt solid white;
 text-align: center;
}
.diceList
{
 font-size:1vw;
}
.closeContext
{
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    position: absolute;
    visibility: hidden;
}
.menuBox
{
    background-color: rgba(100,100,100,0.7);
    position:absolute;
    visibility:hidden;  
    left:3vw;  
    border-radius: 0.5vw;
    border:1pt solid white;    
    align-content: center;
    padding:2px;
}
.hoverDice
{
    background-color: rgba(100,100,100,0.7);
    position:absolute;
    width: 2.5vw;
    height:2.5vw;
    border-radius: 0.5vw;
    border:1pt solid white;
    color:white;
    text-align:center;
    align-content: center;
    box-shadow: 0pt 0pt 9pt maroon;

    
}
.hoverDice:hover
{
    background-color: red;
    cursor:pointer;
}
.D4
{
    left:1vw;
    top:3.5vw;
}
.D6
{
    left:1vw;
    top:6.5vw;
}
.D8
{
    left:1vw;
    top:9.5vw;
}
.D10
{
    left:1vw;
    top:12.5vw;
}
.D12
{
    left:1vw;
    top:15.5vw;
}.D20
{
    left:1vw;
    top:18.5vw;
}.D100
{
    left:1vw;
    top:21.5vw;
}
.journalButton
{
    left:1vw;
    top:24.5vw;
}
.consoleButton
{
    left:1vw;
    top:27.5vw;
}
.hoverButton
{
    background-color:rgba(100,100,100,0.7);
    width:2.1vw;
    height:2.1vw;
    text-align: center;
    align-content: center;
    align-self:center;
    font:1.2vw arial;
    font-weight:bolder;
    color:white;
}
.hoverButton:hover
{
    color:red;
    cursor:pointer;
}