@font-face {
       font-family: Precious;
       src: url(Precious.ttf)
   }

   html {
       scroll-padding: 8rem;
   }

   body {
       margin: 0;
       color: #f0e6d2;
       background-color: #1a1a1a;
       font-family: Roboto Mono;
   }

   header {
       background-color: #f4ead6;
       border: #a31e2b solid 2px;
       position: sticky;
       top: 0;
       color: #2a2a2a;

   }

   header>h2 {
       text-align: center;
       margin-top: 0;
   }

   footer {
       font-size: 0.75rem;
       padding: 2rem 0;
       left: 0;
       width: 100%;
       text-align: center;
   }


   h1 {
       background-color: #1a1a1a;
       text-align: center;
   }

   h3 {
       background-color: #1e1e1e;
       text-align: center;
       font-weight: normal;
       color: #CCCCCC;
       padding: 1rem 0;
       display: flex;
       align-items: center;
       justify-content: space-evenly;
   }

   .menu-groot {

       display: none;
       grid-template-columns: 0.75fr 0.75fr 0.75fr 1fr 1fr 1fr;
       grid-auto-flow: column;
       justify-items: center;
       list-style-type: none;
       margin: 1rem auto;
       padding: 0;
       background-color: #f4ead6;
   }

   .menu-groot ul {
       padding: 0;
   }

   .menu-groot li {
       display: inline;
   }

   .menu-groot li a {
       color: #2a2a2a;
       text-decoration: none;
       font-weight: bold;
   }

   .menu-groot li a:hover {
       color: #B8860B;

   }

   .nagivatie2 {
       position: relative;
       background-color: #f4ead6;
       padding: 1rem 0 0 1rem;
   }

   .hamburger {
       display: block;
       width: 30px;
       cursor: pointer;
       background-color: #f4ead6;
       border: solid #a31e2b 2px;
       padding: 2px;
   }

   .hamburger span {
       display: block;
       height: 3px;
       background: #a31e2b;
       margin: 5px 0;
       transition: 0.3s;
   }

   #menu-tonen {
       display: none;
   }

   .menu-klein {
       list-style: none;
       padding: 0;
       margin: 10px 0 10px 0;
       display: none;
       background: #444;
   }

   .menu-klein li {
       border-top: 1px solid #a31e2b;
       box-shadow:
           0rem 1px #a31e2b,
           0rem 0rem 0.4rem #a31e2b;
   }

   .menu-klein li a {
       display: block;
       padding: 10px;
       text-decoration: none;
       color: #2a2a2a;
       background-color: #fdf7ec;
   }

   #menu-tonen:checked+.hamburger+.menu-klein {
       display: block;
   }

   .homepage img {
       display: block;
       margin: auto;
       padding: 0 0 1rem 0;
   }

   .homepage p {
       text-align: center;
   }

   .homepage a {
       color: #a31e2b;
       display: inline;
       text-align: center;
   }

   .homepage #linknaarvoorstelling {
       display: block;
   }

   .homepage + footer, .contactformulier + footer{
    position: fixed;
    bottom: 0px;
   }

   .homepage,
   .voorstelling {
       padding: 0 1rem;
   }

   .voorstelling .video {
       display: flex;
       justify-content: center;
   }

   .voorstelling a {
       color: #a31e2b;

   }

   .voorstelling a:hover {
       color: #B8860B;
   }

   .voorstelling iframe {
       aspect-ratio: 16 / 9;
       width: 100%;

   }

   #dobbelstenen {
       width: 3rem;
   }

   .tips {
       padding: 0 1rem;
   }

   .tips img {
       width: 15%;
       display: block;
       margin: auto;
   }

   .fotos{
    text-align: center;

   }

   .gallerij {
       display: flex;
       flex-flow: column;
       margin-top: 1rem;
       justify-items: center;
       align-items: center;
       gap: 1rem;

   }



   .gallerij figure {

       display: flex;
       flex-flow: column wrap;
       margin: 0;

   }

   figcaption {
       caption-side: bottom;
       width: 100%;
       text-align: center;
       font-size: 0.95rem;
   }

   .gallerij img {
       border: 2px solid #B8860B;

   }

   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
   }

   input[type=number] {
       -moz-appearance: textfield;
   }



   .charactersheet {
       display: grid;
       background-color: #a31e2b;
       grid-template-columns: 1fr;
       grid-template-rows: auto;
       gap: 2px;
       padding: 0 2px 2px 2px;
       justify-self: center;
       font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   }

   .charactersheet h3 {
       background-color: #2e2e2e;
       padding: 0;
       font-size: 1.25rem;
   }

   .charactersheet input {
       font-family: inherit;
   }

   .summary {
       display: grid;
       grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr);
       grid-template-rows: 1.5fr 1fr;
       background-color: #1a1a1a;
       padding: 0.5rem;
       box-sizing: border-box;
       justify-self: center;
       gap: 2px;

   }

   .summary img {
       grid-column: 1;
       grid-row: 1 /span 2;
       max-width: 90%;
       justify-self: center;
       align-self: center;
       border: #B8860B solid;
   }

   .summary #summary-sword {
       display: none;
   }


   .summary fieldset {
       margin: 0;
       padding: 0;
       border: 0;
       min-width: 0;
       max-width: fit-content;
       align-self: center;
       font-size: 1rem;
   }

   .summary input {
       font-size: 1rem;
       background-color: #1a1a1a;
       min-width: 0;
       max-width: 90%;
       box-sizing: border-box;
       padding: 0;
       border: 0;
       font-family: inherit;
   }

   .summary-name {
       grid-column: 2 /span 3;
       grid-row: 1;
   }

   .summary-name input {
       width: 70%
   }

   .summary-species {
       grid-column: 2;
       grid-row: 2;
   }

   .summary-class {
       grid-column: 3;
       grid-row: 2;
   }

   .summary-level {
       grid-column: 4;
       grid-row: 2;
   }

   .summary-level input {
       width: 30%;
   }

   .summary #name-char{
    font-family: Precious;

   }

   .death-saves {
       display: none;
   }

   .hp-mobile {
       grid-column: 5;
       grid-row: 1;
       display: grid;
       grid-template-columns: 1fr 0.5fr 1fr;
       grid-template-rows: 1fr 1fr;
       justify-items: start;
       box-sizing: border-box;
       padding: 0;
   }

   .hp-mobile #label-hp {
       grid-column: 1 /span 3;
       justify-self: center;
       align-self: center;
       text-align: center;
       font-size: 1.25rem;
   }

   .hp-mobile #seperator {
       justify-self: center;
       align-self: end;
       font-size: 2.3rem;
   }

   .hp-mobile input {
       width: 100%;
       height: fit-content;
       justify-self: center;
       align-self: end;
       border: solid #B8860B;
       text-align: center;
   }

   .summary-xp {
       grid-column: 5;
       grid-row: 2;

   }

   .summary #xp {
       width: 60%;
       max-width: unset;
   }

   .hp {
       background-color: #2e2e2e;
       display: none;
   }

   .abilities {
       background-color: #2e2e2e;
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       grid-template-rows: auto auto;
       gap: 1rem;
       text-align: center;
       box-sizing: border-box;
       justify-self: stretch;
       padding: 1rem;
   }

   .abilities>* {
       font-size: 1.25rem;
       justify-self: center;
       box-sizing: border-box;
   }

   .abilities>*>.score {
       width: 35%;
       height: 2rem;
       font-size: 1.4rem;
       text-align: center;
       box-sizing: border-box;
   }

   .abilities>*>.number {
       width: 30%;
       height: 1.5rem;
       background-color: #a31e2b;
       align-content: center;
       text-align: center;
       font-size: 1rem;
       border: 2px solid #B8860B;
       border-radius: 35%;
       color: #CCCCCC;
       box-sizing: border-box;
   }

   .savingthrows {
       background-color: #2e2e2e;
       padding: 1rem;
   }

   .savingthrows>ul {
       background-color: #2e2e2e;
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(4, 1fr) 1.5fr;
       margin: 0;
       list-style: none;
       padding: 0;
   }

   .savingthrows h3 {
       grid-column: 1 /span 2;
       grid-row: 1;
       text-align: center;
       background-color: #2e2e2e;
       padding: 0;
       border: none;
       font-weight: normal;
       outline: none;
   }

   .savingthrows #strength {
       grid-column: 1;
       grid-row: 2;

   }

   .savingthrows #dex {
       grid-column: 2;
       grid-row: 2;
   }

   .savingthrows #constitution {
       grid-column: 1;
       grid-row: 3;
   }

   .savingthrows #intelligence {
       grid-column: 2;
       grid-row: 3;
   }

   .savingthrows #wisdom {
       grid-column: 1;
       grid-row: 4;
   }

   .savingthrows #charisma {
       grid-column: 2;
       grid-row: 4;
   }

   .savingthrows .number {
       width: 1.25rem;
       height: 1.25rem;
       font-size: 1.25rem;

   }

   .savingthrows label {
       font-size: 1.25rem;
   }

   .savingthrows .text {
       grid-row: 5;
       grid-column: 1 /span 2;

   }

   .savingthrows #saving-throw-modifiers {
       font-size: 1rem;

   }

   .skills-grid>h3 {
       grid-column: 1 /span 2;
       text-align: center;
   }

   .skills {
       background-color: #2e2e2e;
       font-size: 0.95rem;
   }

   .skills-grid {
       display: grid;
       grid-template-columns: 1fr 0.95fr;
       grid-template-rows: repeat(11, 1fr);
       grid-auto-flow: column;
   }

   .skills-cell {
       padding: 0;
       margin: 0;
       border: 0;
       align-content: center;
   }

   .skills-cell:nth-child(-n+11) {
       padding-left: 0.5rem;

   }

   .skills-cell:nth-child(n+12) {
       padding-left: 0.20rem;

   }

   .skills .extra-text {
       border: 0;
       background-color: #2e2e2e;
       width: 70%;
   }

   .skills .radio {

       accent-color: #a31e2b;
       text-align: center;
       vertical-align: middle;
       margin: 0;
   }

   .skills .number {
       width: 1.2rem;
       height: 1.2rem;
       font-size: 0.95rem;
       text-align: center;
       vertical-align: middle;
       padding: 0;
       border: 0;
   }

   .offensedefense {
       background-color: #2e2e2e;
       display: flex;
       flex-flow: row wrap;
       gap: 1rem;
       padding: 1rem;
       margin: auto;
       width: 100%;
       box-sizing: border-box;
   }

   .offensedefense :nth-child(-n+2) {
       flex: 1 1 0;
   }

   .offensedefense :nth-child(n+3) {
       flex: 100%;
   }

   .offensedefense>* {
       text-align: center;
       border: 2px solid #B8860B;
       border-radius: 15%;
       align-self: center;
       padding: 0.5rem 0;
       font-size: 1.25rem;
       box-sizing: border-box;
       max-width: 100%;
   }

   .offensedefense>*>.number {
       width: 2.5rem;
       height: 2.5rem;
       font-size: 1.25rem;
       border: 0;
       margin: 1rem;
       text-align: center;
   }

   .offensedefense>*>#defenses,
   .offensedefense>*>#speed {
       width: 70%;
       height: 3rem;
       font-size: 1.25rem;
       border: 0;
       box-sizing: border-box;
       margin: 0.5rem;
   }



   .hp-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       grid-template-rows: 0.5fr 0.5fr 0.5fr;
       text-align: center;
       font-size: 2.5rem;
       justify-items: center;
       align-items: center;
   }

   .hp-grid input {
       width: 30%;
       height: 50%;
       font-size: 2rem;
   }

   .hp-grid>h3 {
       grid-row: 1;
       grid-column: 1/ span 3;
   }

   .proficiencies {
       background-color: #2e2e2e;
       display: grid;
       grid-template-columns: 1fr 2fr;
       grid-row: auto;
       gap: 2rem;
       padding: 0 0 2rem 0;
       font-size: 1.25rem;
       align-items: center;
   }

   .proficiencies>.text {
       font-size: 1rem;
   }

   .proficiencies h3 {
       grid-column: 1 /span 2;
       text-align: center;
   }

   .senses {
       background-color: #2e2e2e;
   }

   .senses-grid {
       display: grid;
       grid-template-columns: 2fr 1fr;
       grid-template-rows: 0.5fr 1fr 1fr 1fr 1.50fr;
       gap: 1rem;
       font-size: 1.25rem;
       padding: 0rem 1rem 1rem;
       justify-self: center;
   }

   .senses .number {
       width: 2.5rem;
       height: 2.5rem;
       font-size: 1.25rem;
       justify-self: end;
       align-self: center;
   }

   .senses h3 {
       grid-column: 1 /span 2;
       text-align: center;
   }

   .senses label {
       align-self: center;
       margin-right: 7rem;
   }

   .senses #other {
       grid-column: 1 / 3;
       grid-row: 5;
       background-color: #3b3b3b;
       border: solid #B8860B;
       color: #cccccc;

   }

   textarea {

       background-color: #3b3b3b;
       border: solid #B8860B;
       color: #cccccc;


   }

   input {
       background-color: #4b4b4b;
       color: #f0e6d2;
       border: solid #B8860B;
   }

   .actions {
       background-color: #2e2e2e;
       display: grid;
       grid-template-columns: 1fr;
       grid-template-rows: 1fr 3fr 3fr 2fr;
       padding: 0rem 2rem 1rem;
       gap: 1rem;
       font-size: 1.95rem;

   }

   .actions>h3 {
       grid-column: 1;
   }

   .attacks {
       background-color: #2e2e2e;
   }


   .attacks>h3 {
       grid-column: 1 /span 3;
   }


   .attacks fieldset {
       font-size: 1.25rem;
       text-align: center;
       background-color: #2e2e2e;
       border: 0;
       padding: 0;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: 1fr;
       grid-auto-flow: column;
       margin: 1rem 0rem;
       justify-items: center;
   }

   .attack-row input {
       font-size: 0.95rem;
       width: 90%;
       border-style: none;
       outline: 2px solid #B8860B;
       padding: 0.25rem 0;
       align-self: center;
   }

   .contactformulier table {
       justify-self: center;
       max-width: 900px;
       border: 1px solid #B8860B;
       border-collapse: collapse;

   }

   .contactformulier tr,
   td {
       padding: 0.5rem 0.5rem;
       border-top: solid 1px #B8860B;
   }

   form .submit {
       display: block;
       margin: 1rem auto;
       font-size: 1.5rem;
       padding: 1rem;
   }

   @media screen and (min-width: 850px) {
       .nagivatie2 {
           display: none;
       }

       .menu-groot {
           display: grid;
       }

       .header>h2 {
           text-align: center;
           margin-top: 1rem;
       }

       h3 {
           justify-content: center;
       }

       h3>* {
           padding: 0 1rem;
       }

       #dobbelstenen {
           width: 2rem;
       }

       .homepage,
       .voorstelling {

           justify-self: center;
       }

       .voorstelling iframe {
           aspect-ratio: unset;
           width: 560px;
       }

       .gallerij {
           flex-flow: row wrap;
       }

       #dnd-group-art,
       #dnd-online {
           width: 48%;
       }

       .gallerij>* {
           width: 30%;
       }

       .gallerij img {
           flex: 1;
           width: 100%;
       }


       .charactersheet {
           grid-template-columns: 1fr;
           grid-template-rows: auto;
       }

       .summary {
           grid-column: 1;
           grid-row: 1;
           grid-template-columns: repeat(6, minmax(0, 1fr));
           grid-template-rows: 0.80fr 0.6fr 1fr;
           /*padding: 0;*/
           justify-self: stretch;
       }

       .summary #summary-sword {
           display: unset;
           grid-column: 6;
           grid-row: 1 /span 3;
           max-width: 90%;
           justify-self: end;
           align-self: center;
           border: #B8860B solid;
       }

       .summary fieldset {
           font-size: 1.25rem;
       }

       .summary .hp-mobile {
           align-self: unset;
       }

       .hp-mobile {
           grid-column: 4 /span 2;
           grid-row: 1 /span 2;
           font-size: 1.25rem;
       }

       .hp-mobile input {
           width: 75%;
           height: 75%;
       }

       .summary img:first-of-type {
           grid-row: 1 /span 3;
           justify-self: start;
       }



       .summary-name {
           grid-column: 2 /span 2;
           justify-self: center;
       }

       .summary #name-char {
           font-size: 2.3rem;
           text-align: center;
           font-family: Precious;
           width: 100%;
       }

       .summary-class {
           grid-column: 3;
           grid-row: 2;
       }

       .summary-xp {
           grid-column: 3;
           grid-row: 3;
       }

       .summary-level {
           grid-column: 2;
           grid-row: 3;
       }

       .summary input {
           font-size: 1.25rem;
       }

       .death-saves,
       .hp-death-saves {
           grid-column: 4 /span 2;
           grid-row: 3;
           display: grid;
           grid-template-columns: 1fr 1fr;
           grid-template-rows: 1fr 1fr 1fr;
           grid-auto-flow: column;
           background-color: #1a1a1a;
           justify-self: center;
       }

       .death-saves h3,
       .hp-death-saves h3 {
           margin: 0;
           font-size: 0.95rem;
           grid-column: 1 /span 2;
           grid-row: 1;
           background-color: #1a1a1a;

       }

       .death-saves label {
           grid-column: 1;
           justify-self: start;
       }

       .death-saves-succes {
           grid-column: 2;
           grid-row: 2;
       }

       .death-saves-fail,
       .death-saves-succes {
           border: 0;
           padding: 0;
           width: fit-content;
       }

       .death-saves-fail {
           grid-column: 2;
           grid-row: 3;
       }

       .death-saves input,
       .hp-death-saves input {

           width: 0.95rem;
           height: 0.95rem;
           accent-color: #a31e2b;
           text-align: center;
           vertical-align: middle;
       }



       .abilities {
           grid-column: 1;
           grid-row: 2;
           grid-template-columns: repeat(6, 1fr);
           grid-template-rows: 1fr;
           padding: 1rem;
           gap: 1rem;
           justify-self: stretch;
       }

       .abilities>* {
           font-size: 1.25rem;
       }


       .savingthrows {
           grid-column: 1;
           grid-row: 3;
       }

       .savingthrows ul {
           grid-template-columns: 1fr 1fr 1fr;
           grid-template-rows: repeat(4, 1fr);
           grid-auto-flow: row;
           justify-self: center;
           align-items: center;
           gap: 1rem;
       }

       .savingthrows h3 {
           grid-column: 1 /span 3;

       }

       .savingthrows #strength {
           grid-column: 1;
           grid-row: 2;

       }

       .savingthrows #dex {
           grid-column: 2;
           grid-row: 2;
       }

       .savingthrows #constitution {
           grid-column: 3;
           grid-row: 2;
       }

       .savingthrows #intelligence {
           grid-column: 1;
           grid-row: 3;
       }

       .savingthrows #wisdom {
           grid-column: 2;
           grid-row: 3;
       }

       .savingthrows #charisma {
           grid-column: 3;
           grid-row: 3;
       }

       textarea {
           text-align: start;
       }

       .savingthrows .text {
           grid-column: 1 /span 3;
           grid-row: 4;
       }

       .offensedefense {
           grid-column: 1;
           grid-row: 7;
           padding: 5rem;
       }

       .actions {
           grid-column: 1;
           grid-row: 5;
       }

       .attacks {
           grid-column: 1;
           grid-row: 6;
       }

       .skills {
           grid-column: 1;
           grid-row: 4;
           font-size: 1.25rem;
       }

       .skills .number {
           width: 1.50rem;
           height: 1.50rem;
           font-size: 1.25rem;
       }

       .skills-grid {
           grid-template-columns: 1fr 1fr 1fr;
           grid-template-rows: repeat(8, 1fr);
           gap: 1rem;
           justify-self: center;
           padding-bottom: 1rem;
       }

       .skills h3 {
           grid-column: 1 /span 3;
           grid-row: 1;
       }

       .skills-cell {
           border: 2px solid #B8860B;
           padding: 1rem;
       }

       .attack-row input {
           font-size: 1.25rem;
           padding: 0 0 0 0.5rem;
       }

       .senses {
           grid-column: 1;
           grid-row: 8;
       }

       .proficiencies {
           grid-column: 1;
           grid-row: 9;
           padding: 1rem;
       }

       .tips img {
           width: 10%;

       }

   }



   @media screen and (min-width: 1024px) {

       .homepage,
       .voorstelling,
       .tips {
           justify-self: center;
           text-align: justify;
       }

       .voorstelling {
           display: grid;
           grid-template-columns: 1fr 5fr;
           grid-template-rows: auto;
           grid-auto-flow: row;
           gap: 1rem;
           padding: 3rem 5rem 0 5rem;
       }

       .voorstelling>ol {
           display: none;
       }

       .voorstelling article {
           background-color: #1e1e1e;
           padding: 2rem;
       }

       .voorstelling h3 {
           margin: 0;
           padding: 1rem;
           flex-flow: column;
           background-color: #2e2e2e;
           font-size: 1.5rem;
       }

       #dobbelstenen {
           padding: 1rem 0;
       }

       .tips {
           display: grid;
           grid-template-columns: 0.10fr 1fr;
           grid-template-rows: 0.8fr 0.3fr 0.70fr 0.3fr 0.70fr 0.3fr 0.70fr 0.3fr 0.70fr 0.3fr 0.70fr 0.3fr 0.70fr 0.3fr 0.8fr;
           grid-auto-flow: row;
           gap: 1rem;
           padding: 3rem 5rem 0 5rem;

       }

       .tips #inleiding {
           grid-column: 1 /span 2;
           width: 100%;
           font-size: 1.25rem;
       }

       .tips .tips-text,
       .tips #inleiding {
           margin: 1rem 0;
           padding: 0 1rem;
           align-content: center;
       }



       .tips img {

           width: 50%;

       }

       .tips section {
           grid-column: 2;
           height: 100%;
           background-color: #1e1e1e;
           text-align: center;
           align-self: center;
       }

       .tips .img-section {
           background-color: #2e2e2e;
           grid-column: 1;
           grid-row: span 2;
           align-content: center;
       }

       .tips h3 {
           margin: 0;
           padding: 0;
           background-color: #2e2e2e;
           font-size: 1.5rem;
           display: flex;
           flex: 100%;
           align-self: center;
           height: 100%;
           align-self: center;

       }


       .fotos {
           padding: 2rem;
       }

       .charactersheet {
           grid-template-columns: 0.4fr 1fr repeat(2, minmax(0, 1fr));
           grid-template-rows: auto;

       }

       .summary {
           grid-template-columns: /*repeat(4, minmax(0, 1fr));*/ 1fr 0.6fr 0.6fr 1fr;
           grid-template-rows: 0.50fr 0.25fr 0.25fr;
           grid-column: 1 /span 4;
           grid-row: 1;
       }

       .summary img {
           max-height: 200px;
       }

       .summary #name-char {
           font-size: 3.2rem;
       }

       .summary-name {
           grid-column: 2 /span 2;
           justify-self: center;
       }

       .summary-species {
           grid-column: 2;
       }

       .summary-level {
           grid-column: 2;

       }

       .summary-class {
           grid-column: 3;

       }


       .summary-xp {
           grid-column: 3;

       }

       .summary #summary-sword {
           grid-column: 4;
       }



       .abilities {
           grid-column: 1;
           grid-row: 2 /span 3;
           grid-template-columns: 1fr;
           grid-template-rows: repeat(6, 1fr);
           gap: 0;
           padding: 1rem 0 0;
       }

       .savingthrows {
           grid-column: 2;
           grid-row: 2;
       }

       .savingthrows h3 {
           grid-column: 1;
           grid-row: 1;
       }

       .savingthrows ul {
           grid-template-columns: 1fr;
           grid-template-rows: repeat(8, 1fr);
           grid-auto-flow: unset;
           justify-self: unset;
           gap: 2px;
       }

       .savingthrows #strength {
           grid-column: 1;
           grid-row: 2;
       }

       .savingthrows #dex {
           grid-column: 1;
           grid-row: 3;
       }

       .savingthrows #constitution {
           grid-column: 1;
           grid-row: 4;

       }

       .savingthrows #intelligence {
           grid-column: 1;
           grid-row: 5;
       }

       .savingthrows #wisdom {
           grid-column: 1;
           grid-row: 6;
       }

       .savingthrows #charisma {
           grid-column: 1;
           grid-row: 7;

       }

       .savingthrows .text {
           grid-column: 1;
           grid-row: 8;
           width: 90%;
           height: 90%;
           justify-self: center;
       }

       .savingthrows .number,
       .savingthrows .radio {
           width: 1rem;
           height: 1rem;
           
       }

       .savingthrows li {
           padding: 0;
           align-self: center;
       }

       .offensedefense {
           grid-column: 3;
           grid-row: 2 /span 2;
           margin: 0;
           padding: 1rem;
       }

       .offensedefense>*>#defenses,
       .offensedefense>*>#speed {
           font-size: 0.95rem;
       }

       .offensedefense>*>.number {
           margin: 0;
           font-size: 0.95rem;
       }

       .hp-mobile {
           display: none;
       }

       .hp {
           grid-column: 4;
           grid-row: 2;
           display: grid;
           grid-template-columns: 1fr 1.5fr;
           grid-template-rows: 1fr 0.5fr;
           gap: 1rem;
       }

       .hp-grid {
           font-size: 1.25rem;
           grid-column: 1 /span 2;
           grid-row: 1;
           gap: 1rem;
       }

       .hp-grid .number {
           width: 75%;
           height: 80%;
       }

       .proficiencies {
           grid-column: 4;
           grid-row: 3;
           /*padding: 0;*/
           gap: 0;
           grid-template-columns: 1fr;
       }

       .proficiencies h3 {
           grid-column: 1;
           grid-row: 1;
       }

       .proficiencies .text {
           width: 95%;
           min-width: 0;
           height: 80%;
           font-size: 1.25rem;
           justify-self: center;
       }

       .skills {
           grid-column: 2;
           grid-row: 3 /span 2;
       }

       .skills h3 {
           grid-column: 1;
           grid-row: 1;
       }

       .skills-grid {
           grid-template-columns: 1fr;
           grid-template-rows: repeat(21, 1fr);
       }

       .actions {
           grid-column: 3 /span 2;
           grid-row: 4;
       }

       .senses {
           grid-column: 1 /span 2;
           grid-row: 5;
       }

       .attacks {
           grid-column: 3 /span 2;
           grid-row: 5;
           align-content: center;
       }

       .death-saves {
           display: none;
       }

       .hp-death-saves {
           grid-column: 1 /span 2;
           grid-row: 2;
           background-color: #2e2e2e;
           align-self: center;
           justify-self: center;
       }

       .hp-death-saves>h3 {
           background-color: #2e2e2e;
           padding-bottom: 1rem;
       }


   }