@import url("https://use.typekit.net/sxc4elc.css");

/* Import fonts due to malfunction of import */
@font-face {
    font-family:"lores-21-serif";
    src:url("https://use.typekit.net/af/daeca3/00000000000000007735bf79/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/daeca3/00000000000000007735bf79/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/daeca3/00000000000000007735bf79/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
        font-family:"cc-pixel-arcade-joystick";
        src:url("https://use.typekit.net/af/415058/0000000000000000775594ed/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/415058/0000000000000000775594ed/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/415058/0000000000000000775594ed/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
        font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
        font-family:"lores-12";
        src:url("https://use.typekit.net/af/67262f/00000000000000007735bf74/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/67262f/00000000000000007735bf74/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/67262f/00000000000000007735bf74/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
        font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
        font-family:"lores-12-narrow";
        src:url("https://use.typekit.net/af/f11294/00000000000000007735bf71/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/f11294/00000000000000007735bf71/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/f11294/00000000000000007735bf71/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
        font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}



html, body, footer {
    height: 100%;
    margin: 0px;
    z-index: 1;
}

body {
    background-color: rgb(3, 3, 3);
}

header {
    background-color: rgb(3, 3, 3);
}


#login{
    display: flex;
    justify-content: end;
    margin: 0px 0px 0px 0px;    
    /* border: 1px solid white; */
    padding: 4px 0px 0px 0px;
   
}


#login a {
    margin: 20px 30px 0px ;
    /* border: 1px solid black; */
    color: white;
    text-decoration: none;

    font-family: "cc-pixel-arcade-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
}
#login a:hover{
    text-decoration: underline;
}
.logo {
    /* border: 1px solid black; */
   display: flex;
   padding-bottom: 5px;
}
.logo h1{
    margin: 0px auto 2px auto;

    font-family: "cc-pixel-arcade-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 100px;
    /* color: #29201B; */
    color: white;

}

#navigation {
    display: flex;
    justify-content: center;

    padding-bottom: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    
}
#navigation a {
    margin: 0px 30px 0px 30px;
    text-decoration: none;
    
    color: #C30000;
    font-family: "cc-pixel-arcade-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
}
#navigation a:hover{
    color: #dc0000;
    text-decoration: underline;
}
#navCharacters {
    padding-top: 15px;
}


/* Stray header */

#stray {
    display: flex;
    /* background-color:aliceblue ; */
   
    height: 60px;
    margin-bottom: 20px;
    align-items: center;
}

#stray #login a {
    /* background-color: #C30000; */
    padding-bottom: 20px;
}
#stray #navigation a {
    padding: 0px;
}
#stray #navigation{
    /* background-color: #C30000; */
    align-items: center;
    padding-bottom: 0px;
    flex-grow: 2;
    justify-content: flex-start;
    padding-left: 20px;

}

#stray .logo h2{
    padding: 10px 0px 0px 20px;
    font-family: "cc-pixel-arcade-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    /* color: #29201B; */
    color: white;

}



/* Home center*/
main{
    width: 96%;
    margin: 0px auto 0px auto;
    height: 680px;

    display: flex;

    background-color: #DFAD6F;
    border: #A17C4D, 6px;
    border-top-style: outset;
    border-right-style: outset;
    border-left-style: inset;
    border-bottom-style: inset;
}


#welcome .center {
    width: 100%;
    height: 80%;
    margin: 70px 600px 0px 100px;
    
    display: flex;
    flex-wrap: wrap;
}

@media (min-width:1820px ) {
    
}


#welcome .center h1 {
    margin: 0px;

    color: #060606;
    font-family: "lores-12", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 80px;
    /* text-decoration: underline; */
}
#welcome .center p{
    margin-left: 20px;
    margin-right: 200px;

    font-family: "lores-12-narrow", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
}
#getStarted {
    /* border:1px solid black; */
    padding-left:30px ;
    padding-top: 30px;
}
/* https://getcssscan.com/css-buttons-examples : Button 54 */
#getStarted button{
    width: 300px;
    height: 100px;

    position: relative;

    border: #C30000, 6px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
    font-family: "cc-pixel-arcade-display";
    font-style: normal;
    font-size: 28px;

    transition: ease;
}
#getStarted button:hover{

    cursor: pointer;
    background-color: rgb(231, 202, 149);
}
#getStarted button:active{

    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -4px;
    right: -4px;
    border: 6px solid  #C30000;
 
}




/* characters cards */
#charactersPage {
    height: 610px;
    /* height: auto; if more than 2 characters*/
}
#charactersPage .center {
    width: 100%;
    height: 60%;
    margin: 40px 600px 0px 100px;

    display: flex;
    flex-wrap: wrap;
}
#charactersPage .center h1 {
    padding-bottom: 10px;

    margin: 0px;
    height: 50px;
    width: 100%;
    color: #060606;
    font-family: "lores-12", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
    
}

#charactersPage  #noCharacters {
    font-family: "lores-12-narrow", sans-serif;
    font-weight: 700;
    font-style: normal;
}

#charactersPage .center p {
    font-family: "lores-12-narrow", sans-serif;
    font-weight: 700;
    font-style: normal;
}
#addCharacterButton {
    /* border: 1px solid black; */
    width: 460px;
    height: 225px;
    display: flex;
    padding-left: 20px;
    padding-top: 20px;
}

#addCharacter {
    width: 150px;
    height: 70px;
 
    position: relative;
    border: #C30000, 6px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
    font-family: "cc-pixel-arcade-display";
    font-style: normal;
    font-size: 17px;

    
    transition: ease;
}

#addCharacter:hover {
    background-color: rgb(231, 202, 149);
    cursor: pointer;
}

#addCharacter:active {
    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -4px;
    right: -4px;
    border: 6px solid  #C30000;
}


#characterList {
    width: 81vw;
    list-style-type: none;

    display: flex;
    padding-left: 0px;
    
    justify-content: left;
    flex-wrap: wrap;
}

/* https://getcssscan.com/css-box-shadow-examples */
#characterList li {
    border: 4px ridge #4F3223 ;
    box-shadow: 6px 6px #060606;
}
#characterList li:hover {
    border: 5px ridge #4F3223 ;
    box-shadow: 7px 7px #060606;
    cursor: pointer;
}
#characterList li:active {
    border: 5px ridge #4F3223 ;
    position: relative;
    box-shadow: 0px 0px;
    bottom: -4px;
    right: -4px;
}
.card  {


    background-color: #F1DCB1;
    width: 460px;
    height: 225px;
    margin: 20px 20px 20px 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.card #name {
    width: 459px;
    height: 70px;
    display: flex;
}

.card #name h2 {
    margin: 5px 10px 10px 10px;
    padding-top: 8px;
    word-wrap: break-word;
    
    font-family: "lores-12", sans-serif;
    font-size: 25px;

}


.card .info {
    height: 150px;
    display: flex;
}

.card .info #img {
    width: 130px;
    height: 130px;
    margin: 10px 10px 0px 10px;
    border: 4px ridge #4F3223 ;
}


#cardInfo{
    width: 200px;
    margin-top:10px;
    padding-left: 10px;
}

#cardInfo p{
    width: 180px;
    margin: 20px 0px 20px 0px;
    word-wrap: break-word;
    
    
    font-size: 20px;
}
#cardInfo #level {
    margin-top: 0px;
}

#cardActions{
    width: 100px;
    height: 40px;

    display: flex;
    justify-content: space-around;

    margin-top: 115px;
    
}


#cardActions .deleteCharacter {
    margin-left:40px;
    transition:filter 0.1s;
}

#cardActions .deleteCharacter:hover {
    /* https://codepen.io/sosuke/pen/Pjoqqp */
    filter: invert(8%) sepia(97%) saturate(7330%) hue-rotate(6deg) brightness(85%) contrast(109%);
}

#cardActions #edit {
    width: 30px;
    height: 30px;
}




/* create page */
#create {
    height: 610px;
    display: flex;
    justify-content: center;
}

#create .center {
    border: 1px solid black;
    width: 1450px;
    height: 550px;
    margin-top: 20px;
    
    display: flex;
    position: relative;
}

#create .center label {
    font-family: "lores-12", sans-serif, sans-serif;
    font-size: 30px;

}

#basicInfo {
    display: flex;
    margin-top: 30px;
}
#basicInfo .inputGroup {
    width: 370px;
    margin-left: 20px;
}


#basicInfo .inputField {
    /* background-color: #C30000; */
    display: flex;
    justify-content:space-between ;
    margin-bottom: 20px;
}
#basicInfo .inputField input,#basicInfo .inputField select{
    width: 150px;

    background-color: #F1DCB1;;
    font-family: "lores-12", sans-serif;
    font-size: 20px;
    text-indent: 10px;
    border: 3px solid #4F3223 ;
}


#basicInfo .inputGroup #imageCanvas{
    width: 150px;
    height: 150px;
    border: 6px ridge black;
    margin-left: 104px;
    margin-top: 10px;
    
}


#basicInfo  .inputGroup #image_link {
    width: 250px;
    background-color: #F1DCB1;
    font-family: "lores-12", sans-serif;
    font-size: 15px;
    
}

#moreInfo {
    /* border: 1px solid black; */
    margin-left: 20px;
    margin-top: 10px;
    display: flex;
}
#moreInfo .inputGroup {


    width: 370px;
    height: 150px;
    border: 3px gray;


}
#moreInfo .inputField {
    display: flex;
    justify-content: space-between;
    
    margin-top: 20px;
}
#moreInfo .inputGroup .inputField input {
    width: 150px;
    background-color: #F1DCB1;;
    font-family: "lores-12", sans-serif;
    font-size: 20px;
    text-indent: 10px;
    border: 3px solid #4F3223 ;
}



#abilities {
    display: flex;
}


#abilities button {
    width: 250px;
    height: 80px;

    margin-left: 250px;
    margin-top: 40px;
    position: relative;

    border: #C30000, 6px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
    font-family: "cc-pixel-arcade-display";
    font-style: normal;
    font-size: 28px;
    display: inline-block;

}

#abilities button:hover{

    cursor: pointer;
    background-color: rgb(231, 202, 149);
}
#abilities button:active{

    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -4px;
    right: -4px;
    border: 6px solid  #C30000;
 
}


#abilities .inputGroup {
    width: 800px;
    height: 140px;
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
}
#abilities .inputGroup .inputField {
    display: flex;
    flex-direction: column;
}

#abilities .inputGroup .inputField label {
    text-align: center;
    
}   
#abilities .inputGroup .inputField input {
    
    background-color: #F1DCB1;
    width: 100px;
    height: 100px;

    background-color: #F1DCB1;;
    font-family: "lores-12", sans-serif;
    font-size: 30px;
    text-indent: 10px;
    border: 3px solid #4F3223 ;
    text-indent: 33px;
}

/* feats */

#featsPage {
    height: auto;
    display: flex;
    flex-direction: column;
    visibility: hidden;
}
#featsPage h1{
    font-size: 50px;
    margin-left: 20px;
    font-family: "lores-12", sans-serif;
}   

#create table {
    width: 1420px;
    height: auto;
    margin-left: 20px;

    border-spacing: 0px 5px;
}
#create #identifiers {
    font-family: "lores-12", sans-serif;
    font-size: 17px;
}
#create tr {
    text-align: left;

    font-family: "lores-12", sans-serif;
    font-size: 15px;
}

#featsPage .buttons {
    display: flex;
    justify-content: end;
    margin-top: 20px;
}

#featsPage button {
    width: 250px;
    height: 80px;

    margin-left: 30px;
    
    position: relative;

    border: #C30000, 6px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
    font-family: "cc-pixel-arcade-display";
    font-style: normal;
    font-size: 28px;

}

#featsPage button:hover{

    cursor: pointer;
    background-color: rgb(231, 202, 149);
}
#featsPage button:active{

    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -4px;
    right: -4px;
    border: 6px solid  #C30000;
 
}





/* Inventory screen */

#inventoryPage #stray{

    margin-bottom: 0px;
    padding-bottom: 0px;
}


#characterSheet{
    margin-top: 20px;
    height: 680px;
}

#characterSheet #overview {
    width: 100%;
    display: flex;
    justify-content: space-between;

}

/* Stats */

#stats {
    margin: 20px;
    border: 1px solid black;
    width: 430px;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
}

#stats  #tabs{
   height: 40px;
   display: flex;
   justify-content: space-around;
}
#stats  #tabs h2{
    align-self: center;
    font-family: "lores-12", sans-serif;
    font-size: 30px;
    text-decoration: underline;
    margin-top: 20px;
    
}

#skillList {
    height:97%;
    width: 97%;
    margin: auto;
    margin-top: 10px;
}

#legend {
    display: flex;
    justify-content: left;
}
#legend h3 {
    font-family: "lores-12", sans-serif;
    font-size: 18px;
    margin-left: 17px;
    margin-top: 0px;
    margin-bottom: 10px;
}
#legend #bonus {
    margin-left: auto;
    margin-right: 20px;
}

.skillItem {
    height: 25px;
    margin-left: 15px;
    margin-right: 20px;
    margin-top: 2px;
    display: flex;

    font-family: "lores-12", sans-serif;
    font-size: 17px;
    border-bottom: 1px solid black;
}
.skillItem .modifier {
    width: 30px;
}
.skillItem h3 {
    margin-top: 0px;
    margin-left: 26px;
    padding-top: 1px;
    
    font-size: 17px;
}
.skillItem img {
    width: 19px;
    height:19px;
    margin-left: 10px;
}
.skillItem .bonus {
    margin-left: auto;
    margin-right: 20px;
}


/* Character */
#characterSheet #overview #character {
    /* border: 1px solid; */
    width:490px;
}

#character {
    display: flex;
    flex-direction: column ;
}
#character #name {
    margin: 0px auto 0px auto;
    font-family: "lores-12", sans-serif;
}


#portrait {
    display: flex;
    justify-content: space-around;
}

#proficiency, #inspiration {
    height: 50px;
    width:  50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: 2px solid black;
    position: absolute;
}

#proficiency {
    margin-right: 200px;
    margin-top: 68px;
    background-color: #F1DCB1;
}

#inspiration {
    
    margin-left: 200px;
    margin-top: 68px;
    background-color: #F1DCB1;
}

#proficiency p, #inspiration p{
    font-family: "lores-12", sans-serif;
    font-size: 15px;
    margin: 0px;
    text-align: center;
}

#inspiration input {
    margin-left: 16px;
    height: 20px;
    width: 20px;
}

#portrait img {
    width:118px;
    height:118px; 
    border: 4px ridge black;
    background-color: #F1DCB1;
}


#basicInfo {
    font-family: "lores-12", sans-serif;
    margin: 5px auto 5px auto;
    font-size: 20px;
}

#equipment {
    display: flex;
    height: 260px;
    /* width: 100px; */
    /* justify-content: space-evenly; */
    
    font-family: "lores-12", sans-serif;
    font-size: 15px;
}

#equipment1 {
    width: 160px;
    display: flex;
    flex-direction: column;
}

.equipment1Item {
    height: 40px;
    margin-top: 10px;
    display: flex;
    justify-content: right;
    align-items: center;
}

.equipment1Item h3{ 
    margin-right: 10px;
}

.square {
    width: 40px;
    height: 40px;
    border: 2px solid black;
    background-color: #F1DCB1;
}
.square img {
    width: 35px;
    height: 35px;
    margin-top: 2px;
    margin-left: 3px;
}

#armorClass {
    width: 150px;
    display: flex;
    
}
#ac {
    background-color: #F1DCB1;
}

#equipment2 {
    width: 160px;
    display: flex;
    flex-direction: column;
}
.equipment2Item {
    height: 40px;
    margin-top: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
}
.equipment2Item h3{ 
    margin-left: 10px;
}

#armorClass {
    display: flex;
    flex-direction: column;
}
#armorClass .equipment2Item {
    margin-left: 3px;
}
#ac {
    height: 120px;
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
    border: 3px solid black;
}
#ac h1 {
    margin-top: 17px;
}

#initiative {
    display: flex;
    justify-content: space-around;   
    font-size: 14px;
    margin: 15px 0px 7px 0px;
}
#initiative #init, #initiative #speed {
    width: 50px;
    height: 50px;
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 15px;
    background-color: #F1DCB1;
}
#initiative #init p, #initiative #speed p{
    margin: 0px;
}

#hp {
    display: flex;
    height: 75px;
    width: 240px;
    margin: 0px auto 0px auto;
    border: 2px solid black;
    margin-bottom: 10px;
    background-color: #F1DCB1;
}

#editHealth {
    width: 60px;
    padding: 5px;
}

#editHealth button {
    margin: 0px auto 0px auto;
    width: 60px;
    font-family: "lores-12", sans-serif;
    font-size: 11px;
    background-color:#F1DCB1;
    
    text-align: center;
    position: relative;
}


#heal {
    border: 3px solid #00c33b;
    box-shadow: 1px 1px 0px 0px, 1px 1px 0px 0px, 2px 2px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px;
}
#damage {
    border: 3px solid #C30000;
    box-shadow: 1px 1px 0px 0px, 1px 1px 0px 0px, 2px 2px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px;
}
#heal:hover {
    cursor: pointer;
}
#damage:hover {
    cursor: pointer;
}
#heal:active {
    border: 3px solid #00c33b;
    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 1px 1px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    right: -1px;
    bottom:-1px;
    
}
#damage:active {
    border: 3px solid #C30000;
    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 1px 1px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    right: -1px;
    bottom:-1px;
    
}

#editHealth input {
    width: 54px;
    margin:4px auto 2px auto;
    border: 2px solid black;
    
    font-family: "lores-12", sans-serif;
    font-size: 12px;
    background-color: #F1DCB1;
    
}
#healthScore {
    margin-left: auto;
    /* margin-right: auto; */
}

#hp #healthScore h2{
    text-align: center;
    margin: 8px 5px 0px 5px;
    font-family: "lores-12", sans-serif;
    font-size: 20px;
}

#hp #temp{
    margin: 0px auto 0px auto;
}
#hp #temp p{
   font-family: "lores-12", sans-serif;
   font-size: 13px;
   margin-top: 10px;
   margin-bottom: 14px;  
}
#hp #temp h2{
    margin: 0px;
    text-align: center;
    margin: 8px 5px 0px 5px;
    font-family: "lores-12", sans-serif;
    font-size: 19px;
    color: #002ec3;
}


#abilities {
    display: flex;
    height: 87px;
    justify-content: space-around;
}
#abilities .statBox {
    border: 2px solid black;
    width: 70px;
    height: 80px;
    text-align: center;
    background-color: #F1DCB1;
    
}

.statBox h2 {
    margin: 0px;
    font-family: "lores-12", sans-serif;
}

.statBox p{
    margin: 0px;
    font-family: "lores-12", sans-serif;
    font-size: 22px;
}
.statBox :nth-child(3){
    width: 25px;
    margin-left: 25px;
    margin-top: 10px;
    background-color: #F1DCB1;
    margin-right: auto;
    border: 3px solid black !important;
    position: absolute;
}



/* Inventory */
#characterSheet #overview #inventory {
    border: 3px solid;
    margin: 6px;
    width: 580px;
}


#inventory #legend {
    display: flex;
    justify-content: space-around;
    font-family: "lores-12", sans-serif;
    font-size: 9px;
    height: 45px;
    align-items: center;

}

#legend button {
    height: 26px;
    width: 60px;
    border: 3px solid black;
    border: #C30000, 3px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 2px 2px 0px 0px, 2px 2px 0px 0px;
    position: relative;
    font-family: "lores-12", sans-serif;
}

#legend button:hover {
    cursor: pointer;
}
#legend button:active {
    box-shadow: 0px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px;
    bottom: -2px;
    right: -2px;
}

#inventory .item {
    border: 2px solid black;
    height: 30px;
    margin: 3px;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    font-family: "lores-12", sans-serif;
    font-size: 13px;
    padding: 3px;
}
.item {
}
.item #itemName {
    word-wrap: break-word;
    
    width: 98px;
}
.item #type {
    width: 80px;
     word-wrap: break-word;
     
}
.item #subType {
    width: 125px;
    
     word-wrap: break-word;
     
}
.item #rarity {
    width: 80px;
    
     word-wrap: break-word;
     
}
.item #weight {
    width: 78px;
    
}
#deleteItem {
    width: 26px;
            margin-right: 5px;
            margin-left: 0px;
            height:22px;
            border: black, 3px, solid;
            box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 2px 2px 0px 0px, 2px 2px 0px 0px;
            position: relative;
            font-family: "lores-12", sans-serif;
}

/* delete item */
#deleteImg {

    width: 13px;
    height: 13px;
}

#deleteItem:hover {
    cursor: pointer;
}
#deleteItem:active {
    box-shadow: 0px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px;
    bottom: -2px;
    right: -2px;
}

.item button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    margin-right: 5px;
    border: #C30000, 3px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 2px 2px 0px 0px, 2px 2px 0px 0px;
    position: relative;
    font-family: "lores-12", sans-serif;
    font-size: 12px;
}

.item button:hover {
    cursor: pointer;
}
.item button:active {
    box-shadow: 0px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px, 1px 1px 0px 0px;
    bottom: -2px;
    right: -2px;
}

#itemList {
    height: 580px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* delete item square */
#deleteScreen {
    width: 98%;
    height: 80%;
    background-color: #060606cb;
    z-index: 2;
    position: absolute;
}
#deleteSquare {
   
    
    background-color: #F1DCB1;
    width: 350px;
    height:160px;
    margin-top: 150px;
    margin-left: 570px;
    display: flex;
    flex-direction: column;
    background-color: #DFAD6F;

    border: #A17C4D, 6px;
    border-top-style: outset;
    border-right-style: outset;
    border-left-style: inset;
    border-bottom-style: inset;

}
#deleteSquare h1 {
    font-family: "lores-12", sans-serif;
    font-size: 21px;
    text-align: center;
    margin: 7px 0px 7px 0px;
}

#deleteSquare #yesNo {
display: flex;
}
#yes {
    border: #00c33b, 6px, solid;
}
/* itemForDeletion */
#no {
    border: #C30000, 6px, solid;
}
/* https://getcssscan.com/css-buttons-examples : Button 54 */
#yesNo button{
    height: 50px;
    width: 150px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
    font-family: "lores-12", sans-serif;
    font-style: normal;
    font-size: 30px;
    transition: ease;
}

#yesNo button:hover {
    background-color: rgb(231, 202, 149);
    cursor: pointer;

 
}

#yesNo button:active {
    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -4px;
    right: -4px;
    border: 6px solid  #C30000;
}


/* add item form */
#addItemScreen {
    z-index: 2;
    width: 100%;
    height: 90%;
    position: absolute;
    display: flex;
    justify-content: center;
    /* margin-left: 500px; */
    
    background-color: #000000b7;
    
}



#addItemForm {

    background-color: #F1DCB1;
    width: 520px;
    height:440px;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    background-color: #DFAD6F;
    position: relative;


    border: #A17C4D, 6px;
    border-top-style: outset;
    border-right-style: outset;
    border-left-style: inset;
    border-bottom-style: inset;
}

#closeAddItem {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #F1DCB1;
    border: 3px solid #000000;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 2px 2px 0px 0px;

    font-family: "lores-12", sans-serif;
    font-size: 22px;
    line-height: 1;
    color: #060606;

    cursor: pointer;
}

#closeAddItem:hover {
    background-color: rgb(231, 202, 149);
}

#closeAddItem:active {
    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -2px;
    right: 8px;
}

#addItemForm label {
    font-family: "lores-12", sans-serif;
    font-size: 25px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 2px;
}

#addItemForm input {
    font-family: "lores-12", sans-serif;
    font-size: 20px;
    margin-left: 20px;
    margin-right: 20px;
    border: 3px solid black;
    background-color: #F1DCB1;
}
#shortItemInput {
    display: flex;
    margin-left: 15px;
    margin-right: 20px;
    margin-top: 0px;
}
#shortItemInput div {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;

}
#addItemForm .shortItemInput {
    display: flex;
    flex-direction: column;
    margin-left:  1px;
    
    width: 240px;
    
}
#addItemForm .shortItemInput label{
    width: 120px;
    margin: 0px;
}
#addItemForm .shortItemInput input{
    width: 120px;
    height: 20px;
    margin: 0px; 
}
#addItemForm .shortItemInput select {
    border: 3px solid black;
    background-color: #F1DCB1;
    font-family: "lores-12", sans-serif;
    font-size: 17px;
    width: 140px;
    height: 28px;
    margin: 0px;
}

#addItemForm textarea {
    border: 3px solid black;
    background-color: #F1DCB1;
    height: 70px;
    margin: 5px 20px 0px 20px;
    font-family: "lores-12", sans-serif;
    font-size: 17px;
}

/* https://getcssscan.com/css-buttons-examples : Button 54 */
#createItem{
    height: 80px;
    width: 250px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border: #C30000, 6px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
    font-family: "lores-12", sans-serif;
    font-style: normal;
    font-size: 30px;
    transition: ease;
}

#createItem:hover {
    background-color: rgb(231, 202, 149);
    cursor: pointer;

 
}

#createItem:active {
    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -4px;
    right: -4px;
    border: 6px solid  #C30000;
}

/* Register Page */


#registerPage {
    margin-top: 10px;
    width: 330px;
    height: 460px;
    display: flex;
    margin-bottom: 60px;
}
#registerPage .center {
    margin: 0px;
    justify-content: center;
    
}

#registerPage h1 {
   
    font-family: "lores-12", sans-serif;
    font-size: 40px;
    margin-left: 15px;
    /* text-align: center; */
    margin-top: 10px;
    margin-bottom: 15px;
}

#registerForm {
    /* border: 1px solid black; */
    width: 300px;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}
#registerForm *{
    height: 35px;
}

#registerForm label{
    font-size: 30px;
    color: #060606;
    font-family: "lores-12", sans-serif;
}
#registerForm input {
    margin-bottom: 20px;
    background-color: #F1DCB1;
    font-family: "lores-12", sans-serif;
    font-size: 20px;
    text-indent: 10px;
    border: 3px solid #4F3223 ;
}
/* https://getcssscan.com/css-buttons-examples : Button 54 */
#registerForm button {
    height: 60px;
    margin-top: 20px;
    
    position: relative;
    border: #C30000, 6px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
    font-family: "cc-pixel-arcade-display";
    font-style: normal;
    font-size: 28px;

    transition: ease;
    
}

#registerForm button:hover {
    background-color: rgb(231, 202, 149);
    cursor: pointer;

 
}

#registerForm button:active {
    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -4px;
    right: -4px;
    border: 6px solid  #C30000;
}



/* Login page */

#loginPage {
    margin-top: 30px;
    width: 330px;
    height: 395px;
    display: flex;
    margin-bottom: 60px;
}
#loginPage .center {
    margin: 0px;
    justify-content: center;
    
}

#loginPage h1 {
   
    font-family: "lores-12", sans-serif;
    font-size: 40px;
    margin-left: 15px;
    /* text-align: center; */
    margin-top: 15px;
    margin-bottom: 20px;
}
#loginForm p{
    font-family: "lores-12", sans-serif;
    text-align: center;
}


#loginForm {
    /* border: 1px solid black; */
    width: 300px;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}
#loginForm *{
    height: 35px;
}

#loginForm label{
    font-size: 30px;
    color: #060606;
    font-family: "lores-12", sans-serif;
}
#loginForm input {
    margin-bottom: 20px;
    background-color: #F1DCB1;;
    font-family: "lores-12", sans-serif;
    font-size: 20px;
    text-indent: 10px;
    border: 3px solid #4F3223 ;
}
/* https://getcssscan.com/css-buttons-examples : Button 54 */
#loginForm button {
    height: 60px;
    margin-top: 20px;
    
    position: relative;
    border: #C30000, 6px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
    font-family: "cc-pixel-arcade-display";
    font-style: normal;
    font-size: 28px;

    transition: ease;
    
}

#loginForm button:hover {
    background-color: rgb(231, 202, 149);
    cursor: pointer;

 
}

#loginForm button:active {
    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -4px;
    right: -4px;
    border: 6px solid  #C30000;
}



/* onboarding */

#onboardingPage {
    margin-top: 30px;
    width: 330px;
    height: 395px;
    display: flex;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;

}

#onboardingPage .center {
    margin: 0px;
    justify-content: center;
}

#onboardingPage h1 {
    font-family: "lores-12", sans-serif;
    font-size: 28px;
    margin-left: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
}


#onboardingForm {
    width: 300px;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}
#onboardingForm * {
    height: 35px;
}

#onboardingForm label {
    font-size: 30px;
    color: #060606;
    font-family: "lores-12", sans-serif;
}
#onboardingForm input {
    margin-bottom: 20px;
    background-color: #F1DCB1;
    font-family: "lores-12", sans-serif;
    font-size: 20px;
    text-indent: 10px;
    border: 3px solid #4F3223;
}
#onboardingForm button {
    height: 60px;
    margin-top: 20px;

    position: relative;
    border: #C30000, 6px, solid;
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
    background-color: #F1DCB1;
    font-family: "cc-pixel-arcade-display";
    font-style: normal;
    font-size: 28px;

    transition: ease;
}

#onboardingForm button:hover {
    background-color: rgb(231, 202, 149);
    cursor: pointer;
}

#onboardingForm button:active {
    box-shadow: 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px, 0px 0px 0px 0px;
    bottom: -4px;
    right: -4px;
    border: 6px solid #C30000;
}



/* Footer */

footer {
    background-color: rgb(3, 3, 3);
    text-align: center;
    height: 250px;
}

.logo h3 {
    margin: 40px auto 60px auto;

    font-family: "cc-pixel-arcade-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;

    /* color: #F1DCB1; */
    /* color: rgb(195, 0, 0); */
    color: rgb(238, 238, 238);
}
.logo h3:hover {
    color:#C30000 ;
    cursor:pointer;
}


#footerNav {
    display: flex;
    justify-content: center;
   

}
#footerNav a{
    color: white;
    text-decoration: none;
 
    padding: 0px 20px 0px 20px;

    font-family: "cc-pixel-arcade-display", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    
}

#footerNav a:hover {
    text-decoration: underline;
}



@media (max-width: 1600px){
    #login a {
        font-size: 28px;
        margin: 10px 20px 0px 0px;
       
    }
    .logo h1 {
        font-size: 90px;
    }
    
    #navigation a {
        font-size: 25px;
    }
    #navigation {
        padding-bottom: 15px;
    }
    
    main {
            height: 500px;
    }
    
    #welcome .center {
        margin-top: 40px;
    }
    #welcome .center h1{
        font-size: 60px;
    }
    #welcome .center p {
        font-size: 25px;
    }
    #welcome .center #getStarted {
        padding-top: 0px;
    }

}