*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

img {
    width: 2rem;
}

.card img[src="assets/github.svg"] {
    filter: invert(0);
}

img[src="assets/linkedin.svg"] {
    filter: grayscale(1) contrast(999);
    border: 1px solid white;
}

img[src="assets/java.svg"] {
    filter: brightness(1.5);
}

img[src="assets/github.svg"],
img[src="assets/c++.svg"],
img[src="assets/menu.svg"],
img[src="assets/flask.svg"],
img[src="assets/arrow.svg"] {
    filter: invert(1);
}

body {
    background-color: #0e1010;
    color: white;
    font-family: "avenir_next_lt";
}

header {
    background-color: #0e1010;
    display: flex;
    position: sticky;
    top: 0;
    padding: 0.8125em 1.625em;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #272d2b;
    z-index: 1;
}

.name {
    margin: 0;
    font-family: "mazius_italic";
    font-weight: normal;
    font-size: 1.875rem;
}

.menu {
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: 0.3s;
}

.menu:hover {
    transform: scale(1.3);
}

main {
    padding: 2.5em 1.5em 4.375em;
}

.card {
    background: white;
    color: black;
    border-radius: 20px;
    padding: 1.375em 0.75em;
    max-width: 1000px;
    margin: 0 auto;
}

.card-top h3 {
    margin: 0;
    font-family: "mazius_italic";
    font-weight: normal;
    font-size: 1.75rem;
    margin-bottom: 0.42em;
}

.card-description {
    margin: 0;
    line-height: 130%;
    margin-bottom: 1.375em;
    max-width: 600px;
}

.icons {
    display: flex;
    gap: 1em;
}

.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-bottom img {
    cursor: pointer;
    transition: 0.3s;
}

.card-bottom img:hover {
    transform: scale(1.3);
}

.resume-button {
    padding: 0;
    border: 0;
    font-family: "Neutral Face Bold";
    color: white;
    background-color: black;
    font-size: 0.6875rem;
    padding: 0.818em 3.045em;
    border: 1px solid #4f5b58;
    border-radius: 74px;
}

.resume-button:hover {
    background-color: rgb(75, 75, 75);
    cursor: pointer;
}

main section {
    margin: 5.3125em 0em;
    text-align: center;
}

.about {
    max-width: 800px;
    margin-inline: auto;
}

h1.about-header {
    margin-bottom: .25em;
}

.about img {
    width: 100%;
    margin-inline: auto;
    border-radius: 13px;
}

.section-header {
    margin: 0;
    font-family: "mazius_italic";
    font-weight: normal;
}

.description {
    margin: 1.5em 0em;
    max-width: 540px;
    margin-inline: auto;
}

.tech-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    gap: 2em;
    max-width: 600px;
    place-self: center;
}

.tech-icons img {
    transition: 0.3s;
    width: 50%;
}

.tech-icons img:hover {
    transform: scale(1.3);
}

.projects {
    max-width: 900px;
    margin-inline: auto;
}

.project {
    text-align: left;
    margin-bottom: 2.625em;
}

.project-content {
    max-width: 400px;
    margin-inline: auto;
}

.project-image {
    width: 100%;
    height: 7.125em;
    border: 3px solid darkgrey;
    background-color: rgb(70, 69, 69);
}

.project-org {
    margin: 0;
    font-family: "Neutral Face Regular";
    color: #859591;
    font-weight: normal;
    font-size: 1rem;
    margin: 0.5em 0em;
}

.project-header {
    margin: 0;
    font-size: 1.5rem;
    font-family: "mazius_regular";
    font-weight: normal;
}

.project-desc {
    margin: 0;
    margin: 0.5em 0em;
}

.project-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-footer img {
    transition: 0.3s;
}

.project-footer img:hover {
    transform: scale(1.15);
}

.project-footer a {
    text-decoration: none;
    color: white;
    font-size: 0.875rem;
    padding: 0.679em 1.107em;
    background-color: #2f3634;
    border-radius: 74px;
    font-family: "Neutral Face Bold";
    text-align: center;
}

.project-buttons {
    display: flex;
    flex-direction: column;
    gap: .2em;
}

.project-footer a:hover {
    background-color: #4a5552;
    cursor: pointer;
}

.contact {
    margin-bottom: 0;
}

.contact-icons {
    display: flex;
    justify-content: space-evenly;
    max-width: 300px;
    margin-inline: auto;
}

.contact-icons img {
    transition: 0.3s;
}

.contact-icons img:hover {
    transform: scale(1.3);
    cursor: pointer;
}

.contact-icons img {
    border: 1px solid white;
    border-radius: 4px;
}

footer {
    text-align: center;
    padding: 1em 1.581em;
    border-top: 1px solid #272d2b;
}

.footer-buttons {
    display: flex;
    justify-content: space-evenly;
}

.footer-buttons a {
    font-size: 0.875em;
    text-decoration: none;
    color: white;
    font-family: "Neutral Face Regular";
    transition: 0.3s;
}

.footer-buttons a:hover {
    transform: scale(1.2);
}

footer p {
    margin: 0;
    margin-bottom: 0.5em;
}

.credit a {
    color: rgb(173, 91, 249);
}

nav {
    position: fixed;
    background-color: #1d1d1e;
    height: 100%;
    inset: 0;
    max-width: 250px;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
    transform: translateX(-100%);
    transition: 0.3s;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li a {
    display: block;
    text-decoration: none;
    color: white;
    font-family: "Neutral Face Regular";
    width: 100%;
    padding: 0.875em 0em 0.875em 2.6875em;
}

nav ul li a:hover {
    background-color: #38383a;
}

nav img {
    box-sizing: content-box;
    transform: scale(-1);
    padding: 2.5625em 2.75em 1.875em;
    cursor: pointer;
    transition: 0.3s;
}

nav img:hover {
    transform: scale(-1) translateX(-15px);
}

.medvisor {
    background-image: url('../assets/imgs/medvisor.png');
    background-size: cover;
    background-position: center;
}

.portfolio {
    background-image: url('../assets/imgs/portfolio.png');
    background-size: cover;
    background-position: center;
}

.dining {
  background-image: url('../assets/imgs/dining.png');
  background-size: contain;
  background-repeat: no-repeat; 
  background-position: center;
  background-color: #14022e;
}

.flight {
    background-image: url('../assets/imgs/flight.png');
    background-size: contain;
    background-repeat: no-repeat; 
    background-position: center;
    background-color: #20132b;
}

@media only screen and (min-width: 744px) {
    .card {
        padding: 5.9375em;
    }

    .about {
        display: grid;
        text-align: left;
        gap: 1em;
        grid-template-columns: 1fr 1fr;
    }

    .about .section-header {
        text-wrap: nowrap;
        text-align: center;
    }

    h1.about-header {
        margin: 0;
        grid-column: 1 / span 2;
    }
    
    .about p {
        margin: 0;
        margin-bottom: 1.5em;
    }

    .project {
        display: flex;
        gap: 1.5em;
    }

    .project-content {
        display: flex;
        flex-direction: column;
    }

    .project-footer {
        margin-top: auto;
    }

    .project-image {
        height: 16.8125em;
    }

    .even {
        order: 2;
    }

    .menu {
        display: none;
    }

    nav {
        position: unset;
        transform: translateX(0) !important;
        background-color: #0e1010;
        max-width: unset;
    }

    nav img {
        display: none;
    }

    ul {
        display: flex;
        gap: 2.6875em;
    }

    nav ul li a {
        width: unset;
        padding: 0;
        transition: 0.3s;
    }

    nav ul li a:hover {
        background-color: unset;
        cursor: pointer;
        transform: scale(1.2);
    }
}

@media only screen and (min-width: 1065px) {
    main section {
        margin: 10.3125em 0em;
    }
}