:root {
        --bg_h: #1d2021;
        --bg:   #282828;
        --bg_s: #32302f;
        --bg1:  #3c3836;
        --bg2:  #504945;
        --bg2t:  #50494590;
        --bg3:  #665c54;
        --bg4:  #7c6f64;
        
        --fg:  #fbf1c7;
        --fg1: #ebdbb2;
        --fg2: #d5c4a1;
        --fg3: #bdae93;
        --fg4: #a89984;
        
        --red:    #fb4934;
        --green:  #b8bb26;
        --greent:  #b8bb2690;
        --yellow: #fabd2f;
        --blue:   #83a598;
        --purple: #d3869b;
        --aqua:   #8ec07c;
        --gray:   #928374;
        --orange: #fe8019;
        
        --red-dim:    #cc2412;
        --green-dim:  #98971a;
        --yellow-dim: #d79921;
        --blue-dim:   #458588;
        --purple-dim: #b16286;
        --aqua-dim:   #689d6a;
        --gray-dim:   #a89984;
        --orange-dim: #d65d0e;
    }
    
    
    
/*////////////////////////////////*/
	* {
    	font-weight:300;
    	margin:0;
    	padding:0;
    	text-decoration: none;
	}
    body {
        display: grid;
        background-color:var(--bg);
        background-image:url("img/code.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        grid-template-columns: 30% 70%;
        grid-template-rows: auto;
        grid-template-areas:
        "header null"
        "nav nav"
        "aside main"
        "section section"
        "footer footer"
    ;
    }
    section{
        grid-area: section;
    }
    main {
        color: var(--fg);
        padding:0px;
        grid-area: main;
    }
    aside {
        grid-area: aside;
    }
    footer {
        color: var(--fg);
        grid-area: footer;
        margin-top:20px;
    }
    p{
        color:var(--fg);
        font-size:150%;
        font-family: "JetBrains Mono", serif;
    }
    h1{
        color:var(--red);
        font-size:150%;
        font-family: "JetBrains Mono", serif;
        margin-top:20px;
    }
    h2{
        color:var(--fg);
        font-size:150%;
        font-family: "JetBrains Mono", serif;
    }
    
    
    
/* font styles */
    .main-red{
        color: var(--red);
        font-family: "JetBrains Mono", serif;
    }
    .main-white{
        color: var(--fg);
        font-family: "JetBrains Mono", serif;
    }
    .main-pill{
        background-color: var(--bg2t);
        border-radius:20px;
        padding-right:10px;
        padding-left:10px;
        font-family: "JetBrains Mono", serif;
    }
    .main-img{
        width:60%;
        height:auto;
        display: block;
        margin-left: auto;
        margin-right: auto;    
        border-radius:20px;
    }
    .cmd-nonav{
        padding-bottom:20px;
    }
    
    
    
/*Navigation*/
    nav {
        grid-area: nav;
    }
    a{
        color: var(--fg);
        font-family: "JetBrains Mono", serif;
        font-style: italic;
    }
    .desktop-nav{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        list-style: none;
    }
    li{
        text-decoration: none;
        display: flex;
        font-size: 150%;
        float:left;
        color: var(--fg);
        font-family: "JetBrains Mono", serif;
	}
	.nav-list li a:hover,
    .nav-list li a.hover {
        color: var(--red);
        border-bottom: 1px solid var(--red);
        transition: color 0.3s ease-in-out;
    }

    
    
    
/*acsii art*/
    header {
        color: var(--fg);
        padding: 20px;
        color: #fff;
        text-align: center;
        padding: 20px;
        grid-area: header;
    }
    pre {
        display: inline-block;
        text-align: left;
        white-space: pre;
        line-height: 1;
    }
    .c0 { color: var(--bg); }
    .c1 { color: var(--red); }
    .c2 { color: var(--green); }
    .c3 { color: var(--yellow); }
    .c4 { color: var(--blue); }
    .c5 { color: var(--purple); }
    .c6 { color: var(--aqua); }
    .c7 { color: var(--fg); }
    .bld { font-weight: bold; }
    .cowsay{
        color:var(--fg);
        font-size:150%;
    }



/* mobile nav */
    .burger{
        display: none;
        color:var(--red);
        padding: 10px;
        background-color:#00000000;
        border:none;
        font-size:200%;
    }
    .sidebar {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: var(--bg);
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }
    .sidebar a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: var(--fg);
        display: block;
        transition: 0.3s;
        overflow:hidden;
    }
    .sidebar .close-btn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
        color:var(--red);
    }
    .openbtn {
        font-size: 20px;
        cursor: pointer;
        background-color: #111;
        color: white;
        padding: 10px 15px;
        border: none;
    }
    #main {
        transition: margin-left .5s;
        padding: 16px;
    }



/* htop table */
    table {
        width: 100%;
        border-collapse: collapse;
        font-family: monospace;
        color: var(--fg);
        text-align: left;
        float:left;
    }
    th, td {
        padding: 5px 0;
        font-size:150%;
    }
    th {
        background-color: var(--greent);
    }
    td:nth-child(1) { color: var(--red); }
    td:nth-child(2) { color: var(--yellow); }
    td:nth-child(3), td:nth-child(4) { color: var(--aqua); }
    td:nth-child(5), td:nth-child(6), td:nth-child(7) { color: var(--fg); }
    td:nth-child(8) { color: var(--purple); }
    td:nth-child(9), td:nth-child(10) { color: var(--orange); }
    td:nth-child(11) { color: var(--blue); }
    td:nth-child(12) { color: var(--green); font-weight: bold; }
    .table-click{
        background-color:var(--bg2t);
    }
    


/* portfolio grid */
    .portfolio-grid{
        width:90%;
        margin:auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .portfolio-item{
        width:100%;
        min-width:40%;
    }
    .portfolio-img{
        width:100%;
        height:auto;
        border-radius:5px;
        max-width:90vw;
    }
    .portfolio-img:hover{
        filter: opacity(50%);
        transition: 0.5s;
    }
    .img-wrapper{
        height:100%;
        padding:10px;
        position: relative;
        text-align: center;
        color: white;
    }
    .img-text{
        font-size:150%;
        position: absolute;
        opacity:0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .portfolio-img:hover + .img-text{
        opacity:100;
        transition: 0.5s;
    }



/* form styling */
    .form-container{
        width:40%;
    }
    input[type=text], select, textarea {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        font-family: "JetBrains Mono", serif;
    }
    input[type=submit] {
        width: 100%;
        background-color: var(--aqua);
        color: var(--fg);
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-family: "JetBrains Mono", serif;
        font-size:120%;
    }
    input[type=submit]:hover {
        background-color: var(--green);
        color: var(--bg);
    }
    label{
        font-family: "JetBrains Mono", serif;
        font-size:150%;
    }


/* report */
   .report{
       width:60%; 
       margin:auto;
    }

/* media breakpoints */
    @media screen and (max-height: 450px) {
        .sidebar {
            padding-top: 15px;
        }
        .sidebar a {
            font-size: 18px;
        }
    }

    @media (max-width: 800px) {
        .mobile-nav {
            display: flex;
        }
        .desktop-nav {
            display: none;
        }
        .burger{
            display: flex;
            align-items:left;
        }
        header{
            display:none;
        }
        section{
            display:none;
        }
        h2{
            font-size:100%;
        }
        body {
            grid-template-areas:
            "header null"
            "nav nav"
            "aside aside"
            "main main"
            "section section"
            "footer footer"
            ;
        }
        .main-img{
            width:80%;
        }
        main {
            padding:20px;
        }
        .report{
            width:100%; 
        }
    }