* {
    box-sizing: border-box;
  }

:root {
    --deepest_background: #2B1100;
  }

body
{
    font-family:"Georgia", serif;
    background-color: #E3DEDB;
    color: #250525;
    font-size: 14;
    margin: 0;
}

h2, h3
{
    text-align:left;
    text-decoration:underline;
    color: var(--deepest_background);
}

  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  
/* For mobile phones */
[class*="col-"] {
    width: 100%;
    float:left;
  }
  
  /* For enforcing thin columns within other columns */
  @media only screen and (min-width: 1px) {
.col-50 {
    width: 50%;
    padding-bottom: 20px;
}}
  
/* hide things if the screen is big */
@media only screen and (min-width: 800px) {
    /* For desktop: */
    .hide_if_large {display: none;}
  }

/* hide things if the screen is small */
@media only screen and (max-width: 799px) {
    .hide_if_small {display: none;}
  }

  @media only screen and (min-width: 1200px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
  }

  @media only screen and (max-width: 1199px) and (min-width: 1000px) {
    /* For tablets: */
    /*.box {background-color: grey;}*/
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
    .hp-icon {width: 200px;}
  }
  

/* Generic Links in body go before sidebar overrides */

a:visited {
    color: #2E4172;
}

a:hover {
    color: #4CAF50;
}

/* List pages have a table presentation */
td.list {
    padding: 0 0 0 15px;
}

@media only screen and (min-width: 600px) {
.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
}

.active{
    background-color: #4CAF50;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media only screen and (min-width: 779px) and (max-width: 1349px) {
    .big_container {
        margin: 0;
        display: inline-grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 'skills skills';
        grid-template-rows: repeat(7, 1fr);
    }
    }

@media only screen and (min-width: 1350px) {
    .big_container {
        margin: 0;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 'skills skills skills';
        grid-template-rows: repeat(4);
        width: 100%;
    }
    }



.skills_columns {
		column-count: 3;
		column-width: 300px;
		column-gap: 100px;
		column-rule: 4px solid white;
		padding-left: 20px;
		padding-right: 20px;
        width: 100%;
}

    .all_column_heading{
        grid-area: header;
      }
      
      .skills_body {
        grid-area: body;
        border: 1px dashed black;
      }

.area {
    background: #E3DEDB;
    border: 1px solid #552200;
    border-radius: 3px;
    padding: 5px;
}


@media only screen {
    .header {
        margin: 0;
        display: inline-grid;
        grid-template-columns: auto;
        grid-template-areas: 'records'
        'hp_icon';

    width: 100%;
    }
}

.sheet {display: flex;
flex-wrap: wrap;
}

@media only screen and (min-width: 800px) {
    .header {
        margin: 0;
        display: inline-grid;
        grid-template-columns: auto 250px;
        grid-template-areas: 'records hp_icon';
    }
}

@media only screen and (max-width: 779px) and (min-width: 1350px) {
.header {
    margin: 0;
    display: inline-grid;
    grid-template-columns: auto 360px;
    grid-template-areas: 'records hp_icon';
}
}


.hp_icon_image {
    max-width: 100%;
    height: auto;
}

.button {
    display: inline-block;
    background: beige;
    border: 1px solid #552200;
    margin: 0;
    padding: 5px;
}

.plus {
    background: none;
    color: green;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.records {
    grid-area: records;
}

.hp_icon {
    grid-area: hp_icon;
}

.extras3 {
    grid-area: extras3;
}

.history {
    margin-right: 30px;
}

.info {
    display: inline-block;
    padding: 0 0 10px 10px;
    flex: 1 0 20%;
}

.stat_heading {
    padding: 0 15px 0 0;
    font-weight: bold;
}

.followers{
    border-left: 1px solid var(--deepest_background);
    border-collapse: collapse;
    padding-left: 5px;
}

.dropdown_content {
    margin-top: 10px;
}

.hidden {
    display: none;
}

.rotate180 {
    rotate: 180deg;
}