/*
Theme Name: Basic 101
Theme URI: http://www.themedreamer.com
Description: Basic one column theme, no sidebars.
Version: 1.0
Author: ThemeDreamer
Author URI: http://www.themedreamer.com
*/

/*---------------------------------------------------------------------------------

[Table of contents]

1. Initial Styling - General tags, the background, global attributes (overridden by following regions).
2. Header Region - Styles specific to header region, title, slug, top menu, etc.
3. Content Region - Styles for content appearance, blockquotes, posts, pages, wp-caption, etc.
4. Comments Region – Styles for comment thread, forms, etc.
5. Sidebar Region – Styles for widgets, additional menus lists and links.
6. Footer Region – Styles specific to the footer region.
7. Misc. & Plugins – Miscellaneous, override plugins, define last rule, fix anomalies, etc.

-----------------------------------------------------------------------------------*/

/*=== START SECTION 1 - Initial Styling ===*/
:root {
	--green: #69AC64;

	--special-height: 35px;
	--special-top: 97px;

	--specD-height: 21px;
	--specD-top: 329px;

	--ability-height: 18px;
	--ability-top: 65px;

	--traits-height: 20px;
	--traits-top: 642px;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	color: #555555;
	background-color: black;
	font-size: 14px;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

#main {
	background-color: black;
	height: 100vh;
	width: 100%;
}

#content {
	display: flex;
	justify-content: center;
	color: var(--green);
	background-color: black;
}

.container {
	position: relative;
}

.fullimg {
	height: 899px;
}

.black {
	background-color: black;
	border: 1px solid var(--green);
	color: var(--green);
	display: flex;
	justify-content: center;
}

#form {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
}

input {
	text-align: center;
}

.underAbility {
	position: absolute;
	top: 426px;
	left: 659px;
	display: flex;
}

.underAbility input,
.underAbility button,
.underAbility button:focus,
.underAbility input:focus {
	background-image: url("images/bg-btn-save.JPG");
	width: 235px;
}
 
.name {
	width: 100px; 
	height: 40px;
	position: absolute;
	left: 140px;
	top: 32px;
	padding: 8px;
	background-image: url("images/bg-btn-save.JPG");
	color: #8C7D39;
	text-transform: uppercase;
	border: none;
	font-size: 18px;
	font-weight: 400;
}

.age {
	width: 80px;
	height: 40px;
	position: absolute;
	left: 340px;
	top: 32px;
	padding: 8px;
	background-image: url("images/bg-btn-save.JPG");
	color: #8C7D39;
	text-transform: uppercase;
	border: none;
	-webkit-appearance: none;
	margin: 0;
	-moz-appearance: textfield;
	font-size: 18px;
	font-weight: 400;
}

.sesso {
	width: 116px;
	height: 40px;
	position: absolute;
	left: 465px;
	top: 32px;
	padding: 8px;
	background-image: url("images/bg-btn-save.JPG");
	color: #8C7D39;
	text-transform: uppercase;
	border: none;
	-webkit-appearance: none;
	margin: 0;
	-moz-appearance: textfield;
	font-size: 18px;
	font-weight: 400;
}

/*Special*/
#special {
	position: absolute;
	top: 97px;
	left: 140px;
}

.special {
	position: absolute;
	width: 149px;
	height: 35px;
}

.percezione {
	top: calc((var(--special-height) * 1) + (22px * 1));
}

.resistenza {
	top: calc((var(--special-height) * 2) + (22px * 2));
}

.carisma {
	top: calc((var(--special-height) * 3) + (22px * 3) + 2px);
}

.intelligenza {
	top: calc((var(--special-height) * 4) + (22px * 4) + 3px);
}

.agilita {
	top: calc((var(--special-height) * 5) + (22px * 5) + 4px);
}

.fortuna {
	top: calc((var(--special-height) * 6) + (22px * 6) + 5px);
}

.pointpers {
	width: 70px;
	height: 42px;
	position: absolute;
	left: 245px;
	top: 525px;
	padding: 8px;
}

/*lifeponints*/
.lifeponints {
	position: absolute;
	top: 97px;
	left: 540px;
	width: 50px;
	height: 28px;
}

.lifepointsattual {
	position: absolute;
	top: 97px;
	left: 490px;
	width: 50px;
	height: 28px;
}

.mr-pip-boy {
	position: absolute;
	top: 127px;
	left: 374px;
	height: 170px;
}

.mr-pip-boy img {
	position: absolute;
	z-index: 1;
	height: 170px;
}

.injury {
	position: absolute;
	z-index: 2;
	width: max-content;
	cursor: pointer;
	font-weight: bold;
}

.injury.off {
	color: #195C14;
	font-weight: normal;
}

.braccio-sx {
	left: 150px;
	top: 40px;
}

.braccio-dx {
	left: 10px;
	top: 40px;
}

.accecato {
	left: 56px;
	top: -6px;
}

.gamba-sx {
	left: 150px;
	top: 140px;
}

.gamba-dx {
	left: 10px;
	top: 140px;
}

.irradiato {
	left: 85px;
	top: 64px;
}

/*specD*/
.specD {
	position: absolute;
	top: var(--specD-top);
	left: 540px;
	width: 50px;
	height: var(--specD-height);
}

.specD input {
	width: 100%;
}

.punti_azione {
	top: calc(var(--specD-top) + (var(--specD-height) * 1) + 3px);
}

.peso_trasportabile {
	top: calc(var(--specD-top) + (var(--specD-height) * 2) + (3px * 2));
}

.danno_mischia {
	top: calc(var(--specD-top) + (var(--specD-height) * 3) + (3px * 3));
}

.resistenza_al_danno {
	top: calc(var(--specD-top) + (var(--specD-height) * 4) + (3px * 4));
}

.resistenza_a_energia {
	top: calc(var(--specD-top) + (var(--specD-height) * 5) + (3px * 5));
}

.resistenza_a_radiazione {
	top: calc(var(--specD-top) + (var(--specD-height) * 6) + (3px * 6));
}

.sequenza {
	top: calc(var(--specD-top) + (var(--specD-height) * 7) + (3px * 7));
}

.tasso_di_guarigione {
	top: calc(var(--specD-top) + (var(--specD-height) * 8) + (3px * 8));
}

.colpi_critici {
	top: calc(var(--specD-top) + (var(--specD-height) * 9) + (3px * 9));
}

.res_dan_en {
	position: absolute;
	top: calc(var(--specD-top) + 118px);
	left: 375px;
	width: 163px;
	height: var(--specD-height);
	background-color: #050C02;
	font-size: large;
}

/*ability*/
.ability {
	position: absolute;
	top: var(--ability-top);
	left: 966px;
	height: var(--ability-height);
	display: flex;
	width: 150px;
	justify-content: space-between;
}

.ability .all,
.ability .total {
	width: 42px;
}

.ability .black {
	width: 50px;
}

.ability span {
	background-color: black;
}

.armi_pesanti {
	top: calc(var(--ability-top) + (var(--ability-height) * 1) + (2px * 1));
}

.armi_a_energia {
	top: calc(var(--ability-top) + (var(--ability-height) * 2) + (2px * 2));
}

.disarmato {
	top: calc(var(--ability-top) + (var(--ability-height) * 3) + (2px * 3));
}

.armi_da_mischia {
	top: calc(var(--ability-top) + (var(--ability-height) * 4) + (2px * 4));
}

.lanciare {
	top: calc(var(--ability-top) + (var(--ability-height) * 5) + (2px * 5));
}

.pronto_soccorso {
	top: calc(var(--ability-top) + (var(--ability-height) * 6) + (2px * 6));
}

.dottore {
	top: calc(var(--ability-top) + (var(--ability-height) * 7) + (2px * 7));
}

.movimento_furtivo {
	top: calc(var(--ability-top) + (var(--ability-height) * 8) + (2px * 8));
}

.scassinare {
	top: calc(var(--ability-top) + (var(--ability-height) * 9) + (2px * 9));
}

.rubare {
	top: calc(var(--ability-top) + (var(--ability-height) * 10) + (2px * 10));
}

.trappole {
	top: calc(var(--ability-top) + (var(--ability-height) * 11) + (2px * 11));
}

.scienza {
	top: calc(var(--ability-top) + (var(--ability-height) * 12) + (2px * 12));
}

.riparare {
	top: calc(var(--ability-top) + (var(--ability-height) * 13) + (2px * 13));
}

.dialogare {
	top: calc(var(--ability-top) + (var(--ability-height) * 14) + (2px * 14));
}

.barattare {
	top: calc(var(--ability-top) + (var(--ability-height) * 15) + (2px * 15));
}

.gioco_dazzardo {
	top: calc(var(--ability-top) + (var(--ability-height) * 16) + (2px * 16));
}

.escursionista {
	top: calc(var(--ability-top) + (var(--ability-height) * 17) + (2px * 17));
}

/*traits*/
.traits {
	position: absolute;
	top: var(--traits-top);
	left: 83px;
	width: 20px;
	height: var(--traits-height);
}

.colosso {
	top: calc(var(--traits-top) + (var(--traits-height) * 1) + (3px * 1));
}

.mingherlino {
	top: calc(var(--traits-top) + (var(--traits-height) * 2) + (3px * 2));
}

.destro_o_mancino {
	top: calc(var(--traits-top) + (var(--traits-height) * 3) + (3px * 3));
}

.finezza {
	top: calc(var(--traits-top) + (var(--traits-height) * 4) + (3px * 4));
}

.kamikaze {
	top: calc(var(--traits-top) + (var(--traits-height) * 5) + (3px * 5));
}

.mano_pesante {
	top: calc(var(--traits-top) + (var(--traits-height) * 6) + (3px * 6));
}

.colpo_rapido {
	top: calc(var(--traits-top) + (var(--traits-height) * 7) + (3px * 7));
}

.caos_di_sangue {
	left: 566px;
}

.iettatore {
	top: calc(var(--traits-top) + (var(--traits-height) * 1) + (3px * 1));
	left: 566px;
}

.pacifista {
	top: calc(var(--traits-top) + (var(--traits-height) * 2) + (3px * 2));
	left: 566px;
}

.tossicomane {
	top: calc(var(--traits-top) + (var(--traits-height) * 3) + (3px * 3));
	left: 566px;
}

.resistente_ai_farmaci {
	top: calc(var(--traits-top) + (var(--traits-height) * 4) + (3px * 4));
	left: 566px;
}

.nottambulo {
	top: calc(var(--traits-top) + (var(--traits-height) * 5) + (3px * 5));
	left: 566px;
}

.abile {
	top: calc(var(--traits-top) + (var(--traits-height) * 6) + (3px * 6));
	left: 566px;
}

.dotato {
	top: calc(var(--traits-top) + (var(--traits-height) * 7) + (3px * 7));
	left: 566px;
}

/* modals */

.buttons {
	position: absolute;
	bottom: 41px;
	left: 625px;
	width: 514px;
}

.mybtn,
.mybtn:focus {
	background-image: url("images/bg-btn.JPG") !important;
	color: #8C7D39;
	text-transform: uppercase;
	border: 1px solid black !important;
	width: 168px;
	background-repeat: no-repeat;
	background-size: cover;
}

.mybtn:hover,
.mybtn:active {
	color: black;
}

.modal-header {
	text-transform: uppercase;
	background-size: 100%;
	background-repeat: no-repeat;
	max-width: 100%;
}

.radio-message {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
}

.radio-message span {
	width: max-content;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	animation: slide-left 30s linear infinite;
}

@keyframes slide-left {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

.mymodal {
	width: 90%;
	margin: 40px auto;
}

.mymodal .modal-content,
.mymodal .modal-content .modal-header,
.mymodal .modal-content .modal-footer {
	background-color: black;
	border: 1px solid var(--green);
	color: var(--green);
}

.mymodal .modal-body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.modal-body img {
	height: 75vh;
}

.card-header,
.card {
	background-color: transparent;
	border: 1px solid var(--green);
	background: url("images/bg-obj.jpg");
	font-weight: bold;
	min-width: 18rem;

}

.variazioni {
	margin-bottom: 20px;
}

a.inventory-action,
a.inventory-action:hover,
a.inventory-action:focus {
	color: var(--green);
	border: 1px solid var(--green);
	padding: 5px;
	border-radius: 2px;
	cursor: pointer;
}

.inventory-action.off,
.inventory-action.off:hover,
.inventory-action.off:focus {
	color: #195C14;
	font-weight: normal;
	border: 1px solid #195C14;
}

.gift{
	color: var(--green);
	border: 1px solid var(--green);
	padding: 5px;
	border-radius: 2px;
	margin-top: 10px;
	background-color: transparent;
}

.gift option{
	text-transform: uppercase;
}

/*blackbox*/
.blackbox {
	position: absolute;
	background-color: black;
	width: 509px;
	height: 318px;
	border-radius: 5px;
	top: 487px;
	left: 634px;
	overflow-y: scroll;
}

.inventoryammo {
	width: 80px;
}

.blackbox div {
	display: flex;
	padding-left: .75rem;
	padding-bottom: 2px;
}

.blackbox h6 {
	padding: .75rem 0px 0px .75rem;
	border-top: 1px solid var(--green);
}