* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 10dvh;
}

/* COLOR SCHEME
background - #0d1117
secondary - #161b22
border - #30363d
accent - #58a6ff
white text - #e6edf3
grey text: #e6edf38c;
*/

body {
    background-color: #0d1117;
    overflow-x: hidden;
}

.navbar {
    height: 10dvh;
    border-bottom: 1px solid #161b22;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5dvw;
    color: #e6edf3;
    position: sticky;
    top: 0;
    background-color: #0d1117de;
    z-index: 10;    
}

.navbar-left {
    font-family: monospace;
    letter-spacing: 3px;
    font-size: 16px;
}

.navbar span {
    color: #58a6ff;
}

.navbar-right ul {
    display: flex;
    gap: 20px;
}

.navbar-right li {
    list-style: none;
}

.navbar-right a:hover {
    color: #58a6ff;
    text-decoration-line: underline;
    text-underline-offset: 1dvh;
    transition: 1s ease;
}

.navbar-right a {
    text-decoration: none;
    color: #e6edf3;
    font-family: sans-serif;
    font-size: 15px;
}

.navbar-right label {
    display: none;
}

.menu-opened {
    display: none;
}

.hero-section {
    padding: 5dvh 5dvw;
    display: flex;
    justify-content: space-between;
}

.hero-section-left span {
    color: #58a6ff;
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 3px;
}

.hero-section-left h1 {
    color: #e6edf3;
    font-size: 48px; 
}

.hero-section-left li:first-child {
    list-style: none;
}

.hero-section-left ul {
    display: flex;
    gap: 3dvw;
    color: #30363d;
    font-size: 14px;
    font-weight: 600;
    margin-top: 1dvh;
    font-family: monospace;
}

.hero-section-left p {
    color: #8b949e80;
    width: 40dvw;
    margin-top: 5dvh;
    font-weight: 600;
    font-size: 20px;
}

.buttons {
    display: flex;
    gap: 2dvw;
}

.button {
    background-color: #58a6ff;
    border: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6dvh;
    width: 10dvw;
    font-weight: 700;
    margin-top: 5dvh;
    cursor: pointer;
}

.button a {
    text-decoration: none;
    color: black;
}

.linkedin {
    background-color: transparent;
    border: 1px solid #30363d9c;
}

.linkedin a {
    color: #8b949e;
}

.linkedin img {
    margin-left: 0.3dvw;
}

.hero-section-right {
    border: 2px solid #30363d;
    border-radius: 10px;
    width: 35dvw;
    height: 57dvh;
}

.terminal-nav {
    background-color: #161b22;
    border-bottom: 2px solid #30363d;
    padding-left: 1dvw;
    height: 7dvh;
    display: flex;
    align-items: center;
}

.circle {
    width: 3dvh;
    height: 3dvh;
    border-radius: 50%;
    margin-left: 0.5dvw;
}

.red {
    animation: redblink 2s 1s 3;
    background-color: rgba(255, 0, 0, 0.637);
}

.yellow {
    animation: yellowblink 2s 7s 3;
    background-color: rgba(255, 255, 0, 0.637);
}

.green {
    animation: greenblink 2s 13s 5;
    background-color: rgba(0, 128, 0, 0.637);
}

.terminal-nav span {
    color: #8b949e80;
    margin-left: 3dvw;
}

.terminal-body {
    padding: 2dvh 2dvw;
    font-family: monospace;
    letter-spacing: 1px;
}

.green-text {
    color: green;
}

.grey-text {
    color: #8b949e80;
}

.blue-text {
    color: #58a6ff;
}

.white-text {
    color: #e6edf3;
    margin-left: 0.5dvw;
}

.terminal-body ul {
    margin-top: 1dvh;
    line-height: 3dvh;
    font-size: 14px;
    font-weight: 600;
    color: #e6edf3;
}

.terminal-body li {
    list-style: none;
    line-height: 4dvh;
}

.brown-text {
    color: brown;
}

.terminal-cursor-blink {
    display: inline-flex;
    height: 2.3dvh;
    width: 0.6dvw;
    color: #00ffff;
    animation: terminalcursorblink 1s infinite;
}

.right-arrow {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    margin-left: 0.5dvw;
    height: 2dvh;
    margin-top: 2px;
}

.about {
    padding: 5dvh 5dvw;   
}

.about h3 {
    letter-spacing: 2px;
    color: #30363d;   
    font-size: 15px;
    display: inline-flex;
    font-family: monospace;
}

.about-accent {
    display: inline-flex;
    height: 6px;
    width: 4dvw;
    border-top: 1px solid #58a6ff8a;
    margin-left: 1dvw;
}

.about h2 {
    margin-top: 2dvh;
    color: #e6edf3;
    font-size: 22px;
}

.about-container {
    color: #e6edf38c;
    font-size: 16px;
    width: 30dvw;
    height: fit-content;
    border: 1px solid #161b22;
    border-top-color: #58a6ffc2;
    border-radius: 10px;
    padding: 3dvh 2dvw;
    margin-top: 5dvh;
}

.about-container p {
    margin-top: 2dvh;
}

.white {
    color: #e6edf3;
    font-weight: 600;
}

.skills {
    padding: 5dvh 5dvw;   
}

.skills > h3 {
    color: #58a6ff;   
    font-size: 15px;
    display: inline-flex;
    font-family: monospace;
    letter-spacing: 2px;
}

.skills-accent {
    display: inline-flex;
    height: 6px;
    width: 4dvw;
    border-top: 1px solid #58a6ff8a;
    margin-left: 1dvw;
}

.skills h2 {
    margin-top: 2dvh;
    color: #e6edf3;
    font-size: 22px;
}

.skills-section {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr 1fr;
}

.skill-block {
    margin-top: 5dvh;
    border: 1px solid #30363d;
    width: 28dvw;   
    height: 50dvh;
    padding: 5dvh 3dvw;
    border-radius: 10px;
}

.skill-block h4 {
    color: #58a6ff;
    font-size: 10px;
}

.skill-block h3 {
    color: #e6edf3;
    margin: 2dvh 0;
    font-weight: 700;
    font-size: 16px;
}

.skill-block ul {
    color: #e6edf38c;   
    margin-left: 1dvw;
    line-height: 4dvh;
}

.skill-block:hover {
    border: 1px solid #58a6ff;
    transition: 1s ease;
}

.projects {
    padding: 5dvh 5dvw;   
}

.projects > h3 {
    letter-spacing: 2px;
    color: #58a6ff;   
    font-size: 15px;
    display: inline-flex;
    font-family: monospace;
}

.projects-accent {
    display: inline-flex;
    height: 6px;
    width: 4dvw;
    border-top: 1px solid #58a6ff8a;
    margin-left: 1dvw;
}

.projects h2 {
    margin-top: 2dvh;
    color: #e6edf3;
    font-size: 22px;
}


.projects-grid {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr 1fr;
}

.projects-grid-blocks {
    margin-top: 5dvh;
    border: 1px solid #30363d;
    width: 28dvw;   
    min-height: 50dvh;
    padding: 5dvh 3dvw;
    border-radius: 10px;
    position: relative;
}

.projects-grid-blocks:hover {
    border: 1px solid #58a6ff;
    transition: 1s ease;
}

.projects-grid-blocks h2 {
    color: #e6edf3;
    margin: 2dvh 0;
    font-weight: 700;
    font-size: 16px;
}

.projects-grid-blocks p {
    color: #e6edf38c;
    margin-top: 4dvh;
}

.box-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1dvw;
    justify-content: space-around;
    position: absolute;
    bottom: 5dvh;
}

.boxes {
    padding: 1dvh 1dvw;
    width: 7dvw;
    text-align: center;
    border: 1px solid #58a6ff34;
    border-radius: 5px;
    background-color: #58a6ff07;
    color: #58a6ff;
    font-weight: 600;
    font-size: 14px;
}

.bash-block {
    min-height: 75dvh;
}

.bash {
    color: lightgreen;
    font-size: 11px;
    letter-spacing: 1px;
}

.projects-grid-blocks ul {
    margin-left: 1dvw;
    margin-top: 2dvh;
    font-size: 15px;
    color: #e6edf38c;
}

.projects-grid-blocks li {
    margin-top: 1dvh;
}

.certifications-and-learning {
    padding: 5dvh 5dvw;   
}

.certifications-and-learning > h3 {
    letter-spacing: 2px;
    color: #58a6ff;   
    font-size: 15px;
    display: inline-flex;
    font-family: monospace;
}

.certifications-and-learning-accent {
    display: inline-flex;
    height: 6px;
    width: 4dvw;
    border-top: 1px solid #58a6ff8a;
    margin-left: 1dvw;
}

.certifications-and-learning > h2 {
    margin-top: 2dvh;
    color: #e6edf3;
    font-size: 22px;
}

.cert-and-learn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.cert-and-learn-blocks {
    margin-top: 5dvh;
    border: 1px solid #30363d;
    width: 28dvw;   
    min-height: 50dvh;
    padding: 5dvh 3dvw;
    border-radius: 10px;
}

.cert-and-learn-blocks:hover {
    border: 1px solid #58a6ff;
    transition: 1s ease;
}

.cert-and-learn-blocks h2 {
    color: #e6edf3;
    font-size: 16px;
    word-spacing: 3px;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-color: #58a6ff;
}

.cert-and-learn-blocks h3 {
    margin-top: 3dvh;
    color: #e6edf38c;
    font-size: 15px;
}

.cert-and-learn-blocks ul {
    color: #e6edf38c;
    margin-top: 2dvh;
    margin-left: 1dvw;
}

.cert-and-learn-blocks li {
    margin-top: 1dvh;
}

.contact {
    padding: 5dvh 5dvw;   
}

.contact > h3 {
    letter-spacing: 2px;
    color: #58a6ff;   
    font-size: 15px;
    display: inline-flex;
    font-family: monospace;
}

.contact-accent {
    display: inline-flex;
    height: 6px;
    width: 4dvw;
    border-top: 1px solid #58a6ff8a;
    margin-left: 1dvw;
}

.contact > h2 {
    margin-top: 2dvh;
    color: #e6edf3;
    font-size: 22px;
}

.contact-container {
    color: #e6edf38c;
    font-size: 16px;
    width: 35dvw;
    height: fit-content;
    border: 1px solid #161b22;
    border-top-color: #58a6ffc2;
    border-radius: 10px;
    padding: 3dvh 2dvw;
    margin-top: 5dvh;
}

.social-media-contact-block {
    height: 5dvh;
    display: flex;
    gap: 1dvw;
    align-items: center;
    margin-top: 2dvh;
    border: 1px solid #58a6ff34;
    border-radius: 5px;
    background-color: #58a6ff07;
    padding: 4dvh 1dvw;
    position: relative;
}
.social-media-contact a {
    text-decoration: none;
}

.social-media-contact-app {
    font-weight: 600;
    color: #58a6ff;
    width: 6dvw;
}

.social-media-contact-address {
    color: #e6edf38c;
}

.arrow {
    position: absolute;
    right: 1dvw;
}

.footer {
    margin: 5dvh 0;
}

#hr {
    border: 0.5px solid #e6edf327;
}


.footer span {
    margin-top: 2dvh;
    display: block;
    justify-self: center;
    color: #e6edf38c;
    font-size: 12px;
    font-family: monospace;
}

@media (max-width: 768px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        overflow-x: hidden;
    }

    .navbar {
        background-color: #0d1117f6;
    }

    .navbar-left {
        font-size: 14px;
    }

    .navbar ul {
        display: none;
    }

    .navbar-right label {
        display: block;
    }

    .cancel-icon {
        display: none;
    }

    .menu-icon:hover {
        cursor: pointer;
    }

    .cancel-icon:hover {
        cursor: pointer;
    }

    .menu-opened {
        width: 100dvw;
        height: 90dvh;
        background-color: #0d1117;
        padding: 5dvh 5dvw;
        position: fixed;
        top: 10dvh;
        z-index: 9;
    }
    
    #menu:checked ~ .menu-opened {
        display: block;
    }

    #menu:checked ~ nav .menu-icon {
        display: none;
    }

    #menu:checked ~nav .cancel-icon {
        display: block;
    }

    .menu-opened ul {
        list-style: none;
    }

    .menu-opened a {
        color: #e6edf38c;
        text-decoration: none;
        line-height: 30px;
    }

    .hero-section {
        display: block;
    }

    .hero-section h1 {
        font-size: 36px;
    }

    .hero-section-left ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hero-section-left li {
        width: 40dvw;
    }

    .hero-section-left li:last-child {
        margin-left: 4.6dvw;
    }

    .hero-section-left p {
        width: 100%;
    }

    .button {
        width: 30dvw;
    }

    .hero-section-right {
        width: 100%;
        min-height: 55dvh;
        margin-top: 10dvh;
        padding-bottom: 60dvh;
    }

    .terminal-body {
        padding: 3dvh 5dvw;
    }

    .circle {
        width: 2dvh;
        height: 2dvh;
        margin-left: 2dvw;
    }

    .about-container {
        width: 100%;
    }

    .skills-section {
        grid-template-columns: 1fr;
    }

    .skill-block {
        width: 100%;
        padding: 5dvh 5dvw;
    }

    .skill-block ul {
        margin-left: 5dvw;
    }

    .skill-block li {
        margin-top: 1dvh;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .projects-grid-blocks {
        width: 100%;
        padding: 5dvh 5dvw;
    }

    .projects-grid-blocks ul {
        margin-left: 4dvw;
    }

    .box-section {
        gap: 1dvw;
    }

    .boxes {
        padding: 1dvh 3dvw;
        width: 25dvw;
    }

    .cert-and-learn-grid {
        grid-template-columns: 1fr;
    }

    .cert-and-learn-blocks {
        width: 100%;
        padding: 5dvh 6dvw;
    }

    .cert-and-learn-blocks ul {
        margin-left: 5dvw;
    }

    .contact-container {
        width: 100%;
        padding: 3dvh 5dvw;
    }

    .social-media-contact {
        margin-top: 5dvh;
    }

    .social-media-contact-block {
        font-size: 12px;
        height: 4dvh;
    }

    .social-media-contact-app {
        width: 17dvw;
    }
}

@media (min-width: 360px) and (max-width: 368px) {
    .bash-block {
        height: 85dvh;
    }
}

@media (min-width: 300px) and (max-width: 420px) {
    .cert-and-learn-blocks h2 {
        line-height: 5dvh;
    }

    .footer span {
        display: block;
        justify-self: center;
    }
}

@keyframes redblink {
    0% {
        background-color: rgba(255, 0, 0, 0.637);
    }

    50% {
        background-color: red;
    }
}

@keyframes yellowblink {
    0% {
        background-color: rgba(255, 255, 0, 0.637);
    }

    50% {
        background-color: yellow;
    }
}

@keyframes greenblink {
    0% {
        background-color: rgba(0, 128, 0, 0.637);
    }

    50% {
        background-color: lightgreen;
    }
}

@keyframes terminalcursorblink {
    50% {
        opacity: 0;
    }
}