@font-face {
    font-family: 'LemonMilkBold'; /*a name to be used later*/
    src: url('../fonts/LemonMilkBoldItalic.otf'); /*URL to font*/
}

h1 {
    text-align: center;
}

hr {
    border: none;
    height: 2px;
    width: 70%;
    margin: 20px auto;
    /* margin-top: 20px;
    margin-bottom: 20px; */
    color: black;
    background-color: black;
   
}

p:first-of-type::first-letter{
    font-size: 1.5em;
}

.filepath {
    background-color: black;
    color:white;
}

body {
    /**background-color: purple;**/
    
    background-attachment: fixed;
    margin: 0;
}



.highlight {
    background-color: yellow;
}

.content {
  
    /**max-width: 1200px;**/
    margin: 0;
    background-color: #888;
    /* background-color: #9a21cb; #ff7000; */
    /*background-color: rgb(163, 87, 239);*/
    /* background-image: url("../Images/bg_text.png"); */
    background-attachment: fixed;
    /**background-image: url(Images/bg_test.png);**/
    /**box-shadow: 6px 6px 5px #111;**/
    /**padding-bottom: 20px;**/
}

header {
    position: fixed;
    background-color: #222;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 50px;
    /* border: 2px solid white; */
    /* box-shadow: 0 10px 10px black; */
    
}



/* .site-banner {
    width: auto;
    height: 50px;
     background-color: black; 
} */

footer {
    display: flex;
    background-color: #222;
    
    height: 80px;

}

footer > a {
    display: inline-block;
    padding: 13px 10px 13px 10px;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 2em;
    width: 100%;
}


/* Table related stuff */
table {
    border-collapse: collapse;
    border: 2px solid rgb(140 140 140);
    font-family: sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
  }
  
  caption {
    caption-side: bottom;
    padding: 10px;
    font-weight: bold;
  }
  
  thead,
  tfoot {
    background-color: rgb(228 240 245);
  }
  
  th,
  td {
    border: 1px solid rgb(160 160 160);
    padding: 8px 10px;
  }
  
  td:last-of-type {
    text-align: center;
  }
  
  tbody > tr:nth-of-type(even) {
    background-color: rgb(237 238 242);
  }
  
  tfoot th {
    text-align: right;
  }
  
  tfoot td {
    font-weight: bold;
  }



th {
    border: 1px solid black;
}

i.home {
    color: white;
    font-size: 4em;
}

i.mail {
    color: white;
    font-size: 3em;
}

#container {
    background-color: #003049;
    width: 90%;
    /*height: 500px;*/
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    /*align-items: center;
    align-content: space-evenly;*/
}

#container div {
    width: 100px;
    height: 100px;
    /*flex-grow: 1;*/
}

#container div:nth-of-type(1) {
    flex-grow: 1;
}

main {
    width: 80%;
    margin: 0 auto;
    border: 5px solid black;
    height: 500px;
    display: flex;
    background-color: white;
    box-shadow: 5px 5px black;
    
    
}

main .sidebar {
    background-color: purple;
    border: 2px solid white;
    flex: 1 2 25%;
    padding: 10px;
}

main .maincontent {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 2 1 50%;
    padding: 10px;
}

main .linkswithcontent {
    background-color: gray;
    border: 2px solid white;
    flex: 1 2 25%;
    padding: 10px;
}

main .contentwithlinks {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 2 1 75%;
    padding: 10px;
}

main .content-no-sides {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 2 1 100%;
    padding: 10px;
}



.header-group {
    background-color: black;
    border: 2px solid white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    

}

.header-group > a:first-of-type {
    padding-left: 10px;
}

.header-group > a:last-of-type {
    padding-right: 10px;
}

.header-group > a > img {
    height: 50px;
    width: auto;
    /* padding-top: 10px; */

}


/** New Section Content **/
.section-group {
    width: 80%;
    margin: 0 auto;
    
    border: 2px solid black;
    background-color: white;
    box-shadow: 5px 5px black;
    /*background-image: url("../Images/checker_pattern_small.png");*/
    

}

.section-group > h3 {
    padding: 8px;
    padding-bottom: 10px;
    border-bottom: 4px solid black;
    text-align: center;
    margin-top: 0;
    background-color: white;
    background-color: #ebeaea;
    /* background-image: url("../Images/checker_pattern_medium_single.png"); */
}

.section-group > h3.warning-header {
    background-color: red;
}



.section-group > h3 > span {
    
    background-color: #ebeaea;
    padding: 0 15px;
}

.section-content {
    display: flex;
   
    

}

.section-content-vertical {
    display: flex;
    flex-direction: column;
}

.section-content-horizontal {
    display: flex;
    flex-direction: row;
}

.section-content-projects {
    display: flex;
    flex-wrap: wrap;
}

.section-intro-group {
    margin-top: 50px;
    border: none;
}

.section-content-no-sides {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 2 1 100%;
    padding: 10px;

}

.section-content-left-justified {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 2 1 100%;
    padding: 10px;
    justify-content: left;

}

.section-content-projects {
    display: flex;
    margin: 20px;
    padding: 10px;
    background-color: #ebeaea;

}

.widget {
    display: flex;
    flex-direction: column;
    flex: 15%;
    margin: 10px;
    padding: 5px;
    align-items: center;
    align-content: center;
}

.widget > * {
    flex: 50%;
}

.widget > img.drawing {
    width: 400px;
    border: 1px solid black;
}

.widget > a {
    display: block;
    background-repeat: no-repeat;
    border: 1px solid black;
    border-radius: 10px;
   
}

.widget > a:hover {
    box-shadow: 5px 5px black;
}

.widget > p {
    text-align: center;
}

.widget > p::first-letter {
    font-size: 1em;

}

.widget-description {
    /* border: 1px solid red; */
    background-color: white;
    width: auto;
    padding: 2px;
}

.folder-widget {
    display: flex;
    flex-direction: column;
    flex: 15%;
    margin: 10px;
    padding: 5px;
    align-items: center;
    align-content: center;
}


.folder-widget > p {
    margin: auto;
}

.folder-widget > p::first-letter {
    font-size: 1em;
}

.section-intro {
    margin: 0;
    border: 1px solid black;
    /* border-top: 8px solid black; */
    /* border-bottom: 3px solid black; */
    /* border-radius: 10px; */
    background-color: #ebeaea;
    flex: 2 1 100%;
    padding: 10px;
    
}

.page-title-group {
    display: flex;
    flex-direction: column;
    padding-top: 50px;
    margin: 0 0 15px 0;
    background-image: url("../Images/dot_background.png");
}

.page-title-group > h1 {
    color: red;
    font-size: 4em;
    font-family: 'LemonMilkBold';
    /*border-bottom: 10px solid red;*/
    
    margin-left: 10px;
    margin-right: 20px;
    width: 100%;
    text-align: left;
    margin-bottom: 0;
}




.page-title-group > p:first-of-type {
    border-top: 10px solid red;
    margin: 0 5% 0 10px;
    border-radius: 100px;
}

.page-title-group > p:nth-child(3) {
    border-top: 10px solid orange;
    margin: 5px 10% 0 10px;
    border-radius: 100px;
}

.page-title-group > p:nth-child(4) {
    border-top: 10px solid yellow;
    margin: 5px 15% 10px 10px;
    border-radius: 100px;
}



.section-content-links-right {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 2 1 60%;
    padding: 10px;

}

.links-right-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-image: url(../Images/top_header3.png);
    background-repeat: repeat-x;
    margin: 20px;
    border: 2px solid black;
    background-color: #ebeaea;
    flex: 2 1 40%;
    padding: 0 10px 10px 10px;
    box-shadow: 5px 5px black;

}

.links-right-section > h4 {
    margin-top: 5px;
    background-color: #ebeaea;
    padding: 0 10px;
}

.links-box {
    background-color: #ebeaea;
    text-align: center;
    padding: 0 10px;
    
    margin: 0;
    margin-top: 6px;
    
}

.links-box-top-padding {
    margin: 8px;
}

.button-side-group {
    display: flex;
    flex-direction: column;
    margin: 20px;
    margin-top: 30px;
    


}

.button-side-group > button {
    width: 100%;
}



.button-side-group > a {
    text-align: center;
    margin: 5px;
    background-color: white;
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    font-size: 15px;
    padding: 5px 10px;
    text-decoration: none;
    
}

.button-side-group > a:hover {
    background-color: black;
    color: white;
}




.section-content-image-right {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 2 1 65%;
    padding: 10px;

}

.section-content-image-no-border {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 50%;
    padding: 10px;
    justify-content: center;
    align-items: center;

}

.image-right-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-image: url(../Images/top_header3.png);
    background-repeat: repeat-x;
    margin: 20px;
    border: 2px solid black;
    background-color: #ebeaea;
    flex: 2 1 35%;
    padding: 0 10px 10px 10px;
    box-shadow: 5px 5px black;
}

.image-right-section-no-border {
    display: flex;
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    padding: 10px;
    box-shadow: 5px 5px black;
    flex: 50%;
    justify-content: center;
    align-items: center;
    
}

.image-right-section-no-border > img {
    border: 1px solid red;
    width: 100%;
    height: auto;
    
}

.image-right-section > h4 {
    margin-top: 5px;
    background-color: #ebeaea;
    padding: 0 10px;
}

.image-right-section > img {
    width: 300px;
    padding: 60px 0;
}




.section-content-memory-block {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 1 1 45%;
    padding: 10px;

}

.section-content-memory-block > img {
    float: left;
    margin: 10px;
}

.section-content-memory-block-section {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 1 1 55%;
    padding: 10px;
}


.image-2columns {
    text-align: center;
    border: 1px solid black;
    flex: 1 1 50%;
    margin: 20px;
    padding-top: 10px;
    background-image: url(../Images/stripe_gray.png);
}


.section-content-folder-right {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 2 1 70%;
    padding: 10px;

}

.folder-right-section {
    
    text-align: center;
    border: 1px solid black;
    flex: 2 1 30%;
    margin: 20px;
    padding: 10px;
    
    
}


.folder-right-section > .foldername {
    text-align: left;
    border-bottom: 2px solid black;
    color: red;

}


.folder-right-section > .subfiles > ul > li{
    text-align: left;
    list-style-type: none;
    
}




.section-content-bit-table-right {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 2 1 40%;
    padding: 10px;

}

.bit-table-right-section {
    flex: 2 1 60%;
    border: 1px solid black;
    margin: 20px;
    background-color: #ebeaea;

}

.bit-table-right-section > .table_header {
    display: flex;
    text-align: center;
    border-bottom: 2px solid black;
    background-color: white;

}

.bit-table-right-section > .tables {
    display: flex;
    background-color: #ebeaea;
    padding: 15px 5px;
    

}

.bit-table-right-section > .tables > table{
    flex: 2 1 25%;
    text-align: center;
    border: 1px solid black;
    background-color: white;
    border-collapse: collapse;
    margin: 10px 10px;
    box-shadow: 2px 2px black;

}

tr.values{
    border-bottom: 1px solid black;
    background-color: #ebeaea;

}

.table_header > p {
    flex: 2 1 30%;
}

.table_header p:first-child {
    text-align: left;
    padding-left: 10px;
}

.table_header p:last-child {
    text-align: right;
    padding-right: 10px;
}


/**CODE Sections**/
.section-content-code-right {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 50%;
    padding: 10px;

}

.section-content-warning {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 50%;
    padding: 10px;

}



.code-right-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../Images/top_header3.png);
    background-repeat: repeat-x;
    margin: 20px;
    border: 2px solid black;
    background-color: #ebeaea;

    flex: 50%;
    /*border: 1px solid black;*/
    margin: 20px;
    background-color: #ebeaea;

}

.code-right-section > h4 {
    margin-top: 5px;
    padding: 0 10px;
    
    background-color: #ebeaea;
}


.code-right-section > .codeblock {
    padding: 10px;
    margin: 20px;
    border: 1px solid black;
    background-color: white;
    overflow-x: scroll;
    overflow-y: auto;
    width: 80%;
    /*height: 200px;*/
    height: auto;
    /* width: auto; */
    max-height: 400px;
    /* inline-size: max-content; */
    
    
}



pre {
    
    white-space: pre-wrap;


}


#container div p {
    text-align: center;
    font-size: 30px;
    color: white;
    
    
}





@media (max-width: 900px) {
    .bit-table-right-section > .tables {
        flex-direction: column;
        
    
    }
}


@media (max-width: 800px) {
    .page-title-group > h1 {      
        font-size: 2em;
        /*border-bottom: 5px solid red;
        text-align: center;*/
    }
    
    main {
        flex-direction: column;
    }

    .section-content {
        flex-direction: column;
    }

    .bit-table-right-section > .tables {
        flex-direction: row;
        
    
    }

}

@media (max-width: 450px) {
    .image-right-section > img {
        width: 200px;
        
    }

}


.box {
    /*margin: 20px;
    border: 1px dashed red;*/
    border: 1px solid black;
    /*background: #ebeaea;*/
}

/* For displaying 16-bit binary values */
#colorbingroup {
    margin: 0 auto;
    padding: 5px;
    display: flex;
    justify-content: space-evenly;
    width: 90%;
}

#colorbingroup div {
    padding: 5px;
    width: 20%;
    display: flex;
    justify-content: space-evenly;
    
}

#colorbingroup span {
    text-align: center;
    border: 1px solid red;
    width: 100px;
    padding: 3px;
}


.table_palettes {
    /* border: 1px solid red; */
    padding: 10px;
    /* width: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.table_palettes > table {
    border-collapse: collapse;
    box-shadow: 4px 4px #111;
}

.table_palettes > table > tbody > tr > th {
    background: white;
    padding: 1px 8px;
}

.palette_row > th {
    color: white;
}


.table_palette-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}



.section-explanation {
    margin: 20px;
    border: 1px solid black;
    background-color: #ebeaea;
    flex: 50%;
    padding: 10px;
}

.section-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-image: url(../Images/top_header3.png);
    background-repeat: repeat-x;
    margin: 20px;
    border: 2px solid black;
    background-color: #ebeaea;
    flex: 2 1 50%;
    padding: 0 10px 10px 10px;
    box-shadow: 5px 5px black;

}

.section-side > h4 {
    margin-top: 5px;
    background-color: #ebeaea;
    padding: 0 10px;

}

.f-10 {
    flex: 10%;
}

.f-20 {
    flex: 20%;
}

.f-25 {
    flex: 25%;
}

.f-30 {
    flex: 30%;
}

.f-40 {
    flex: 40%;
}

.f-50 {
    flex: 50%;
}

.f-60 {
    flex: 60%;
}

.f-70 {
    flex: 70%;
}

.f-80 {
    flex: 80%;
}

.f-90 {
    flex: 90%;
}

.f-100 {
    flex: 100%;
}

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


.cellular-row-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.cellular-example-group {
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.bits-explanation-4bits {
    display: flex;
    flex-direction: row;
    align-items: left;
    /* border: 1px solid red; */
    justify-content: left;
    align-items: center;
}

.cellular-example-group-2gen {
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    align-items: center;
    justify-content: center;
    /* flex: 1; */
    margin: 5px;
}

.cellular-example-group p {
    /* border: 1px solid red; */
    margin: 10px;
}




.cell-table-background {
    display: flex;
    /* flex-direction: row; */
    width: 90px;
    height: 30px;
    background-color: black;
    border: 1px solid black;
    margin: 5px;

}

.cell-table-4bits {
    display: flex;
    /* flex-direction: row; */
    width: 100px;
    height: 25px;
    background-color: black;
    border: 1px solid black;
    margin: 5px;

}

.cell-table-4bits div {
    flex: 20%;
    background-color: white;
    /* width: 20px;
    height: 20px; */
    margin: 1px;
    /* padding: 5px; */
    border: 4px solid white;
    /* flex: 20%; */

}

.cell-table-background div {
    flex: 20%;
    background-color: white;
    /* width: 20px;
    height: 20px; */
    margin: 1px;
    /* padding: 5px; */
    border: 4px solid white;
    /* flex: 20%; */

}

.cell-table-middle {
    display: flex;
    /* flex-direction: row; */
    width: 30px;
    height: 30px;
    background-color: black;
    border: 1px solid black;
    margin: 5px;

}

.cell-table-middle div {
    flex: 20%;
    background-color: white;
    /* width: 20px;
    height: 20px; */
    margin: 1px;
    /* padding: 5px; */
    border: 4px solid white;
    /* flex: 20%; */

}

.explanation-group {
    border: 1px solid black;
    padding: 5px;
    margin-top: 10px;
}

.explanation-group h4 {
    font-weight: 500;
    font-size: 2em;
    /* border: 1px solid red; */
    margin: 0;
}

.explanation-group hr {
    width: 100%;
}