body {
            background-color: rgb(0, 0, 0);
            margin: 0;
            padding: 0;
        }

        header {
            background-image: linear-gradient(rgb(58, 58, 58), rgb(20, 19, 19));
            height: 100px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            width: 100%;
            border-radius: 0 0 20px 20px;
            border-left: 4px solid;
            border-right: 4px solid;
            border-bottom: 4px dashed;
            border-color: rgb(17, 237, 182);
            position: sticky;
            z-index: 999;
            top: 0;

        }

        .name {
            font-family: "Press Start 2P", system-ui;
            font-weight: 100;
            letter-spacing: 0px;
            color: rgb(17, 237, 237);
            font-size: 26px;
            line-height: 95px;
            padding: 0 0 0 65px;
        }

        .navbar {
            /* font-family: "Titillium Web", sans-serif; */
            font-family: "Press Start 2P", system-ui;
            font-weight: 100;
            font-size: 14px;
            /* color: rgb(24, 237, 17); */
            color: rgb(17, 237, 237);
            padding: 18px 25px 0 0;
            list-style: none;
            float: right;
            padding-right: 50px;
            text-transform: uppercase;


        }

        .navbar li svg {
            vertical-align: middle;

        }

        .navbar li {
            display: inline-block;
            margin-right: 50px;
            border-radius: 12px;
            padding-top: 3px;

        }

        .navbar li:last-child {
            margin-right: 10px;
        }

        .navbar label {

            padding: 13px 10px 12px 10px;
        }

        .navbar li:hover {
            transition: 0.3s;
            background-color: rgb(17, 237, 237);
            color: black;
            cursor: pointer;

        }

        .resumeanchor:hover {

            transition: 0.3s;
            color: black;
        }

        .resumeanchor {
            text-decoration: none;
            padding: 13px 10px 12px 10px;
            color: rgb(17, 237, 237);
        }

        .section-ctrl {
            display: none;
            width: 90px;
            height: 90px;
        }

        #aboutme-ctrl:checked~#aboutme,
        #projects-ctrl:checked~#projects,
        #contact-ctrl:checked~#contact {
            display: block;
        }

        .content-section {
            display: none;

        }

        /* everything above is to do with the header and list buttons */

        /* everything below regarding about me section */

        .abouttitle {
            animation: shadowFade 10.0s ease-in-out infinite;

            box-shadow: 3px 3px 15px rgba(17, 237, 237, 0.841);
            background-color: rgba(253, 253, 253, 0.11);
            border-radius: 12px;
            /* box-shadow: 3px 3px 15px rgb(161, 243, 158); */
            text-align: justify;
            /* background-color: rgb(47, 47, 47); */
            padding: 20px 20px 20px 20px;
            margin: 40px 55px 20px 55px;
            font-family: "Titillium Web", sans-serif;
            font-size: 20px;
            color: rgb(17, 237, 182);
            justify-items: center;
        }



        .abtitle {
            display: flex;
            font-family: "Google Sans Code", monospace;
            justify-content: center;
            width: 94%;
            font-size: 70px;
            margin-bottom: 15px;
            border-bottom: 3px dotted rgb(17, 237, 237);
            padding-bottom: 5px;

        }

        .absubtitle {
            display: flex;
            text-align: center;
            justify-content: center;
            width: 80%;
            font-family: "Google Sans Code", monospace;
            margin-top: 25px;
            margin-bottom: 25px;
        }

        .ablinks {
            display: flex;
            align-items: center;
            justify-items: center;
            text-decoration: none;
            font-family: "Google Sans Code", monospace;
            color: rgb(17, 237, 237);
            font-size: 24px;

        }

        .titlegrid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 50px;
            align-items: center;
            justify-content: center;
            padding-left: 250px;

        }

        .ablinks:hover {
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
            transform: translate3d(6px, 6px, 0);
            box-shadow: 6px 8px 16px rgba(17, 237, 237, 0.841);
            background-color: transparent;
        }


        .abspan {
            font-family: "Press Start 2P", system-ui;
            display: inline-block;
            width: 100%;
            padding-bottom: 12px;
            border-bottom: 4px dashed;
            font-size: 35px;
            font-weight: 100;
            letter-spacing: 0px;
            color: rgb(17, 237, 237);
            border-color: rgb(17, 237, 182);
            ;
        }

        .aboutmediv {
            animation: shadowFade 10.0s ease-in-out infinite;
            background-color: rgba(253, 253, 253, 0.11);
            border-radius: 12px;
            /* box-shadow: 3px 3px 15px rgb(161, 243, 158); */
            text-align: justify;
            /* background-color: rgb(47, 47, 47); */
            padding: 20px 20px 20px 20px;
            margin: 40px 55px 20px 55px;
            font-family: "Google Sans Code", monospace;
            font-size: 20px;
            color: rgb(17, 237, 182);
        }

        .techdiv {
            animation: shadowFade 10.0s ease-in-out infinite;
            box-shadow: 5px 5px 25px rgba(17, 237, 237, 0.841);
            background-color: rgba(253, 253, 253, 0.11);
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            /* box-shadow: 3px 3px 15px rgb(161, 243, 158); */
            text-align: justify;
            /* background-color: rgb(47, 47, 47); */
            padding: 20px 20px 20px 20px;
            margin: 40px 55px 20px 55px;
            height: 450px;
            font-family: "Titillium Web", sans-serif;
            font-size: 20px;
            color: rgb(17, 237, 182);
        }

        @keyframes shadowFade {

            0%,
            100% {
                box-shadow: 0 0 0px rgba(0, 0, 0, 0.2);
            }

            50% {
                box-shadow: 5px 5px 25px rgba(17, 237, 237, 0.841);

            }
        }


        .gridinleft {
            display: grid;
            padding: 15px 100px 0 125px;
            background-color: rgba(255, 255, 255, 0);
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            gap: 20px 90px;
            font-family: "Press Start 2P", system-ui;
            font-size: 20px;
            font-weight: 100;

        }

        .leftinleft {
            display: flex;

            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-align: left;
            background-color: rgb(49, 49, 49);
            width: 300px;
            min-height: 125px;
            padding: 15px 10px 25px 5px;
            border-radius: 15px;
            box-shadow: 3px 5px 20px rgba(82, 82, 82, 0.241);

        }

        .leftinright {
            display: flex;

            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 12px;
            text-align: left;
            background-color: rgb(49, 49, 49);
            width: 300px;
            min-height: 125px;
            padding: 15px 10px 25px 5px;
            border-radius: 15px;
            box-shadow: 3px 5px 20px rgba(82, 82, 82, 0.241);

        }

        .leftinleft:hover,
        .leftinright:hover {
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
            transform: translate3d(6px, -5px, 0);
            box-shadow: 6px 8px 16px rgba(17, 237, 237, 0.841);
        }

        .tech-logo1 {
            width: 100px;
            height: 100px;
            object-fit: contain;
            margin-bottom: 28px;
        }

        .tech-logo2 {
            width: 100px;
            height: 100px;
            object-fit: contain;
            margin-bottom: 0px;
        }

        /* everything below is projects section */

        .projectdiv1 {
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 0px;
            align-items: center;
            justify-content: center;
            /* padding-left: 250px; */
            animation: shadowFade 10.0s ease-in-out infinite;
            background-color: rgba(253, 253, 253, 0.11);
            border-radius: 12px;
            /* box-shadow: 3px 3px 15px rgb(161, 243, 158); */
            /* text-align: justify; */
            /* background-color: rgb(47, 47, 47); */
            padding: 20px 20px 20px 20px;
            margin: 40px 55px 20px 55px;
            font-family: "Google Sans Code", monospace;
            font-size: 18px;
            color: rgb(17, 237, 182);
        }

        .projtitle {
            font-family: "Press Start 2P", system-ui;
            padding-bottom: 10px;
            padding-left: 10px;
            display: inline-block;
            border-bottom: 4px dashed;

            width: 97%;
            font-size: 35px;
            font-weight: 100;
            letter-spacing: 0px;
            color: rgb(17, 237, 237);
            border-color: rgb(17, 237, 182);
        }

        .projectleft {

            text-align: justify;
            width: 100%;


        }

        .projectleft p {
            padding-right: 20px;
        }

        .projlist {
            padding-right: 20px;
            padding-left: 20px;
            list-style: disc;

        }

        .projlist li {
            margin-bottom: 10px;

        }

        .projectright {
            width: 100%;
            height: 100%;
            border-radius: 12px;
            padding-top: 20px;

        }

        .projpicdiv {
            position: relative;
            justify-content: center;

        }

        .projpic {
            width: 100%;
            height: 100%;
            border-radius: 12px;
            transition: filter 0.2s ease-in-out;

        }



        .projlink {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(20, 20, 20, 0.75);
            color: rgb(17, 237, 237);
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            text-decoration: none;
            border-radius: 12px;
            z-index: 2;
            transition: opacity 0.2s ease-in-out;

        }

        .projpicdiv:hover .projlink {
            opacity: 1;
            pointer-events: auto;
        }

        .projpicdiv:hover .projpic {
            filter: blur(3px) brightness(0.6);
        }