/*try using flexbox*/

@font-face
{
    font-family: "artDeco";
    src: url(../AvalonAssets/fonts/GrenadierNF.ttf) format("truetype");
}

@font-face
{
    font-family: "stoutDeco";
    src: url(../AvalonAssets/fonts/NotSoStoutDeco.ttf) format("truetype");
}

@font-face
{
    font-family: "snappy";
    src: url(../AvalonAssets/fonts/SnappyServiceNF.ttf) format("truetype");
}

body
{
    color: ghostwhite;
    background-color: black;
    font-family: "stoutDeco";
    font-size: larger;
}

h2
{
    font-family: "artDeco";
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 50px;

    border: 8px ridge #FEE085;
    width: 40%;
    padding: 8px;
    margin-left: auto;
    margin-right: auto;
}

h3
{
    font-family: "artDeco";
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 35px;
}

input{
    margin-right: 2px;
    margin-top: 3px;
    margin-bottom: 3px;
    background-color: dimgray;
    color: ghostwhite;
    border: 1px solid #ffec64;
    font-size: larger;
    padding: 2px;
    font-family: "snappy";
}

select{
    margin-right: 2px;
    margin-top: 3px;
    margin-bottom: 3px;
    background-color: dimgray;
    color: ghostwhite;
    border: 1px solid #ffec64;
    font-size: large;
    font-family: "snappy";
}

select::-webkit-input-placeholder {
    color: gainsboro;
}

select:-moz-placeholder { /* Firefox 18- */
    color: gainsboro;
}

input::-webkit-input-placeholder {
    color: gainsboro;
}

input:-moz-placeholder { /* Firefox 18- */
    color: gainsboro;
}

button{
    height: 28px;
    margin-right: 2px;
    margin-bottom: 3px;
    margin-top: 3px;
    -moz-box-shadow: 0px 1px 0px 0px #fff6af;
    -webkit-box-shadow: 0px 1px 0px 0px #fff6af;
    box-shadow: 0px 1px 0px 0px #fff6af;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
    background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
    background-color:#ffec64;
    border:1px solid #ffaa22;
    display:inline-block;
    cursor:pointer;
    font-family: "snappy";
    color:#333333;
    font-size:16px;
    /*font-weight:bold;*/
    padding:6px 6px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffee66;

}
li{
    list-style:none;
}

label{
    margin-right: 2px;
}

.modal{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modalBox{
    background-color: dimgray;
    margin: 15% auto; /* 15% from the top and centered */
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    padding: 20px;
    border: 3px solid ghostwhite;
    width: 60%; /* Could be more or less, depending on screen size */
    height: 400px;
}

.modalContent{
    /*border: 1px solid yellow;*/
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top:15%;
    font-family: snappy;
    font-size: xx-large;
}
.modalContent input{
    text-align: center;
}
.modalContent button{
    font-size: xx-large;
    width: 40px;
    height: 40px;
}

.close{
    font-family: "Stout Deco";
}

.close:hover{
    text-shadow: 0 0 5px yellow;
}

.hpSpan{
    margin-left: 10px;
    margin-right: 10px;
}

.banner{
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
}

.params{
    /*border: 1px solid yellow;*/
    text-align: center;
}
.generator{
    /*border: 1px solid red;*/
    border-bottom: 1px solid ghostwhite;
    text-align: center;
}
.charBox{
    border: 1px solid #FFD77A;
    width: 300px;
    padding: 3px;
    text-align: center;
    float: left;
}
.shortInput{
    width: 40px;
}
.mediumInput{
    width: 65px;
}
.longInput{
    width:235px;
}
.skillGroup{
    width: 225px;
    /*height: 775px;*/
    float: left;
}
.accordianButton{
    margin-left: 30px;
    margin-right: 30px;
}
.accordian{
    display:none;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-direction: column;
    transition: max-height 0.2s ease-out;
}
.wrapper{
    text-align: center;
}
.output{
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 5px;
    flex-wrap: wrap;
    width: 100%;
}

.skillWrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.attributesWrapper{
    width: 75%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.textFlow{
    display:block;
    margin-left: auto;
    margin-right: auto;
}
.buttonColumn{

}
.outputLabel{
    font-size: medium;
}
.lastRollOutput{
    background-color: dimgray;
    border: inset 1px dimgray;
    padding-top: 2px;
    padding-bottom: 4px;
    width: 95%;
    margin: 2px;
    font-family: "Not So Stout Deco";
}

.notes{
    width: 90%;
    height: 100px;
}