*{ padding: 0; margin: 0; border: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root{ /* Global colors */ /* COLORS */ --primary-background-color: #1c1b1b; --primary-text-color: #fbfbfb; --contrast-color: #d55334; --secondary-background-color: var(--primary-text-color); --secondary-text-color: var(--primary-background-color); --primary-hover-color: var(--contrast-color); --hamburger-menu-color: #adb09d; } /* **** */ /* HTML */ /* **** */ html{ scroll-behavior: smooth; } /* primary secondary text accent */ /* **** */ /* BODY */ /* **** */ body{ display: flex; height: 100vh; flex-direction:column; background-color: var(--primary-background-color); /* heigh: 100vh indicates that the will occupy the whole viewport. Meaning that later, it will be possible to use flex: 1 for example to occupy the remainig free space. */ } header{ background-color: var(--primary-background-color); } ul, ol{ list-style-type: none; } img{ max-width: 50%; border-radius: 50%; } h1{ font-size: 1.5em; } h2,h3{ text-align: center; margin-bottom: 20px; } nav{ height: 90%; } article{ padding: 30px 0; } article h3{ border-bottom: 1px solid #000000; } .about{ padding: 0 350px; } .home{ background: linear-gradient(rgba(0, 0, 0, 0.619), rgba(0, 0, 0, 0.5)), url("../assets/background.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; height: 100vh; background-color: var(--primary-background-color); } .home-card{ margin: auto; display: flex; flex-direction: column; align-items: center; } .button { background-color: var(--contrast-color); color: var(--primary-text-color); padding: 15px 32px; text-align: center; display: inline-block; margin-top: 50px; cursor: pointer; width: fit-content; border-radius: 0px; } .button:hover{ color: var(--primary-background-color); } .name-title{ padding-top: 40px; text-align: center; } .hr-pridmary { width: 60%; background-color: var(--primary-text-color); height: 1px; align-items: center; margin: auto; } .hr-secdondary{ width: 60%; background-color: var(--secondary-text-color); height: 1px; align-items: center; margin: auto; } /*******************/ /* THEME SECTIONS */ /*******************/ .primary-theme{ background-color: var(--primary-background-color); color: var(--primary-text-color); padding: 30px 50px 0px 50px; display: flex; flex-direction: column; justify-content: space-around; } .secondary-theme{ background-color: var(--secondary-background-color); color: var(--secondary-text-color); padding: 30px 50px 0px 50px; display: flex; flex-direction: column; justify-content: space-around; } /*******************/ /*******************/ /*******************/ .intro{ text-align: center; } .projects li{ padding: 0px 0px; } .projects a{ color: var(--contrast-color); } .project-container{ display: block; } .project-card{ display: flex; flex-direction: column; /*border: solid var(--primary-text-color) 1px;*/ margin: 50px 0; justify-content: space-between; border-radius: 10px; } .project-title-container{ color: var(--contrast-color); /*background-color: var(--contrast-color);*/ padding: 0 30px 0 30px; border-radius: 10px 10px 0 0; } .project-title-container h3{ font-weight: 350; text-align: left; } .project-card p,li{ font-weight: 200; } .project-card p{ padding: 0 30px 0 30px; } .project-card ul{ padding: 20px 50px 0 50px; list-style: circle; } .project-card a{ padding: 30px; } .projects-container{ display: flex; flex-direction: column; align-items: center; } .resume-card{ padding: 20px 0; } .resume-card-item, .resume-right-info{ text-align: left; } .resume-card-item :first-child{ font-weight: 800; } .resume-right-info{ font-style: italic; } .resume-card-skills{ padding: 20px 0; } .x-button{ position: absolute; top: 0px; font-size:xx-large; } .end-section-padding{ padding-bottom: 50px; } .desktop-menu{ display: none; } .mobile-menu{ height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: var(--primary-background-color); overflow-x: hidden; padding-top: 60px; transition: 0.5s; } .mobile-menu ul{ display: flex; flex-direction: column; justify-content:space-evenly; height: 100%; } .mobile-menu li{ font-size: larger; text-align: center; } .mobile-menu a{ color: var(--primary-text-color); text-decoration:none; font-weight: 500; } .mobile-menu a:hover{ color: var(--contrast-color); } .skill-title{ font-weight: 800; padding: 15px 0px 0px 0px; } .bar-icon{ position: fixed; padding: 10px 0 15px 15px; } .contact{ text-align: center; } .contact a{ color: var(--primary-text-color); } .contact-icons{ display: flex; justify-content: center; gap: 20px; margin: 30px 0 20px 0; } .contact a:hover{ color: var(--contrast-color); } .photo-title{ display: flex; flex-direction: column; align-items: center; color: var(--primary-text-color); padding-bottom: 50px; } footer{ text-align: center; } small{ font-size: xx-small; } .footer-copyright{ padding-bottom: 15px; } @media only screen and (min-width: 800px) { /*!!!!!!!*/ html{ text-align: center; } main{ /*margin: 0 15vw;*/ } .projects{ text-align: left; } /*!!!!!!!*/ .mobile-menu{ display: none; } .project-card{ width: 40vw; } .project-card h3{ text-align: left; } .home-card{ display: grid; grid-template-areas: "img name-title" "img button"; grid-template-columns: auto 1fr; align-items: center; justify-items: center; gap: 0 50px 0 50px; } .profile-photo{ grid-area: img; margin-right: 100px; } .name-title{ grid-area: name-title; font-size: x-large; } .button{ grid-area: button; } nav{ padding: 50px; height: 50px; width: 100vw; background-color: #151515eb; box-shadow: 0 4px 2px -2px #151515; } .desktop-menu{ display: flex; position: fixed; justify-content: space-between; align-items: center; padding: 0 20px; width: 100%; } .desktop-menu .contact-icons{ display: flex; align-items: center; gap: 1rem; /* Space between icons */ margin: 0; } .desktop-menu ul { display: flex; flex-direction: row; justify-content: center; align-content: center; gap: 5vw; } .desktop-menu ul li{ padding: 10px; text-align: center; font-size: small; font-weight: 500; } .desktop-menu a:hover{ color: var(--primary-hover-color); } .desktop-menu a{ text-decoration: none; color: var(--primary-text-color); } .transition-to-secondary{ height: 2px; background-image: linear-gradient(var(--primary-background-color), var(--secondary-background-color)); } .transition-to-primary{ height: 2px; background-image: linear-gradient(var(--secondary-background-color), var(--primary-background-color)); } img{ max-width: 12vw; } .bar-icon, .x-button{ display: none; } .end-section-padding{ padding: 2.6vw 20vw 2.6vw 20vw; } .resume-card-item{ /*padding: 15px 0;*/ text-align: left; } .resume-card{ display: grid; grid-template-columns: 1fr 1fr; padding: 30px 0; } .resume-right-info{ text-align: right; font-weight: 500; } .resume-card-item :first-child{ font-weight: 800; } .skills-container{ display: flex; justify-content: center; } .resume-card-item-skills :last-child{ font-style: normal; font-weight: 800; text-align: left; } .resume-right-info-skills{ text-align: left; font-weight: 400; padding: 0 30px 10px 30px; } .resume-card-skills{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } }