:root {
    --index-primary-bgc: #0a0908; /* black */
    --index-alt-bgc: #191919; /* gunmetal */
    --index-primary-font: #f8f9fa; /* white */
    --index-primary-header: #1E90FF; /* dodger blue */
    --index-primary-header-hover: #b4cee7; /* grey blue */
    --index-alt-font: #ffff3f; /* highlighter yellow */
    --index-alt-font-hover: #fafac1; /* grey yellow */
    --index-primary-borders: #720026; /* dark red */
    --outline:  #71706e; /* dark silver */

    --prex-primary-bgc: #212529;
    --bgc: #312d26;
}

body {
    background: linear-gradient(135deg, #00000055 25%, transparent 25%) -40px 0/ 80px 80px, linear-gradient(225deg, #000000 25%, transparent 25%) -40px 0/ 80px 80px, linear-gradient(315deg, #00000055 25%, transparent 25%) 0px 0/ 80px 80px, linear-gradient(45deg, #000000 25%, #191919 25%) 0px 0/ 80px 80px;
    text-align: center;
    font-family: "Raleway", sans-serif;
    font-size: 24px;
    color: var(--index-primary-font);

    header {
    
    h1, a{
            color: var(--index-primary-header);
            text-decoration: none;
            font-size: 48px;

            &:hover {
                color: var(--index-primary-header-hover);
            }
        }

    p {
            color: #9f86c0;
        }
    }

    main {
        text-align: left;
        background-color: var(--bgc);
        font-family: "Raleway", sans-serif;
        margin-left: 20%;
        margin-right: 20%;
        padding: 1%;

        border: 20px solid #272420;
        h1 {font-size: 3em;}
        h2 {font-size: 1.5em;}
        p {font-size: 1.3em;}
        ul li {font-size: 1.2em;}
        #contact {color: #b1b0b0;}
        a {
            color: #FFA500;
            &:visited {
                color: #c48002;
            }
        }

        @media (max-width: 1300px) {
            border: none;
            margin: 0;
        }
        .column {
            display: grid;
            grid-template-columns: 0.7fr 3fr;
            grid-template-rows: auto;
            gap: 5px;

            grid-template-areas:
            "year courses";

            #year {grid-area: "year";}
            .courses {grid-area: "courses";}
        }
        .column-3 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
            gap: 7px;

            grid-template-areas:
            "profile skills certs";

            #profile {grid-area: "profile";}
            #skills {grid-area: "skills";}
            #certs {grid-area: "certs";}
            hr {grid-column: 1 / -1; width: 100%;}

            @media (max-width: 768px) {
                display: block;
            }
        }
    }
}

/* Animista */
.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}

.bg-pan-top {
	-webkit-animation: bg-pan-top 3s both;
	        animation: bg-pan-top 3s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-4-7 23:55:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2026-4-7 23:59:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2026-4-8 0:4:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bg-pan-top
 * ----------------------------------------
 */
@-webkit-keyframes bg-pan-top {
  0% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}
@keyframes bg-pan-top {
  0% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}