body{
    background-color: #212a30;
  }
  /* ------------------TV Body ---------------------------------------- */
  
  .Tv-Body{
    background-image: url("/public/Images/TV_box.png");
    background-repeat:  no-repeat;
    background-size: 100% 100%;
  }
  .Tv-top{
    height: 3em;
  }
  .Tv-box{
  
    padding-bottom: 6em;
    padding-top: 3em;
    display: grid;
    grid-template-columns: 1.5% 75% 1fr 8%;
    grid-gap: 1%;
  }
  
  
  
  .screen-box{
    border: black solid 0.5em;
    border-radius: 5%;
    background-color: silver;
    margin-bottom: 1em;
    margin-top: 2em;
    /*background-image: url("../BlogPictures/tv-noise.jpg");*/
  }
  
  /* ------------------Controls ---------------------------------------- */
  .control-box{
    background-color: #212a30;
    border: black solid 0.5em;
    text-align: center;
    margin-bottom: 1em;
    margin-top: 2em;
  }
  .switch-pic{
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    display: block;
  }
  .switchs{
    background-color: silver;
    padding-top: 1em;
    padding-bottom: 3em;
    border-bottom: black solid 0.5em;
  }
  /* ------------------Channels  ---------------------------------------- */
  .channel-name{
    text-align: right;
    margin-right: 1em;
    color: green;
  }
  /* ------------------About-me Channel ---------------------------------------- */
  .about-me-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 80%;
  }
  .about-me-pic{
    width: 100%;
    max-width: 20em;
    height: 100%;
    max-height: 20em;
    margin: 1em;
    border: black solid 0.1em;
  }
  .about-me-text-box{
    width: 80%;
    max-width: 20em;
    height: 100%;
    max-height: 20em;
    margin: 1em ;
    padding: 0.5em;
    border: black solid 0.1em;
    background-color: white;
  }
  .about-me-sprite-holdingBox{
    justify-self: center;
    align-self: end;
  }
  
  .about-me-sprite{
    width: 10em;
  }
  
  /* ----------------------------Blog Channel -------------------------*/
  .blog-grid{
    display: grid;
    grid-template-rows: 1fr 1fr;
  
  }
  .blog-holdingBox{
    display:  flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .blog-text{
    margin: 0 0.5em;
  }
  .blogPost-container-div{
    border: #595652 solid 0.3em;
    max-width: 12em;
    height: 13em;
    background-color: #595652;
    text-align: center;
  
  }
  .blogpost-picture{
  
    background-color: white;
    height: 10em;
  }
  .blogpost{
    background-color: white;
  
  }
  .blog-post-text{
    text-decoration: none;
    color: black;
  
  
  
  }
  .corner-piece{
    max-height: 1.7em;
    max-width: 4em;
    float:  right;
  }
  
  .blog-sprite-holdingBox{
    justify-self: center;
    align-self: end;
  }
  
  .blog-sprite{
    width: 10em;
  }
  .blog-arrow{
    margin-top: 100%;
  }
  
  /* ----------------------------Projects Channel -------------------------*/
  
  
  .project-grid{
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-gap: 2em;
  }
  .project-holdingBox{
    display:  flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .project-sprite-holdingBox{
    justify-self: center;
    align-self: end;
  }
  .project-sprite{
    width: 10em;
  }
  
  /* Floppy Disk CSS ##################################### */
  .floppy-link{
    text-align: center;
    text-decoration: none;
    color: black;
  
  }
  .floppy-disk-base{
    width: 10em;
    height: 10em;
  
  }
  
  .floppy-disk-cover{
    width: 100%;
    height : 100%;
    position: relative;
    z-index: 3;
    background-color: white;
    visibility: visible;
    border: black solid 0.1em;
    top: 0;
    transition: 0.5s ease-in ;
  }
  .floppy-disk-cover:hover{
    top:-5em;
  }
  
  .floppy-disk{
    width: 100%;
    height : 100%;
    position: relative;
    z-index: 1;
    top: -100%;
    border: black solid 0.1em;
    border-radius: 0 5% 0 0;
    background-color: blue;
    display: grid;
    grid-template-rows: 30% 10% 60%;
  }
  .floppy-top-indent{
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: darkblue;
    border-bottom: black solid 0.1em;
    border-left: black solid 0.1em;
    border-right: black solid 0.1em;
  }
  .floppy-top-metal{
    height: 100%;
    width: 60%;
    float: right;
    background-color: silver;
  }
  .floppy-note-section{
    width: 80%;
    height: 100%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr
  }
  .floppy-note-line{
    border-bottom: black solid 0.1em;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  #last-line{
    border: none;
  }
  .floppy-title{
    margin-bottom: 0.5em;
  }
  .floppy-cover-art{
    width: 100%;
    height: 60%;
  }
  
  /* ------------------------------Skill Channel ------------------------------*/
  
  .skill-sprite-holdingBox{
    justify-self: center;
  
  
  }
  .skill-sprite{
    width: 10em;
  }
  
  .skill-grid{
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-gap: 2em;
  }
  
  .skill-top-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .skill-middle-grid{
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
  }
  .skill-bottom-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .skill-bottom-right{
    justify-self: center;
  }
  .skill-bottom-left{
    justify-self: center;
  }
  
  /* skill box ##########################################*/
  .skill-container{
    width: 100%;
    margin-bottom: 0.5em;
    max-width: 13em;
    max-height: 20em;
  }
  .skill-box{
    background-color: white;
    width: 100%;
    border: black solid 0.1em;
    margin-top: 0.5em;
  }
  
  .name-skill-container{
    height: 3em;
    margin-bottom: 0.5em;
  }
  
  .skill-name{
    margin-left: 1em;
    display: inline-block;
  
  }
  .icon-pic{
    margin-left: 1em;
    display: inline-block;
    max-height: 2em;
    max-width: 2em;
    margin-top: 0.5em;
  }
  .stars{
    display: inline-block;
    margin-left: 1em;
  }
  .checked{
    color: orange;
  }
  .skill-level{
    margin-left: 0.5em;
    display:  inline-block;
  }
  .empty-bar{
    width: 90%;
    height: 1em;
    background-color: lightgray;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    outline: black solid 0.1em;
    margin-top: 1em;
  
  }
  .fill-bar{
    background-color: #03C03C ;
    height: 1em;
  }
  
  
  
  
  
  /* Framwork ###########################################*/
  .framework-box{
    border: black solid 0.1em;
    background-color: white;
    width: 100%;
    height: 2.2em;
    display: flex;
    align-items:  center;
    justify-content: space-around;
  }
  
  .framework-pic{
    display: inline-block;
    max-height: 1.5em;
    max-width: 1.5em;
    margin-top: 0.5em;
    width: 1.5em;
    height: 1.5em;
  
  }
  .framework-skill{
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block;
  
  }