@font-face {
    font-family: "RobotoRegular";
    src: url("/assets/roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: "RobotoLight";
    src: url("/assets/roboto/Roboto-Light.ttf");
}

@font-face {
    font-family: "DM Serif Display";
    src: url("/assets/fonts/DeepMindSerif_v5.003/DeepMindSerifDisplay-Regular.ttf");
}

@font-face {
    font-family: "DM Serif Text";
    src: url("/assets/fonts/DeepMindSerif_v5.003/DeepMindSerifText-Regular.ttf");
}

@font-face {
    font-family: "Open Sans";
    src: url("/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf");
}

html {
    scroll-behavior: smooth;
}


a {
    transition: 0.5s;
}

body {
    --max-width: 1264px;
    --main-bg-color: rgb(16, 15, 15);

    margin: 0px;
    background-color: var(--main-bg-color);
    color: #3d3d3d;
    font-family: "Open Sans";

}

h3 {
    margin: 40px 0
}

.webpage-nav {
    background-color: #1a1a1a00;
    max-width: var(--max-width);

    display: flex;
    align-items: center;
    transition: 0.3;
}

.portfolio-main-button {
    font-weight: 500;
    font-size: larger;
    padding: 16px;
}

.portfolio-nav-section {
    padding: 10px 24px;
    background-color: rgba(16, 15, 15, 0.0);
    margin: 8px;
    border-radius: 64px;
    transition: 0.2s;
}

.portfolio-nav-section:hover {
    /* animation-name: navigation-hover;
    animation-duration: 300ms; */
    background-color: rgba(64, 64, 64, 1.0);
    /* transition: background-color 200ms linear; */
    /* -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear; */
}

.portfolio-nav-mobile:focus {
    overflow: hidden;
    display: none
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit;
}

#hero-3d-background {
    filter: blur(4px);
}

#hero-3d-content {
    border-radius: 24px;
    filter: blur(1px);
}

.title-section {
    font-family: "Open Sans";
    font-weight: 700;

    /* border-top: 2px solid white; */
    font-size: 54px;
    line-height: 0.8;
    padding-left: 8px;
}


/* Portfolio - Main page */

.portfolio-site {
    /* background-color: #001305; */
    min-width: var(--max-width);
    width: var(--max-width);
    margin: auto;
    position: relative;
}

.portfolio-bottom-site {
    /* min-width: 1268px;
    width: 1268px; */
    /* margin: auto; */
    position: relative;
}

.portfolio-project-header {
    background-color: chocolate;
    width: 100%;
    max-height: 960px;
    height: 100vh;
    position: relative;
}

/* Portfolio - Hamburger Menu */
nav {
    padding: 1.5rem 2 rem;
    background-color: #22283100;

    z-index: 99;
    position: absolute;
    width: 100%;
}

.portfolio-checkbtn {
    color: white;
    cursor: pointer;

    display: block;

    width: 64px;

    text-align: center;
    padding: 16px 0;
    font-size: 2rem;

}

.portfolio-nav-mobile {
    display: none;

    position: block;
    top: 4.5rem;
    left: 0;
    background: #222831;
    z-index: 1;
    width: 100%;
}

.portfolio-nav-mobile>a {
    color: #fff;
    padding: 1rem 1.5rem;
    display: block;
    text-align: center;
}

.portfolio-nav-mobile-group {
    display: none;
    margin-left: auto;
}

.portfolio-nav-desktop-group {
    display: block;
    margin-left: auto;
}

/* #portfolio-check:checked + .webpage-nav {} */
.webpage-nav:has(#portfolio-check:checked) {
    background-color: #1a1a1aff;
}


#portfolio-check:checked~.portfolio-nav-mobile {
    display: block;
    position: absolute;
}


/* Main menu - threejs background */
.portfolio-title {
    height: calc(100vh - 48px);
    position: relative;
    min-height: 720px;
}

.portfolio-introduction {
    margin: auto;
    width: auto;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial, Helvetica, sans-serif;
    color: #FBF6E9;
}

.portfolio-hero-bg-button {
    background-color: green;
    cursor: pointer;

    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 48px;
    height: 48px;
    margin: 12px;
}

/* Portfolio - Hero Section - Border Blur*/

.portfolio-dots-scene {
    width: 100%;
    height: 100vh;

    overflow: hidden;

    position: absolute;
    z-index: -99;
}

.portfolio-test-hero-section::after {
    --negative-border-width: 1.5em;

    position: absolute;
    z-index: 2;
    filter: blur(4px);

    top: var(--negative-border-width);
    bottom: var(--negative-border-width);
    left: var(--negative-border-width);
    right: var(--negative-border-width);

    border: inherit;
    border-color: transparent;
    background: inherit;
    background-clip: border-box;
    content: "";
}

.portfolio-test-hero-section {
    --border-width: 1.5em;

    position: relative;
    z-index: 0;
    /* filter: blur(4px); */
    backdrop-filter: blur(4px);
    /* max-width: 13em; */
    /* max-height: 7em; */
    width: 100%;
    /* width: calc(100% - (2 * var(--bo1rder-width))); */
    /* height: calc(100vh - (2 * var(--border-width))); */
    height: 100vh;
    /* background: url("assets/images/1.png") ; */
    /* 50%/ cover border-box padding-box; */
    /* font-size: 2em; */

    /* backdrop-filter: blur(4px); */
}

.portfolio-test-hero-section {
    content: "";
}

/* Portfolio - Hero Section */
/* .portfolio-hero-bg{
    filter: blur(4px);
} 
*/

.portfolio-hero-section {
    /* width: 100%; */
    --border-px: max(20px, 4vmin);
    --margin-inside-border: 12px;
    --hero-border-radius: 24px;

    height: min(400px, 100vh);
    color: #FBF6E9;
    font-family: "Open Sans";
    /* font-size: 54px; */

    /* background: linear-gradient(rgba(17, 15, 9, 0.85), rgba(17, 15, 9, 0.95)), url("/assets/images/about-me-bg.jpg"); */
    background: linear-gradient(rgba(16, 15, 15, 0.75), rgba(16, 15, 15, 1.0)), url("/assets/images/about-me-bg.jpg");
    background-position: center;
    backdrop-filter: contrast(20%);
    background-size: cover;

}

.portfolio-hero-left-section {
    position: relative;
    top: var(--margin-inside-border);
    left: var(--margin-inside-border);
}

.portfolio-hero-name {
    font-size: 30px;
    font-weight: 500;
}

.portfolio-hero-description {
    font-family: "RobotoLight";
    font-size: 12px;
    font-weight: 100;
}

.portfolio-hero-border {
    position: absolute;

    top: var(--border-px);
    bottom: var(--border-px);
    left: var(--border-px);
    right: var(--border-px);

    border: 12px;
    border-color: #E2DCC8;
    border-style: solid;
    border-radius: var(--hero-border-radius);
}

.section-description {
    font-family: "Open Sans";
}

/*********************/
/*   Color Definer   */
/*********************/

/* https://colorhunt.co/palette/4c4b16898121e6c767f87a53 */
/* https://colorhunt.co/palette/100f0f0f3d3ee2dcc8f1f1f1 */
/* https://colorhunt.co/palette/1534483c5b6f948979dfd0b8 */

.color-1 {
    /* background-color: #100F0F; */
    background-color: rgb(15, 15, 15);
    color: #eeeeee;
}

.color-1-description {
    /* color: #d6f5f5; */
    /* background: linear-gradient(rgb(42, 42, 42), rgb(15, 15, 15)); */
    color: #eeeeee;
    font-family: "Open Sans";
}

.project-list-background {
    background: linear-gradient(rgb(15, 15, 15), rgb(42, 42, 42));
    color: #f6f4ee;
    transition: 0.3s;
}

.project-list-background:hover {
    background: linear-gradient(rgb(42, 42, 42), rgb(42, 42, 42));
    transition: 0.3s;
}

.color-4-description {
    /* background: linear-gradient(rgb(42, 42, 42), rgb(42, 42, 42)); */
    color: white;
}

.color-red {
    background-color: #F87A53;
    color: #feece7;
}

.color-light-green {
    background-color: #898121;
    color: #FAF9EA;
}

.color-light-green-description {
    color: #151305;
}

.color-green {
    background-color: #4c4b16;
    color: #f9f9eb;
}

.secondary-font {
    font-family: "Open Sans";
}

.flex-table {
    display: flex;
}

.grid-table {
    display: grid;
}

#hero-bg-contour {
    background-color: #4c4b16;

    /* background-image: url("assets/images/bg.png"); */
    width: 100%;
    height: 100%;
    border-radius: var(--hero-border-radius);
    background-size: cover;
    background-attachment: fixed;
}

/* Old hero style - I don't like it */


#me-name {
    font-size: 48px;
    padding: 4px 0;
}

#me-description {
    font-size: 18px;
    padding: 4px 0;
}

.portfolio-bar {
    min-height: 48px;
    height: 48px;
    z-index: 99;
    position: inherit;
    color: white;
}

.portfolio-bar>a>div {
    font-family: "IM Fell Double Pica", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    padding: 0 12px;
    float: right;
    line-height: 48px;
}

/* Portfolio - About Me */
.portfolio-main-about-me {
    padding: 100px 0;
    text-align: center;
}

.portfolio-about-me-section {
    /* background-image: url("/assets/images/about-me-bg.png"); */
    background-color: var(--main-bg-color);

    background-position: center;
    backdrop-filter: contrast(20%);

    background-size: cover;
    padding-bottom: 40px;
}

.portfolio-main-about-me-hero {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
}

.portfolio-main-about-me-flex {
    display: flex;
    flex-wrap: wrap;
}

.portfolio-about-me-description {
    padding: 0 16px;
    width: 70%;
}

.portfolio-about-me-description>p {
    padding: 8px;
    flex-basis: 33%;
}

.portfolio-about-me-description>p>a {
    color: #497c42;
    text-decoration: underline;
}

.portfolio-about-me-description>p>a:hover {
    color: lightskyblue;
    text-decoration: none;
}

.portfolio-about-me-description>ul {
    display: flex;
    list-style: none;
}

.portfolio-about-me-description>ul>li {
    padding: 4px;
}

.portfolio-about-me-description>ul>li>img {
    padding-right: 12px;
}

.portfolio-about-me-left-section {
    padding: 8px;
    /* flex: 60%; */
}

.portfolio-about-me-right-section {
    flex: 40%;
    height: 100%;
    padding: 16px;
    padding-right: 0;
}

.portfolio-main-about-me-title {
    margin-bottom: 32px;
    font-size: 54px;
    color: #feece7;
    line-height: 0.8;
    text-align: center;
    font-weight: 500;
}

.portfolio-nav-right-group {
    margin-left: auto;
    display: flex;
    /* float: right; */
}

.portfolio-main-about-me-description {
    font-size: 1rem;
    text-align: center;
    /* padding: 0 30%; */
    /* width: 425px; */

    margin: 0 auto;

    color: #d6f5f5;
}



.portfolio-about-me-right-section {
    flex: 30%;
}

.portfolio-about-me-right-section>img {
    max-width: 400px;
}

/*    Projects    */

.portfolio-list-of-projects {
    width: 100%;
    padding: 24px 0;
    height: 100vh;
    min-height: 400px;
    position: relative;
    color: white;
}

.portfolio-list-of-projects::before {
    filter: blur(5px);
}

.portfolio-list-of-projects {
    /* background-color: gray; */
    background-image: url("assets/projects/hexa-mirror-screenshot.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    /* filter: blur(5px); */
}

.portfolio-list-of-projects-title {
    padding-left: 56px;
    font-size: 56px;
}

/*************************/
/*   SKILLS / LANGUAGES  */
/*************************/

.portfolio-technology-skills {
    color: #ffffff;
    padding-bottom: 30px;
}

.portfolio-technology-skills-description {
    padding: 0 16px;
}

.technology-language-description {
    padding: 4px;

}

/* .portfolio-skills{
    background-color: darkslategray;
} */

.portfolio-skills {
    background-color: #F87A53;
}

/**************/
/*   CONTACT  */
/**************/

.portfolio-contact-title {
    /* padding-left: 56px; */
    font-size: 56px;
    margin: 32px 0;
    /* border-top: 2px solid #eee; */
    padding-top: 24px;
}

.portfolio-contact-description {
    text-align: center;
    font-size: x-large;
}

.portfolio-contact-container {
    width: 66%;
    margin: auto;
    margin-bottom: 48px;
}

.portfolio-contact-container>h3 {
    font-size: 2rem;
}

.portfolio-contact-container>p {
    font-family: "Open Sans";
    font-size: 1.1rem;
}

.portfolio-contact-list {
    display: flex;
    margin: 24px 0;
}

.portfolio-contact-item {
    width: 33.33%;
    text-align: center;
}

.contact-button>a {
    padding: 8px;
    border: 2px solid white;
    border-radius: 8px;
    transition: 0.25s;
}

.contact-button>a:hover {
    padding: 12px;
    border: 0px solid black;
    border-radius: 0px;
    color: #080808;
    background-color: #ffffff;
}

.portfolio-contact-item>img {
    width: 128px;
}

.portfolio-contact-qr-section {
    padding: 128px 32px;
    color: white;
}

.portfolio-contact {
    padding: 16px 0;
}

/* Tools */

.tool-item {
    width: 25%;
}

.tool-content {
    margin: 8px;
    /* background-color: #eafafac0; */
    padding: 12px;
    border-radius: 8px;
    border: 3px solid rgba(238, 238, 238, 0.25);
    transition: 0.3s;
}

.tool-content:hover {
    background-color: #383838;
    border: 3px solid rgba(238, 238, 238, 1.0);
}

.tool-icon {
    text-align: center;
}

.tool-icon>img {
    width: 96px;
}

.tool-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    padding-top: 8px;
}

.tool-description {
    padding: 20px 12px;
    text-align: justify;
    font-size: 0.9rem;
    font-family: "Open Sans";
    align-content: center;

    height: 1.5rem;
    padding-top: 8px;
}

.portfolio-skills-description {
    padding: 10px 16px;
}

.skills-content-logo-background {
    border-radius: 16px;
    display: inherit;
    width: 14.285%;
}

.skills-content-logo {
    padding: 16px;
    margin: auto 0;
    height: 64px;

    border-radius: 100%;
    border-color: white;
    border-style: solid;

    position: absolute;
}

.skills-content-logo>img {
    width: 64px;

    display: table-cell;
    /* vertical-align: middle; */
    height: 100%;
    object-fit: contain;
}

.skills-content-logo>a>img {
    width: 64px;
}

.portfolio-softwares {
    background-color: darkslategrey;
    color: white;
    padding-bottom: 16px;
    margin: 16px;
    margin-top: 40px;
}

.portfolio-languages-description {
    background-color: #293333;
    margin: 12px;
    /* padding: 4px 0; */
    border-radius: 12px;
    display: flex;
}

.portfolio-softwares-description {
    padding: 10px 16px;
}

.portfolio-tools-list {
    padding: 12px;
    width: 100%;
}

.portfolio-tools-row {
    display: flex;
    color: white;
    flex-wrap: wrap;
}

.portfolio-projects {
    /* padding: 24px 0; */
    background-color: rgb(15, 15, 15);

}

.portfolio-projects-group-name {
    padding: 16px;
    font-size: 1.75rem;
    padding-left: 32px;
    height: 100%;
    padding-bottom: 0px;
}

.portfolio-projects-group-name>h4 {
    margin: 4px 0;
}

.projects-group {
    display: flex;
    flex-wrap: wrap;
    list-style: none;

    box-sizing: border-box;
    padding: 0;
}

.project-thumbnail {
    padding: 24px;
    padding-bottom: 8px;
}

.project-thumbnail>img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;

    border-radius: 8px;
}

.project-item {
    width: 50%;

    margin: 0;
    align-items: center;


}

.project-short-info {


    border-radius: 12px;
    height: 100%;
    padding: 16px;
}

.project-short-info>p {
    font-family: "Open Sans";
}

.project-date {
    width: 192px;
    text-align: right;
    margin: auto 0;
    padding: 0 12px;
}

.project-description {
    display: block;
}

.project-short-info>h3 {
    font-size: 2rem;
    margin: auto 0;
}

.project-short-info:hover>h3 {
    color: white;
}

.project-window-padding {
    padding: 12px;
    height: 100%;
    box-sizing: border-box;
}

.project-tags {
    display: flex;
    flex-direction: row;
    padding: 12px;
    padding-top: 0;

    font-family: "Open Sans";
    font-weight: 400;
    font-size: 0.9rem;
    color: white;
}

.project-tags>div {
    margin: 4px;
    padding: 6px 12px;
    background-color: gray;
    border-radius: 8px;
}

.title-portfolio-section {
    padding: 24px;
    padding-left: 32px;
    margin-bottom: 16px;
}

.title-portfolio-section>h1 {
    margin: 0;
}

.portfolio-skills-description {
    padding: auto;
}

.skills-content {
    display: flex;
    margin: 8px;
}

.tools-icon {
    width: 50%;
    /* padding: 4px; */
}

.tools-content {
    display: flex;

    height: 80px;
    background-color: white;
    border-radius: 12px;
    vertical-align: middle;
    margin: 8px;
}

.tools-content-logo {
    padding: 8px;
}

.tools-content-logo>img {
    width: 64px;
}

.tools-content-info {
    padding: 8px;
    width: 100%;
    font-size: small;
}

.tools-content-info>div {
    height: 50%;
}

.tools-content-title {
    text-align: center;
    font-size: large;
}

.language-name {
    padding: 16px 8px;
    /* color:black; */
}

#half-width {
    flex: 50%;
}

.half-width {
    width: 50%;
}

/*********************/
/*   PROJECTS LIST   */
/*********************/

.project-list {
    padding: 0 48px;
}

.project-list>h2 {
    font-size: xx-large;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.project-list>h3 {
    font-style: oblique;
}

.project-list>p {
    font-size: x-large;
    width: 70%;
    /* padding-left: 48px; */
}

.project-list>p>a {
    color: white;
    text-decoration: underline;
}

.project-list>p>a:hover {
    color: wheat;
}

.projects-category {
    /* background-color: aquamarine; */
    display: flex;
}

.projects-category>div {
    float: left;
    flex: 33%;
    text-align: center;
}


/*  Information  */

.portfolio-information {
    background-color: lightblue;
    padding: 32px 0;
}

/*   Project   */
.portfolio-container {
    max-width: var(--max-width);
    /* width: 100%; */
    margin: 0 auto;
}

.portfolio-project-list {
    height: 100%;
    display: flex;
    flex-direction: column;

    border-radius: 16px;
}

.portfolio-project-list:hover {
    background-color: hsl(37, 38%, 85%);
}

.portfolio-project-list:hover>h3 {
    text-decoration: underline;
    color: #3c5b6f;
}

.portfolio-project-list>h3 {
    padding: 4px 24px;
    font-size: 2rem;
    margin: 0;
    padding-bottom: 0;
}

.portfolio-project-list>p {
    padding: 0 16px;
    padding-top: 0px;
    font-family: "Open Sans";
    font-weight: 500;

    height: 100%;
}

.portfolio-technology-computer-skills {
    display: flex;
    padding: 20px;

    border-top: solid 2px #f0e8db;
}

.portfolio-technology-computer-skills>div {
    width: 100%;
}

.portfolio-technology-table-softwares {
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}

.portfolio-technology-table {
    padding: 8px;
    /* margin: 0 8px; */

    position: relative;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.technology-language-info {
    --width-info: calc(100% / 7);

    width: var(--width-info);

    padding: 6px;
    box-sizing: border-box;
}

.technology-language-border {
    border: 2px solid rgba(238, 238, 238, 0.25);
    border-radius: 8px;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Open Sans";
    justify-content: center;

    padding: 8px;
    box-sizing: border-box;
    transition: 0.3s;
}

.technology-language-border:hover {
    background-color: #383838;
    border: 2px solid rgba(238, 238, 238, 1.0);
}

.framework-section {
    width: 50%;
    border-radius: 16px;
}

.framework-table {
    display: flex;

    margin: 4px;

    background-color: rgba(5, 5, 5, 0.1);
    border-radius: 16px;
    flex-wrap: wrap;
}

.framework-content-logo {
    width: 86px;
}

.framework-content-logo>a {
    display: inherit;
    padding: 8px;
}

.framework-content-logo>a>img {
    width: 64px;

    display: table-cell;
    /* vertical-align: middle; */
    height: 100%;
    object-fit: contain;
}

.framework-content-title {
    /* width: 100%; */
    text-align: center;
    margin: auto;
    font-size: 1.5em;
}

.framework-content-description {
    background-color: rgba(5, 5, 5, 0.2);
    border-radius: 16px;
    padding: 12px;
    text-align: justify;
}

.slide-type {
    height: 100%;
    width: 50%;
    top: 0px;
    float: left;
    /* background-color: aquamarine; */
    position: absolute;
}

.slide-type>div {
    height: 100%;
}

.portfolio-project-description {
    background-color: orange;
    width: 100%;
    min-height: 50vh;
    position: relative;
}

#graphic {
    /* background-image: url(/projects/media/smok.png) center no-repeat; */
    background: url(/projects/media/smok.png) center center no-repeat;
    background-size: cover;
    transition: transform 500ms;
}

.list-of-projects>li {
    list-style: none;
    margin: 24px 0;
    width: 100%;
}

.list-of-projects>li>.list-project-title {
    font-family: "RobotoRegular";
    font-weight: 400;
    font-style: normal;
    font-size: 40px;

    margin: auto;
    width: auto;
    position: relative;
    display: inline;

    left: 0%;
    /* transform: translate(-50%, -50%); */
    font-family: Arial, Helvetica, sans-serif;


    transition: width 800ms;
}

.list-of-projects:hover .list-project-title {
    /* .list-of-projects > li > .list-project-title:hover{ */
    left: 25%;
    /* transform: translate(-50%, -50%); */
}

.copyright-section {
    padding: 24px 8px;
    text-align: center;
    font-family: "Open Sans";

    color: white;
}

.footer-contact {
    height: 80px;
    width: 600px;

    margin: auto;
    display: flex;
}

.footer-contact-item {
    width: 50%;
    align-content: center;
    text-align: center;

    margin-top: 32px;
}

.footer-contact-item>a {
    width: 100%;
    height: 100%;
}

.footer-item {
    width: 50%;
    height: 100%;
    align-content: center;
    text-align: center;
    margin: auto;

    font-size: 1.25rem;
}

.footer-item:hover {
    color: white;
    text-decoration: underline;
}

/*******************************************/
/* ASSIGNED BACKGROUND IMAGES FOR PROJECTS */
/*******************************************/

#graphic-dragon-sculpture {
    background-image: linear-gradient(to right, rgba(10, 41, 41, 1.0) 0%, rgba(10, 41, 41, 0.0) 25%), url("/assets/images/dragon-sculpture.png");
    background-color: rgb(10, 41, 41);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 10%;
}

#graphic-lizard {
    background-image: url("/assets/images/zack-fair-capture3.jpg");
    background-size: cover;
    background-position-y: 18%;
}


/*******************/
/* HELPFUL CLASSES */
/*******************/

.underline_div {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

/* Mobile device optimizer */

@media only screen and (max-width: 1264px) {
    .portfolio-site {
        margin: auto;
        position: relative;
    }

    .dynamic-width {
        min-width: 100%;
        width: 100%;
    }

    .portfolio-container {
        max-width: 100vw;
        /* width: 100%; */
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1000px) {

    .portfolio-about-me-title {
        text-align: center;
        padding: 0;
    }

    .title-section {
        text-align: center;
    }

    .portfolio-about-me-description {
        padding: 8px;
        width: auto;
    }

    .portfolio-about-me-left-section {
        padding: 0px;
        flex: 0;
        width: 100%;
    }

    .portfolio-about-me-right-section {
        /* width: calc(100% - 16px); */
        padding-top: 64px;
        text-align: center;
    }

    .portfolio-about-me-right-section>img {
        width: calc(100% - 24px);
    }

    .portfolio-main-about-me-title {
        margin: 24px 0;
        text-align: center;
    }

    .portfolio-main-about-me-description {
        width: calc(100vw - 16px);
    }

    .portfolio-main-about-me-flex {
        flex-direction: column-reverse;
        align-items: center;
    }

    /* .portfolio-main-about-me-description {
        padding: 32px;
    } */

    .portfolio-skills {
        margin: 32px, 16px;
    }

    .portfolio-softwares {
        margin: 32px, 16px;
    }
}

@media only screen and (max-width: 800px) {
    .project-date {
        display: none;
    }

    .tools-icon {
        flex: 50%;
        width: 100%;
    }

    /* Mobile and desktop */
    .portfolio-nav-mobile-group {
        display: block;
    }

    .portfolio-nav-desktop-group {
        display: none;
    }

    .portfolio-technology-computer-skills {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .portfolio-technology-half-section {
        width: 100%;
    }

    .portfolio-tools-row {
        flex: 100%;
        flex-wrap: wrap;
    }

    .portfolio-technology-table-softwares {
        flex-wrap: wrap;
    }

    .project-item {
        /* height: 20vh; */
        width: 100%;
    }

    .portfolio-projects-group-name {
        text-align: center;
        /* padding: 32px 0; */
    }

    .technology-language-info {
        width: 25%;
    }
}

@media only screen and (max-width: 1120px) {
    .tool-item {
        width: 50%;
    }
}

@media only screen and (max-width: 600px) {
    .tool-item {
        width: 100%;
    }

    .framework-section {
        width: 100%;
    }
}


@media (min-width: 1280px) {
    .portfolio-hero-name {
        font-size: 54px;
    }

    .portfolio-hero-description {
        font-size: 22px;
    }
}