* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: url('resources/images/fantasmo128x128.png') 0 0, auto;
}


:root{
  --main-bg-color: var(--tomato);
  --secondary-bg-color: var(--naples-yellow);
  --tertiary-bg-color: var(--color-14);
  --main-text-color: var(--color-15);
  --secondary-text-color: var(--rosa);
  --tertiary-text-color: var(--color-13);

  --rosa:#ee82ee;

  --tomato: #fe4a48;
  --naples-yellow: #F9DC5C;

  --color-1: #4ccdc4;
  --color-2: #8de2d4;
  --color-3: #b2f0e8;
  --color-4: #f8f1a0;
  --color-5: #ff6b6b;

  --color-6: #f9d59f;
  --color-7: #ffb84d;
  --color-8: #ff6d1f;
  --color-9: #e63746;
  --color-10: #f2faef;

  --color-11: #330036;
  --color-12: #38182F;
  --color-13: #2F394D;
  --color-14: #56666B;
  --color-15: #EEE1B3;

  --color-16: #ff6e61;
  --color-17: #ffa142;
  --color-18: #ffcc00;
  --color-19: #afeeee;
  --color-20: #5b8b89;

  --color-21: #F0E491;
  --color-22: #BBC863;
  --color-23: #658C58;
  --color-24: #31694E;
}

.horizontal{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

body {
  cursor: url('resources/images/fantasmo128x128.png') 0 0, auto;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  gap: 1px;
  font-family: Arial, sans-serif;
  margin: 0 300px;
  padding-top: 5px;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
}

li{
  list-style: none;
}

p{
  font-size: 11px;
}

span{
  font-size: 8px;
  color: var(--tertiary-text-color);
}

.skill{
  padding-left: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.name-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  height: 100%;
}

.valor{
  font-weight: bold;
  margin-right: 5px;
}

#status-container{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
}

#head-section{
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
}

#main-section{
  display: grid;
  grid-template-columns: 285px auto;
  gap: 10px;
}

#other-info-section{
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

#spells-section{
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  height: 94%;
}

#savings{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
}


.borda{
  border: 2px solid var(--secondary-text-color);
  border-radius: 10px;
  padding: 10px;
}

.organization{
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 100px 175px;
  gap: 10px;
}

.skill, .saving, .stats, .modifier{
  border: 1px solid var(--secondary-text-color);
  border-radius: 5px;
  padding: 5px;
  text-align: center;
}

.stats{
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  align-items: center;
  height: 100px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.stats:first-of-type{
  margin-top: 0;
  color: var(--secondary-text-color);
}

.stats:last-of-type{
  margin-bottom: 0;
  color: var(--color-9)
}

.stat-mod{
  display: flex;
  justify-self: center;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
}

.info-extra{
  display: grid;
  grid-template-columns: auto auto;
  height: 85%;
  gap: 10px;
}

.main-info{
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

.box{
  display: flex;
  flex-direction: column;
  height: 200px;
  margin-bottom: 10px;
}