From 7f2dfea3ecbcc0c4a0b16a4e6558bfa44665d101 Mon Sep 17 00:00:00 2001 From: VJ ROLMASTERS Date: Wed, 26 Nov 2025 09:17:47 +0100 Subject: [PATCH] Delete porkmort_v2.css --- porkmort_v2.css | 1969 ----------------------------------------------- 1 file changed, 1969 deletions(-) delete mode 100644 porkmort_v2.css diff --git a/porkmort_v2.css b/porkmort_v2.css deleted file mode 100644 index 5907319392..0000000000 --- a/porkmort_v2.css +++ /dev/null @@ -1,1969 +0,0 @@ -/* CSS PORK MORT - CAP DE PORC */ -/* Character sheet for ROll20 by VJ Rolmasters*/ - -@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Manufacturing+Consent&display=swap'); - -/*============= FONTS CSS =============*/ -.jetbrains-mono- { - font-family: "JetBrains Mono", monospace; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; -} -.manufacturing-consent-regular { - font-family: "Manufacturing Consent", system-ui; - font-weight: 400; - font-style: normal; -} - - -/*=================== TABS MENU CSS ===================*/ - -.sheet-center-menu{ - float: none; - width: 100%; - height: auto; - margin: 0px auto ; - } - -/* configure the tab buttons */ -.charsheet .sheet-personaje, -.charsheet .sheet-combat, -.charsheet .sheet-class, -.charsheet .sheet-items, -.charsheet .sheet-magia{ - display: none; -} - -/* style the active button */ -.charsheet .sheet-tabstoggle[value="personaje"] ~ div .sheet-button0 {background-color: #e97365 !important; color: #ffff00 !important;} -.charsheet .sheet-tabstoggle[value="combat"] ~ div .sheet-button1 {background-color: #e97365 !important; color: #ffff00 !important;} -.charsheet .sheet-tabstoggle[value="class"] ~ div .sheet-button2 {background-color: #e97365 !important; color: #ffff00 !important;} -.charsheet .sheet-tabstoggle[value="items"] ~ div .sheet-button3 {background-color: #e97365 !important; color: #ffff00 !important;} -.charsheet .sheet-tabstoggle[value="magia"] ~ div .sheet-button4 {background-color: #e97365 !important; color: #ffff00 !important;} - -/* show the selected tab */ -.charsheet .sheet-tabstoggle[value="personaje"] ~ div.sheet-personaje, -.charsheet .sheet-tabstoggle[value="combat"] ~ div.sheet-combat, -.charsheet .sheet-tabstoggle[value="class"] ~ div.sheet-class, -.charsheet .sheet-tabstoggle[value="items"] ~ div.sheet-items, -.charsheet .sheet-tabstoggle[value="magia"] ~ div.sheet-magia{ - display: block; -} - -.sheet-button0, -.sheet-button1, -.sheet-button2, -.sheet-button3, -.sheet-button4 { - width: auto; - height: 24px; - background: #7fc8c7; - color: #ffff00; - margin: 0 0 0 5px; - padding: 8px 32px 8px; - text-align: center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-style: normal; - font-size: 22px; - border: 2px solid #ffff00; - - /* Bordes redondeados compatibles */ - border-radius: 5px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - - /* Transición suave para el hover */ - transition: all 0.2s ease-in-out; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - - /* Cursor tipo botón */ - cursor: pointer; -} - -.sheet-button0:hover, -.sheet-button1:hover, -.sheet-button2:hover, -.sheet-button3:hover, -.sheet-button4:hover{ - width: auto; - height: 24px; - background: #ffff00; - color: #000000; - margin: 0px 0px 0px 5px; - padding: 8px 32px 8px; - text-align: center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-style: normal; - font-size: 22px; - border: 2px solid #000000; - } - -.sheet-button0, -.sheet-button0:hover, -.sheet-button0:active{ - margin-left: 35px; -} - -/*============= CONTENEDORES Y COLUMNAS CSS =============*/ - -.sheet-clearfloat { - clear:both; - height:0; - font-size: 0px; - line-height:0px; -} - -.sheet-contenedorvj{ - position:relative; - float:left; - width:860px; - max-width: 860px; - height:auto; - min-height: 600px; - margin: 0px auto; - padding: 0px 0px; - } - - -/*============= TOP PART FIXE BLOC 1 : COLUMNA A CSS =============*/ - -.sheet-bloc1{ - position: relative; - float: left; - width: 840px; - height: auto; - min-height: 630px; - margin: 0px auto ; -} - - -.sheet-logo{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 150px; - margin: 0px auto ; -} -.sheet-bloc1columnA{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 630px; - margin: 0px auto ; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC1_PETIT_A1_420px.jpg"); - background-repeat:no-repeat; - background-size:auto; - background-position: top; - box-sizing:border-box; -} - -.sheet-atributscolumn{ - position: relative; - float: left; - width: 390px; - height: auto; - min-height: 175px; - margin: 0px 0px 0px 30px ; -} - -.sheet-atributbox{ - position: relative; - float: left; - width: 95px; - height: auto; - min-height: 175px; - margin: 0px auto ; -} -.sheet-atributnumero{ - position: relative; - float: left; - width: 100%; - height: auto; - min-height: 110px; - margin: 0px auto ; -} -.sheet-valorcaracteristicas1{ - float: left; - width: 45px !important; - height: 40px !important; - border-top: none; - border-left: none; - border-right: none; - border-bottom: none !important; - outline: 0px; - text-align: center; background-color: transparent !important; font-weight: bold; font-size: 28px; font-family: "JetBrains Mono", monospace; color:#000000; - -webkit-inner-spin-button: none; - -webkit-outer-spin-button: none; - -moz-appearance: textfield; - -webkit-appearance: none; - } -.sheet-atributtitol{ - position: relative; - float: left; - width: 100%; - height: auto; - min-height: 25px; - margin: 0px auto ; - text-align: center; - font-family: "JetBrains Mono", monospace; - font-size: 20px; - font-weight: 700; -} -.sheet-atributdau{ - position: relative; - float: left; - width: 100%; - height: auto; - min-height: 35px; - margin: 0px auto ; -} - - -.sheet-titoldificultat{ - position: relative; - float: left; - width: 100%; - height: auto; - min-height: 25px; - margin: 0px auto ; - text-align: center; - font-family: "JetBrains Mono", monospace; - font-size: 20px; - font-weight: 700; - color: #2f2b3c; - } - -.sheet-selectoraccions{ - float: left; - width: 180px; - height: 30px!important; - margin: 2px 0px 0px 20px !important; - padding: 0px 0px; - text-align: center; - color:#ffff00; - font-family: "JetBrains Mono", monospace; - font-size: 12px; - border: 1px solid #ffff00; - background-color: #2f2b3c; -} -.sheet-selectordau{ - float:right; - width: 80px; - height: 30px!important; - margin: 2px 5px 0px 0px !important; - padding: 0px 0px; - text-align: center; - color:#ffff00; - font-family: "JetBrains Mono", monospace; - font-size: 12px; - border: 1px solid #ffff00; - background-color: #2f2b3c; -} - -.sheet-demonbox{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 210px; - margin: 0px auto ; - overflow-y: auto; - scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */ - scrollbar-width: thin; -} - - -/*============= TOP PART FIXE BLOC 1 : COLUMNA B CSS =============*/ - -.sheet-bloc1columnB{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 630px; - margin: 0px auto ; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC1_PETIT_A2_420px.jpg"); - background-repeat:no-repeat; - background-size:auto; - background-position: top; - box-sizing:border-box; -} - -.sheet-fotonombox{ - position: relative; - float: left; - width: 290px; - height: auto; - min-height: 370px; - margin: 0px auto ; - } - -.sheet-avatar-box{ - float:left; - position:relative; - width:290px; - height:270px; - margin: 0% 0% 0% 0%; - padding: 0px; - } -.sheet-avatar-foto { - float: left; - position: relative; - box-sizing: border-box; - width: 220px; - height: auto; - min-height: 220px; - max-height: 220px; - margin: 45px 0px 0px 50px; - overflow: hidden; - border: 2px solid #2f2b3c; -} -.sheet-avatar-foto img{ - float: none; - box-sizing: border-box; - width: 100%; - height: auto; - position: relative; - margin: 0px; - padding: 0px 0px 0px 0px; - text-align: center; - } - -.sheet-arbrelegend{ - position: relative; - float: left; - width: 85px; - height: auto; - min-height: 370px; - margin: 0px auto ; - } -.sheet-box60{ - position: relative; - float: left; - width: 60px; - height: 60px; - margin: 0px auto ; - padding: 0px 0px 0px 0px; - text-align: center; - } -.sheet-box43{ - position: relative; - float: left; - width: 43px; - height: 43px; - margin: 0px auto ; - padding: 0px 0px 0px 0px; - text-align: center; - } - -.sheet-legendbox{ - position: relative; - float: left; - width: 25px; - height: auto; - min-height: 370px; - margin: 0px auto ; - padding: 0px 8px 0px 0px; - text-align: center; - color:#2f2b3c; - font-family: "JetBrains Mono", monospace; - font-size: 16px; - writing-mode: vertical-rl; - text-orientation: mixed; - } - -.sheet-tiradasecreta{ - position: relative; - float: left; - width: 380px; - height:auto; - min-height: 35px; - margin: 5px 0px 0px 0px; - padding: 0px 0px 0px 0px; - border-top: none; - border-left: none ; - border-right: none; - border-bottom: none; - outline: 0px; - background-color: transparent; - text-align: left; - font-size: 12px; - font-family: "JetBrains Mono", monospace; - } - - -.sheet-puntsvida{ - position: relative; - float: left; - width: 100px; - height: auto; - min-height: 200px; - margin: 0px auto ; - } -.sheet-valorpuntsvida{ - float: left; - width: 50px !important; - height: 40px !important; - border-top: none; - border-left: none; - border-right: none; - border-bottom: none !important; - outline: 0px; - text-align: center; background-color: transparent !important; font-weight: bold; font-size: 35px; font-family: "JetBrains Mono", monospace; color:#000000; - -webkit-inner-spin-button: none; - -webkit-outer-spin-button: none; - -moz-appearance: textfield; - -webkit-appearance: none; - } - -.sheet-maxbox{ - position: relative; - float: left; - width: 80px; - height: auto; - min-height: 40px; - margin: 50px auto 0px; - padding: 0px 0px 0px 0px; - text-align: left; - color:#2f2b3c; - font-family: "Manufacturing Consent", system-ui; - font-weight: 400; - font-size: 34px; - transform: rotate(-25deg); - -webkit-transform: rotate(-25deg); /* Safari / Chrome viejos */ - -moz-transform: rotate(-25deg); /* Firefox viejos */ - -ms-transform: rotate(-25deg); /* Internet Explorer 9+ */ - -o-transform: rotate(-25deg); /* Opera antiguos */ - transform-origin: center center; - } - - -.sheet-blessingbox1{ - position: relative; - float: left; - width: 125px; - height: auto; - min-height: 200px; - margin: 0px auto ; - padding: 0px 0px 0px 0px; - box-sizing:border-box; - border: 1px solid #; - } -.sheet-blessingbox2{ - position: relative; - float: left; - width: 45px; - height: auto; - min-height: 180px; - margin: 0px auto ; - padding: 15px 0px 0px 0px; - text-align: left; - color:#2f2b3c; - font-family: "Manufacturing Consent", system-ui; - font-weight: 400; - font-size: 36px; - writing-mode: vertical-rl; - text-orientation: mixed; - } - -.sheet-titolratlla{ - float: left; - width: 230px; - height:40px; - margin: 0px 0px 0px 50px; - padding: 0px 0px 0px 0px ; - text-align: left; - color:#2f2b3c; - font-family: "Manufacturing Consent", system-ui; - font-weight: 400; - font-size: 28px; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC1_RATLLA_TITOL_GRAN_250px.png"); - background-repeat:no-repeat; - background-size:auto; - background-position: top; - } -.sheet-titolratllademon{ - float: left; - width: 230px; - height:40px; - margin: 10px 0px 0px 120px; - padding: 0px 0px 0px 0px ; - text-align: left; - color:#2f2b3c; - font-family: "Manufacturing Consent", system-ui; - font-weight: 400; - font-size: 28px; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC1_RATLLA_TITOL_GRAN_250px.png"); - background-repeat:no-repeat; - background-size:auto; - background-position: top; - } -/*============= CHECKBOXS COLORS CSS =============*/ - -.sheet-check-negre{ -float:left; -width: 15px!important; -height: 15px!important; -color:black; accent-color:black; -border-color: black; -} -.sheet-check-morat{ -float:left; -width: 15px!important; -height: 15px!important; -color:#2f2b3c; accent-color:#2f2b3c; -border-color: #ffff00; -} -.sheet-check-vermell{ -float:left; -width: 15px!important; -height: 15px!important; -color:#e97365; accent-color:#e97365; -border-color: #ffff00; -} - -/*============= CHECKBOX REDONDO A CSS =============*/ - -.sheet-check-legend { - position: relative; - display: inline-block; - width: 43px; - height: 43px; - cursor: pointer; -} -/* Ocultamos el checkbox nativo */ -.sheet-check-legend input[type="checkbox"] { - opacity: 0; - width: 0; - height: 0; - position: absolute; -} -/* Círculo visible */ -.sheet-check-legend span { - position: absolute; - top: 0; - left: 0; - width: 43px; - height: 43px; - border: 2px solid black; - border-radius: 50%; - background-color: white; - box-sizing: border-box; - transition: all 0.2s ease-in-out; -} -/* Hover */ -.sheet-check-legend:hover span { - border-color: #555; -} -/* Checkbox marcado → cambia el color del círculo */ -.sheet-check-legend input[type="checkbox"]:checked + span { - background-color: #2f2b3c; - border-color: black; -} -/* Checkbox marcado → muestra el número */ -.sheet-check-legend input[type="checkbox"]:checked + span::after { - content: "1"; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: yellow; - font-weight: bold; - font-size: 20px; -} -/* Checkbox marcado → muestra número diferente según el name del input */ -.sheet-check-legend input[name="attr_legend1"]:checked + span::after { - content: "1"; -} -.sheet-check-legend input[name="attr_legend2"]:checked + span::after { - content: "2"; -} -.sheet-check-legend input[name="attr_legend3"]:checked + span::after { - content: "3"; -} -.sheet-check-legend input[name="attr_legend4"]:checked + span::after { - content: "4"; -} -/*============= CHECKBOX REDONDO GRAN A CSS =============*/ - -.sheet-check-legendgran { - position: relative; - display: inline-block; - width: 60px; - height: 60px; - cursor: pointer; -} -/* Ocultamos el checkbox nativo */ -.sheet-check-legendgran input[type="checkbox"] { - opacity: 0; - width: 0; - height: 0; - position: absolute; -} -/* Círculo visible */ -.sheet-check-legendgran span { - position: absolute; - top: 0; - left: 0; - width: 60px; - height: 60px; - border: 2px solid black; - border-radius: 50%; - background-color: white; - box-sizing: border-box; - transition: all 0.2s ease-in-out; -} -/* Hover */ -.sheet-check-legendgran:hover span { - border-color: #555; -} -/* Checkbox marcado → cambia el color del círculo */ -.sheet-check-legendgran input[type="checkbox"]:checked + span { - background-color: #e97365; - border-color: black; -} -/* Checkbox marcado → muestra el número */ -.sheet-check-legendgran input[type="checkbox"]:checked + span::after { - content: "5"; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: yellow; - font-weight: bold; - font-family: "JetBrains Mono", monospace; - font-size: 28px; -} -/*============= FIN CHEKBOX REDONDO CSS =============*/ - -.sheet-bloc2{ - position: relative; - float: left; - width: 840px; - height: auto; - min-height: 630px; - margin: 0px auto ; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC2_B2_840px.jpg"); - background-repeat:no-repeat; - background-size:auto; - background-position: top; - background-color: #2f2b3c; -} - - -.sheet-bloc2column1{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 530px; - margin: 0px auto ; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_FONDO_FULLA_A4_420x530px.png"); - background-repeat:no-repeat; - background-size:auto; - background-position: top; - overflow-y: auto; - scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */ - scrollbar-width: thin; -} -.sheet-bloc2column2{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 530px; - margin: 0px auto ; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_FONDO_FULLA_A5_420x530px.png"); - background-repeat:no-repeat; - background-size:auto; - background-position: top; - overflow-y: auto; - scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */ - scrollbar-width: thin; -} - -.sheet-bloc2columnB{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 530px; - margin: 0px auto ; - overflow-y: auto; - scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */ - scrollbar-width: thin; -} - - -/*============= TAB COMBAT ARMES CSS =============*/ - - -.sheet-bloc2column1armes{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 530px; - margin: 0px auto ; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_FONDO_FULLA_ARMAS_A6_420x530px.png"); - background-repeat:no-repeat; - background-size:auto; - background-position: top; - overflow-y: auto; - scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */ - scrollbar-width: thin; -} -.sheet-titolarmes{ - float: left; - width: 230px; - height:40px; - margin: 12px 0px 10px 50px; - padding: 0px 0px 0px 0px ; - text-align: center; - color:#2f2b3c; - font-family: "Manufacturing Consent", system-ui; - font-weight: 400; - font-size: 28px; - } - -.sheet-armescolumn{ - float:left; - position:relative; - width:100%; - height:275px; - margin: 0px 0px; - padding: 0px 0px; - box-sizing: border-box; - display: inline-block; - overflow-y: auto; - scrollbar-color: #ad4c37 transparent; - scrollbar-width: thin; - } -.sheet-objetoscolumn{ - float:left; - position:relative; - width:100%; - height:425px; - margin: 0px 0px; - padding: 0px 0px; - box-sizing: border-box; - display: inline-block; - overflow-y: auto; - scrollbar-color: #ad4c37 transparent; - scrollbar-width: thin; - } -.sheet-siurellscolumn{ - float:left; - position:relative; - width:100%; - height:190px; - margin: 0px 0px; - padding: 0px 0px; - box-sizing: border-box; - display: inline-block; - overflow-y: auto; - scrollbar-color: #ad4c37 transparent; - scrollbar-width: thin; - } -.sheet-aliadoscolumn{ - float:left; - position:relative; - width:100%; - height:190px; - margin: 0px 0px; - padding: 0px 0px; - box-sizing: border-box; - display: inline-block; - overflow-y: auto; - scrollbar-color: #ad4c37 transparent; - scrollbar-width: thin; - } -/*============= TAB COMBAT ARMOR CSS =============*/ - -.sheet-bloc2column1armor{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 530px; - margin: 0px auto ; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_FONDO_FULLA_ARMOR_A6_420x530px.png"); - background-repeat:no-repeat; - background-size:auto; - background-position: top; - overflow-y: auto; - scrollbar-color: #2f2b3c transparent; - scrollbar-width: thin; -} -.sheet-criaturasabox{ - float: left; - width: 355px; - height: 100px; - margin: 0px 0px 0px 40px; - } -.sheet-iniciativabox{ - float: left; - width: 355px; - height: 120px; - margin: 0px 0px 0px 40px; - padding: 0px 0px 0px 0px ; - } -.sheet-frasebold{ - float: left; - width: 320px; - height: 30px; - margin: 2px 0px 0px 5px; - padding: 0px 0px 0px 0px ; - text-align: left; - color:#2f2b3c; - font-family: "JetBrains Mono", monospace; - font-weight: 700; - font-size: 18px; - } -.sheet-defensabox{ - float: left; - width: 355px; - height: 30px; - margin: 0px 0px 0px 40px; - } -.sheet-armadurabox{ - float: left; - width: 355px; - height: 80px; - margin: 0px 0px 0px 40px; - } -.sheet-armaduranom{ - float: left; - width: 230px !important; - height: 30px !important; - margin: 0px 0px 0px 5px; - border: none; - border-bottom: 1px solid #000 !important; - outline: none; - background: transparent !important; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - font-weight: bold; - text-align: left; - color: #2f2b3c; - appearance: textfield; -} - -.sheet-armadurabotons{ - float: left; - width: 220px !important; - height: 40px !important; - margin: 5px 0px 0px 15px; - border: none; -} - -.sheet-escudo{ - float: left; - width: auto; - min-width: 40px; - height: 30px !important; - margin: 0px 0px 0px 0px; - padding: 5px 5px 0px 5px; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - font-weight: bold; - text-align: center; - color: #2f2b3c; - appearance: textfield; -} - - -/*============= TAB COMBAT RADIOBOTONS ARMOR CSS =============*/ - - -/* Contenedor general del grupo */ -.sheet-armorradio { - display: flex; - align-items: center; - gap: 3px; - font-family: "JetBrains Mono", monospace; - font-size: 12px; - color: black; -} - -/* Ocultamos el radio nativo */ -.sheet-armorradio input[type="radio"] { - display: none; -} - -/* Estilo base del label (simula el botón circular o cuadrado) */ -.sheet-armorradio label { - position: relative; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; -} - -/* El “botón” visual */ -.sheet-armorradio label span { - display: inline-flex; - align-items: center; - justify-content: center; - width: 30px; - height: 30px; - border: 2px solid #000; - border-radius: 50%; /* Si quieres cuadrado, quita esta línea */ - background-color: white; - color: black; - font-weight: bold; - transition: all 0.2s ease-in-out; -} - -/* Hover: cambia el color del borde */ -.sheet-armorradio label:hover span { - border-color: #555; -} - -/* Cuando está marcado: color de fondo y texto */ -.sheet-armorradio input[type="radio"]:checked + span { - background-color: #2f2b3c; - color: #ffff00; - border-color: black; -} - -/* Opcional: mejora de accesibilidad */ -.sheet-armorradio [role="radiogroup"] label:focus-within span { - outline: 2px solid #000; - outline-offset: 2px; -} - - -/*============= CLASS CSS =============*/ - -.sheet-barraselectraza{ - float: left; - position:relative; - width: 90% !important; - height: 34px; - margin: 0px 0px 0px 5%; - padding: 0px 0px; - font-family: "JetBrains Mono", monospace; - font-size: 18px; - text-align: center; - color: #000000; - border: 3px solid #000000; - cursor: pointer; - } - -.sheet-imagenclase { - position: relative; - float: left; - width: 400px; - height: 456px; - margin: 0px 10px; - /* text-align: center; */ - min-height: 340px; -} -.sheet-razaimagen { - width: 100%; - height: auto; - min-height: 456px; - object-fit: contain; -} - -/*============= PERSONAJE TAB 1 CSS =============*/ - -.sheet-characterinfo{ - width:330px!important; - height:20px; - min-height: 20px; - max-height: 20px!important; - margin:0px 0px 0px 50px!important; - padding: 0px 0px 0px 0px; - border-top: none; - border-left: none ; - border-right: none; - border-bottom: #ccc; - outline: 0px; - text-align: left; - background-color: transparent; - font-size: 16px; - font-family: "JetBrains Mono", monospace; - resize: none; - } - -/*=================== CARACTERÍSTICAS TAB 2 CSS ===================*/ - -.sheet-box-check5{ - float: left; - width: 20px; - height: 15px; - margin: 0px 0px 0px 15px; - } -.sheet-mycheck{ - float: left; - filter: hue-rotate(170deg) brightness(0.8); - } -/* filter: invert(100%) hue-rotate(1040deg) brightness(0.8); */ -.sheet-mycheck:checked { -} - -/*=================== COMBATE TAB 3 CSS ===================*/ - - -.sheet-armaselect-A, -.sheet-armaselect-B { - float: left; - height: 30px !important; - margin: 0 0 0 5px !important; - border: none; - border-bottom: 1px solid #000 !important; - outline: 0; - background-color: transparent !important; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - font-weight: bold; - text-align: center; - color: #000; - -moz-appearance: textfield; - -webkit-appearance: none; -} -.sheet-armaselect-A { width: 35px !important; } -.sheet-armaselect-B { width: 115px !important; } - -.sheet-item2A{ - float: left; - width: 145px !important; - height: 30px !important; - margin: 0px 0px 0px 35px; - border: none; - border-bottom: 1px solid #000 !important; - outline: none; - background: transparent !important; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - font-weight: bold; - text-align: left; - color: #000; - appearance: textfield; /* reemplaza a -webkit y -moz */ -} -.sheet-item2B{ - float: left; - width: 60px !important; - height: 30px !important; - margin: 0px 0px 0px 5px; - border: none; - border-bottom: 1px solid #000 !important; - outline: none; - background: transparent !important; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - font-weight: bold; - text-align: center; - color: #000; - appearance: textfield; /* reemplaza a -webkit y -moz */ -} -.sheet-item2C{ - float: left; - width: 310px !important; - height: 30px !important; - margin: 0px 0px 0px 5px; - border: none; - border-bottom: 1px solid #000 !important; - outline: none; - background: transparent !important; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - font-weight: bold; - text-align: left; - color: #000; - appearance: textfield; /* reemplaza a -webkit y -moz */ -} -.sheet-item2detalles{ - float: none; - width: 100%; - height: auto; - min-height: 35px; - margin: 0px auto 5px ; - - } -.sheet-item2detalles textarea{ - float: none; - width: 350px; - height: 30px; - min-height: 50px; - margin: 5px 5px 0px 40px; - resize: vertical; - box-sizing: border-box; - outline: 0px; - font-family: "JetBrains Mono", monospace; - font-size: 12px; - color: #000000; - background-color: transparent; border: 1px solid #000000; - } -.sheet-item2magiadetalles{ - float: none; - width: 100%; - height: auto; - min-height: 35px; - margin: 0px auto 5px ; - - } -.sheet-item2magiadetalles textarea{ - float: none; - width: 350px; - height: 30px; - min-height: 150px; - margin: 5px 5px 0px 40px; - resize: vertical; - box-sizing: border-box; - outline: 0px; - font-family: "JetBrains Mono", monospace; - font-size: 12px; - color: #000000; - background-color: transparent; border: 1px solid #000000; - } -.sheet-objeto{ - float: left; - width: 270px !important; - height: 30px !important; - margin: 0px 0px 0px 35px; - border: none; - border-bottom: 1px solid #000 !important; - outline: none; - background: transparent !important; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - font-weight: bold; - text-align: left; - color: #000; - appearance: textfield; /* reemplaza a -webkit y -moz */ -} -.sheet-pergamino{ - float: left; - width: 230px !important; - height: 30px !important; - margin: 0px 0px 0px 35px; - border: none; - border-bottom: 1px solid #000 !important; - outline: none; - background: transparent !important; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - font-weight: bold; - text-align: left; - color: #000; - appearance: textfield; /* reemplaza a -webkit y -moz */ -} -.sheet-pergaminocargas{ - float: left; - width: 35px !important; - height: 30px !important; - margin: 0px 0px 0px 5px; - border: none; - border-bottom: 1px solid #000 !important; - outline: none; - background: transparent !important; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - font-weight: bold; - text-align: center; - color: #000; - appearance: textfield; /* reemplaza a -webkit y -moz */ -} -/*============= DETAILS CSS =============*/ - -details{ - color: #000000 !important; - padding: 10px 0px 0px; - cursor: pointer; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - } -details:hover{ - color: #000000 !important; - padding: 10px 0px 0px; - cursor: pointer; - font-family: "JetBrains Mono", monospace; - font-size: 14px; - } - - - -/*============= GENERAL CSS =============*/ -.charsheet .sheet-invisible { - display: none; -} - -.sheet-width100{ - float:left; - position:relative; - width:100%; - height:auto; - min-height: 30px; - margin: 0px 0px; - padding: 0px 0px; - box-sizing: border-box; - display: inline-block; - } -.sheet-columnamig{ - float:left; - position:relative; - width:49%; - height:auto; - margin: 0% 0% 0% 1%; - padding: 0px; - } - -/*============= ESPACIADORES Y SEPARADORES CSS =============*/ -.sheet-espai10{ - float:none; - position:relative; - width:100%; - height:10px; - margin:0 auto; - padding:0} - - -.sheet-espai-5,.sheet-espai-10,.sheet-espai-15,.sheet-espai-20,.sheet-espai-30,.sheet-espai-40,.sheet-espai-50,.sheet-espai-60{ - float:left; - position:relative; - width:100%; - margin:0 auto; - padding:0} - -.sheet-espai-5{height:5px} -.sheet-espai-10{height:10px} -.sheet-espai-15{height:15px} -.sheet-espai-20{height:20px} -.sheet-espai-30{height:30px} -.sheet-espai-40{height:40px} -.sheet-espai-50{height:50px} -.sheet-espai-60{height:60px} - - -/*============= REPCONTROL BOTONS CSS =============*/ -.repcontrol { - display: flex; - width: 96%; - justify-content: flex-end; - clear: both; -} -.repcontrol_add, -.repcontrol_edit, -.repcontrol_add:hover, -.repcontrol_edit:hover, -.repcontrol_add:active, -.repcontrol_edit:active -.repcontrol_add:focus, -.repcontrol_edit:focus{ - width: 2em; - height: 1.2em; - margin: 1px; - padding: 0 1px 3px 1px; - box-shadow: none; - color: transparent !important; - text-shadow: none; - outline: transparent !important; -} -.repcontrol_move { - float: left; - margin-left: 5px; - cursor: move; -} -button.btn.repcontrol_del:after, -button.btn.repcontrol_del:hover { - color: black; -} -button.btn.repcontrol_edit:after { - font-family: Pictos; - content: '('; - color: black; - margin: 0 0 0 -38px; -} -.repcontainer.ui-sortable.editmode ~ .repcontrol button.btn.repcontrol_edit:after { - margin: 0 0 0 -28px; - content: ')'; -} -button.btn.repcontrol_add:after { - font-family: Pictos; - content: '&'; - color: black; - margin: 0 0 0 -31px; -} -button.btn:hover.repcontrol_edit:after, -button.btn:hover.repcontrol_add:after, -button.btn:hover.repcontrol_del:after { - color: #73940D; -} -a.btn.repcontrol_move:hover { - color: #73940D; -} -button.btn.btn-danger.pictos.repcontrol_del:hover { - color: #fff; -} - -/*=================== FIRMA CSS ===================*/ - -.sheet-generadorpersonatges { - position: absolute; - left: 20px; - bottom: 4px; - float: left; - width: auto; - height: 30px; - box-sizing:border-box; - z-index:2; -} -.sheet-PJBTN { - width: 100%; - height: 20px; - padding: 1px 1px 2px 1px !important; - background-color: #ffff00!important; - color: #000; - border: 2px solid #000; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease-in-out; - box-shadow: 0 2px 4px rgba(0,0,0,0.2); - background-image: none!important; -} -.sheet-PJBTN:hover { - background-color: #7fc8c7!important; - box-shadow: 0 3px 6px rgba(0,0,0,0.3); - transform: translateY(-1px); - color: #ffff00; - border: 2px solid #ffff00; -} -.sheet-PJBTN:active { - background-color: #ffcc00; - transform: translateY(1px); -} -.sheet-PJBTN span { - display: inline-block; - pointer-events: none; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-style: normal; - font-size: 12px; - text-align: center; -} - -.sheet-firma-foot{ - float: left; - width: 100%; - height: 15px; - min-height: 20px; - margin: 20px auto 5px; - font-family: "JetBrains Mono", monospace; - font-weight: 500; - font-size: 11px; - text-align: center; - color: #ffff00; -} - -.sheet-logoeditorial { - position: absolute; - right: 15px; - bottom: 4px; - float: right; - width: 60px; - height: 44px; - box-sizing:border-box; - z-index:2; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/LOGO_CAP_DE_PORK.png"); - background-repeat:no-repeat; - background-size:cover; - background-position: center; -} - -/*=================== MEDIA CSS ===================*/ -@media screen and (max-width: 500px){ - .sheet-contenedorvj{ - position:relative; - float:left; - width:420px; - max-width: 420px; - height:auto; - min-height: 600px; - margin: 0px auto; - padding: 0px 0px; - } - .sheet-bloc1 { - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 630px; - margin: 0px auto; - } - .sheet-bloc2{ - position: relative; - float: left; - width: 420px; - height: auto; - min-height: 630px; - margin: 0px auto ; - background-color: #2f2b3c; -} - -.sheet-button0, -.sheet-button1, -.sheet-button2, -.sheet-button3, -.sheet-button4 { - width: auto; - height: 24px; - background: #7fc8c7; - color: #ffff00; - margin: 5px 0 0 5px; - padding: 8px 10px 8px; - text-align: center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-style: normal; - font-size: 22px; - border: 2px solid #ffff00; - - /* Bordes redondeados compatibles */ - border-radius: 5px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - - /* Transición suave para el hover */ - transition: all 0.2s ease-in-out; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - - /* Cursor tipo botón */ - cursor: pointer; -} - -.sheet-button0:hover, -.sheet-button1:hover, -.sheet-button2:hover, -.sheet-button3:hover, -.sheet-button4:hover{ - width: auto; - height: 24px; - background: #ffff00; - color: #000000; - margin: 5px 0px 0px 5px; - padding: 8px 10px 8px; - text-align: center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-style: normal; - font-size: 22px; - border: 2px solid #000000; - } - -.sheet-button0, -.sheet-button0:hover, -.sheet-button0:active{ - margin-left: 5px; -} - - -.sheet-generadorpersonatges { - position: absolute; - left: 25%; - bottom: 50px; - float: left; - width: 50%; - height: 30px; - box-sizing:border-box; - z-index:2; -} - -.sheet-firma-foot{ - float: left; - width: 100%; - height: 15px; - min-height: 30px; - margin: 50px auto 5px; - font-family: "JetBrains Mono", monospace; - font-weight: 500; - font-size: 11px; - text-align: center; - color: #ffff00; -} - -.sheet-logoeditorial { - position: absolute; - right: 30px; - bottom: 32px; - float: right; - width: 60px; - height: 44px; - box-sizing:border-box; - z-index:2; - background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/LOGO_CAP_DE_PORK.png"); - background-repeat:no-repeat; - background-size:cover; - background-position: center; -} -} -@media screen and (min-width: 940px){ - - - } -@media screen and (min-width: 1000px){ - .sheet-contenedorvj{ - - } - } -@media screen and (min-width: 1050px){ - .sheet-contenedorvj{ - - } - } -@media screen and (min-width: 1100px){ - .sheet-contenedorvj{ - position:relative; - float:left; - width:1680px; - max-width: 1680px; - height:auto; - min-height: 600px; - margin: 0px auto; - padding: 0px 0px; - } - } - -/*============= VJBTN GRANDE PORK MORT CSS =============*/ - -.sheet-VJBTN{ - float: left; - padding: 0px 0px 0px 0px!important; - font-size: 35px!important; - background: none!important; - border: none!important; - text-align: center !important; - color: #2f2b3c !important; -} -.sheet-VJBTN:hover{ - padding: 0px 0px 0px 0px!important; - font-size: 35px!important; - background: none; - border: none; - -webkit-transition: background-position 0.5s linear; - -moz-transition: background-position 0.5s linear; - -ms-transition: background-position 0.5s linear; - -o-transition: background-position 0.5s linear; - transition: background-position 0.5s linear; - color: #000066 !important; -} -.sheet-VJBTN:active{ - padding: 0px 0px 0px 0px!important; - font-size: 35px!important; - background: none!important; - border: none!important; - box-shadow: none; - -webkit-transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -ms-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; - color: #3300cc !important; - content:"A"; -} - -.ui-dialog .charsheet button.sheet-VJBTN[type=roll]::before { - font-family: dicefontd20!important; - border: none!important; - background-color: transparent!important; - content: "A"!important; -} -.ui-dialog .charsheet button[type=roll]::before { - content: none ; -} - - -/*============= VJBTN PEQUE PORK MORT CSS =============*/ - -.sheet-VJBTN2{ - float: left; - padding: 0px 0px 0px 0px!important; - font-size: 25px!important; - background: none!important; - border: none!important; - text-align: center !important; - color: #2f2b3c !important; -} -.sheet-VJBTN2:hover{ - padding: 0px 0px 0px 0px!important; - font-size: 25px!important; - background: none; - border: none; - -webkit-transition: background-position 0.5s linear; - -moz-transition: background-position 0.5s linear; - -ms-transition: background-position 0.5s linear; - -o-transition: background-position 0.5s linear; - transition: background-position 0.5s linear; - color: #000066 !important; -} -.sheet-VJBTN2:active{ - padding: 0px 0px 0px 0px!important; - font-size: 25px!important; - background: none!important; - border: none!important; - box-shadow: none; - -webkit-transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -ms-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; - color: #3300cc !important; - content:"A"; -} - -.ui-dialog .charsheet button.sheet-VJBTN2[type=roll]::before { - font-family: dicefontd20!important; - border: none!important; - background-color: transparent!important; - content: "A"!important; -} - -/*============= CHECK CSS =============*/ - -/* Chrome, Safari, Edge, Opera */ -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; } - -/* Firefox */ -input[type=number] { - -moz-appearance: textfield; } - - -/*=================== PORK MORT ATAQUE ROLL ROLLTEMPLATE CSS ===================*/ - -/* Smaller margins - remove these if you want the huge default left margin */ -.sheet-rolltemplate-porkmortataque { - margin-left: -37px; -} -.sheet-rolltemplate-porkmortataque .sheet-fotofondo { - width: 300px; - height: auto; - min-height: 100px; - overflow: auto; - background-image: none; - background-repeat: no-repeat; - background-size: cover; - background-position: top; - background-color: #ffffff; - box-sizing: border-box; - border-top: 10px solid #2f2b3a;; - border-left: 10px solid #fef68e; - border-right: 10px solid #2f2b3a; - border-bottom: 10px solid #fef68e; -} - -/* Header formatting - title and subtitle */ -.sheet-rolltemplate-porkmortataque .sheet-header { - height: 40px; - background-color: #2f2b3a; - /* change text-align to center to center the header text */ - padding: 5px; - -} -.sheet-rolltemplate-porkmortataque .sheet-title { - margin: 0px 0px 0px 0px; - text-align: center; - color: #fef68e; - text-transform: uppercase; - font-family: "JetBrains Mono", monospace; - font-size: 20px; - font-weight: bold; -} -.sheet-rolltemplate-porkmortataque .sheet-subtitle { - margin: 2px 0px 0px 0px; - font-family: "JetBrains Mono", monospace; - font-size:12px; - text-align: center; - color: #fef68e; -} - - -.textchatcontainer .inlinerollresult { - background-color: #fef68e; - border: 2px solid #fef68e; - padding: 3px 3px 0px 3px!important; - font-weight: bold; - cursor: help; - /* line-height: 20px; */ - font-size: 1.1em; -} - -/* Make even-numbered rows grey */ -.sheet-rolltemplate-porkmortataque .sheet-contento :nth-child(4n+3), -.sheet-rolltemplate-porkmortataque .sheet-contento :nth-child(4n) { - background-color: transparent !important; - border: none!important; -} - - -.sheet-rolltemplate-porkmortataque .sheet-filatemplate1{ - position:relative; - float:left; - width:90%; - height:auto; - min-height: 15px; - margin: 0% 5%; - padding: 8px 0px; - color: #000000; - text-align:center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-size: 16px; - font-style: normal; - } -.sheet-rolltemplate-porkmortataque .sheet-filatemplate2{ - position:relative; - float:left; - width:90%; - height:auto; - min-height: 15px; - margin: 0% 5%; - padding: 10px 0px 10px 0px; - color: #000000; - text-align:center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-size: 20px; - font-style: normal; - } - -.sheet-rolltemplate-porkmortataque .sheet-filatemplate3{ - position:relative; - float:left; - width:90%; - height:auto; - min-height: 15px; - margin: 0% 5%; - padding: 10px 0px 10px 0px; - color: #000000; - text-align:center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-size: 20px; - font-style: normal; - } - - -/*=================== PORK MORT ATRIBUTS ROLL ROLLTEMPLATE CSS ===================*/ - -/* Smaller margins - remove these if you want the huge default left margin */ -.sheet-rolltemplate-porkmortatributs { - margin-left: -37px; -} -.sheet-rolltemplate-porkmortatributs .sheet-fotofondo { - width: 300px; - height: auto; - min-height: 130px; - overflow: auto; - background-image: none; - background-repeat: no-repeat; - background-size: cover; - background-position: top; - background-color: #ffffff; - box-sizing: border-box; - border-top: 10px solid #2f2b3a;; - border-left: 10px solid #94c5c6; - border-right: 10px solid #2f2b3a; - border-bottom: 10px solid #94c5c6; -} - -/* Header formatting - title and subtitle */ -.sheet-rolltemplate-porkmortatributs .sheet-header { - height: 40px; - background-color: #2f2b3a; - /* change text-align to center to center the header text */ - padding: 5px; - -} -.sheet-rolltemplate-porkmortatributs .sheet-title { - margin: 0px 0px 0px 0px; - text-align: center; - color: #fef68e; - text-transform: uppercase; - font-family: "JetBrains Mono", monospace; - font-size: 20px; - font-weight: bold; -} -.sheet-rolltemplate-porkmortatributs .sheet-subtitle { - margin: 2px 0px 0px 0px; - font-family: "JetBrains Mono", monospace; - font-size:12px; - text-align: center; - color: #fef68e; -} - - -.textchatcontainer .inlinerollresult { - background-color: #fef68e; - border: 2px solid #fef68e; - padding: 3px 3px 0px 3px!important; - font-weight: bold; - cursor: help; - /* line-height: 20px; */ - font-size: 1.1em; -} - -/* Make even-numbered rows grey */ -.sheet-rolltemplate-porkmortatributs .sheet-contento :nth-child(4n+3), -.sheet-rolltemplate-porkmortatributs .sheet-contento :nth-child(4n) { - background-color: transparent !important; - border: none!important; -} - - -.sheet-rolltemplate-porkmortatributs .sheet-filatemplate1{ - position:relative; - float:left; - width:90%; - height:auto; - min-height: 15px; - margin: 0% 5%; - padding: 8px 0px; - color: #000000; - text-align:center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-size: 16px; - font-style: normal; - } -.sheet-rolltemplate-porkmortatributs .sheet-filatemplate2{ - position:relative; - float:left; - width:90%; - height:auto; - min-height: 15px; - margin: 0% 5%; - padding: 10px 0px 10px 0px; - color: #000000; - text-align:center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-size: 20px; - font-style: normal; - } - - - -/*=================== PORKMORT DADOS ROLL ROLLTEMPLATE CSS ===================*/ - -/* Smaller margins - remove these if you want the huge default left margin */ -.sheet-rolltemplate-porkmortdados { - margin-left: -37px; -} -.sheet-rolltemplate-porkmortdados .sheet-fotofondo { - width: 300px; - height: auto; - min-height: 100px; - overflow: auto; - background-image: none; - background-repeat: no-repeat; - background-size:cover; - background-position: top; - background-color: #ffffff; - box-sizing: border-box; - border-top: 10px solid #2f2b3a;; - border-left: 10px solid #e97365; - border-right: 10px solid #2f2b3a; - border-bottom: 10px solid #e97365; -} - -/* Header formatting - title and subtitle */ -.sheet-rolltemplate-porkmortdados .sheet-header { - height: 40px; - background-color: #2f2b3a; - /* change text-align to center to center the header text */ - padding: 5px; - -} -.sheet-rolltemplate-porkmortdados .sheet-title { - margin: 0px 0px 0px 0px; - text-align: center; - color: #fef68e; - text-transform: uppercase; - font-family: "JetBrains Mono", monospace; - font-size: 20px; - font-weight: bold; -} -.sheet-rolltemplate-porkmortdados .sheet-subtitle { - margin: 2px 0px 0px 0px; - font-family: "JetBrains Mono", monospace; - font-size:12px; - text-align: center; - color: #fef68e; -} - - -.textchatcontainer .inlinerollresult { - background-color: #fef68e; - border: 2px solid #fef68e; - padding: 3px 3px 0px 3px!important; - font-weight: bold; - cursor: help; - /* line-height: 20px; */ - font-size: 1.1em; -} - -/* Make even-numbered rows grey */ -.sheet-rolltemplate-porkmortdados .sheet-contento :nth-child(4n+3), -.sheet-rolltemplate-porkmortdados .sheet-contento :nth-child(4n) { - background-color: transparent !important; - border: none!important; -} - -.sheet-rolltemplate-porkmortdados .sheet-filatemplate1{ - position:relative; - float:left; - width:90%; - height:auto; - min-height: 15px; - margin: 0% 5%; - padding: 8px 0px; - color: #2f2b3a; - text-align:center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-size: 16px; - font-style: normal; - } -.sheet-rolltemplate-porkmortdados .sheet-filatemplate2{ - position:relative; - float:left; - width:90%; - height:auto; - min-height: 15px; - margin: 0% 5%; - padding: 10px 0px 10px 0px; - color: #2f2b3a; - text-align:center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-size: 20px; - font-style: normal; - } - -.sheet-rolltemplate-porkmortdados .sheet-filatemplate4{ - position:relative; - float:left; - width:90%; - height:auto; - min-height: 0px; - margin: 0% 5%; - padding: 5px 0px; - color: #2f2b3a; - text-align:center; - font-family: "JetBrains Mono", monospace; - font-weight: 400; - font-size: 16px; - font-style: normal; - }