/* Google Font */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); /* css variable */ :root { /* Main colors */ /* Blue - hsl(217, 85%, 74%) Purple - hsl(245, 54%, 74%) Teal - hsl(181, 47%, 49%) Yellow - hsl(65, 60%, 70%) Green - hsl(162, 60%, 65%) Red - hsl(365, 67%, 70%) Pink - (330, 73%, 72%) */ --hue: 217; --sat: 85%; --light: 74%; --primary-color: hsl(var(--hue) var(--sat) var(--light)); /* primary */ --white-color: hsl(var(--hue) 45% 98%); /* white */ --dark-color: hsl(var(--hue) 26% 12%); /* dark */ /* Changable color for dark / light theme */ --color-01: hsl(var(--hue) var(--sat) var(--light)); --color-02: hsl(var(--hue) 45% 98%); --color-03: hsl(var(--hue) 26% 12%); --color-04: hsl(var(--hue) 0% 62%); --color-05: hsl(var(--hue) 26% 12%); --body-color: hsl(250 26% 12%); --hover-color: hsl(var(--hue) var(--sat) calc(var(--light) - 9%)); /* Background element colors */ --bottom-nav-bg: hsl(var(--hue) 32% 25% / .65); --card-bg: linear-gradient(120deg, hsl(var(--hue) 54% 74% / .15), hsl(var(--hue) 54% 74% / .05)); --modal-backdrop-bg: hsl(var(-hue) 54% 74% / .1); --footer-bg: linear-gradient(360deg, hsl(var(--hue) 54% 74% / .15), hsl(var(--hue) 54% 74% / .05)); --scrollbar-color: hsl(var(--hue) 25% 20%); --scrollbar-thumb: hsl(var(--hue) var(--sat) var(--light)); --scroll-thumb-hover: hsl(var(--hue) var(--sat) calc(var(--light) -7%)); /* Font and typography */ --body-font-family: "Inter", sans-serif; --h1-font-size: 2.85rem; --h2-font-size: 2.25rem; --h3-font-size: 1.97rem; --h4-font-size: 1.43rem; --h5-font-size: 1.13rem; --xlarge-font-size: 1.48rem; --large-font-size: 1.23rem; --medium-font-size: 1.18rem; --base-font-size: 1.1rem; --small-font-size: 1.07rem; --tiny-font-size: 0.98rem; --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semi-bold: 600; --font-bold: 700; --z-minus: -1; --Z-base: 0; --z-low: 1; --z-high: 10; --z-content: 100; --z-tooltip: 1000; --z-fixed: 1100; --z-overlay: 1110; --z-model: 1990; --z-max: 9999; } /** light theme */ .light-theme { /* Changable color for dark / light theme */ --color-01: hsl(var(--hue) 26% 12%); --color-02: hsl(var(--hue) 26% 12%); --color-03: hsl(var(--hue) 45% 98%); --color-04: hsl(var(--hue) 9% 46%); --color-05: hsl(var(--hue) var(--sat) var(--light)); --body-color: hsl(var(--hue) 45% 98%); /* Background element colors */ --bottom-nav-bg: hsl(var(--hue) 32% 85% / .8); --card-bg: hsl(0 0% 100%); --modal-backdrop-bg: hsl(var(-hue) 50% 12% / .5); --footer-bg: linear-gradient(360deg, hsl(var(--hue) var(--sat) var(--light)), hsl(var(--hue) var(--sat) var(--light) / .75)); --scrollbar-color: hsl(var(--hue) 9% 60%); --scrollbar-thumb: hsl(var(--hue) 9% 25%); --scroll-thumb-hover: hsl(var(--hue) 9% 17%); } /* Rest / Normalize */ * { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--body-font-family); } ul, li { list-style: none; } a { color: var(--color-04); text-decoration: none; cursor: pointer; } /* Base style */ html { scroll-behavior: smooth; } body { color: var(--color-04); background: var(--body-color); transition: .3s; } body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('/asset/pattern.png') repeat; opacity: 0.021; pointer-events: none; z-index: -1; transition: opacity 0.3s ease, filter 0.3s ease; } /* THIS WORKS: when light-theme class is on */ body.light-theme::before { opacity: 0.021; filter: brightness(0.5); /* darken pattern to make it visible */ } /* Reusable style */ .samss-section { position: relative; overflow: hidden; } .samss-container { max-width: 1200px; margin-left: auto; margin-right: auto; } .samss-wrapper { position: relative; margin-left: auto; margin-right: auto; } .samss-sub-container { padding-top: 5em; /* Reduced from 7em */ padding-bottom: 4em; /* Reduced from 5em */ } .section-title { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 60px; /* Reduced from 95px */ text-align: center; } .section-title h3 { color: var(--color-01); font-size: var(--h2-font-size); /* Reduced from h3 */ font-weight: var(--font-bold); margin-bottom: 8px; } .section-title p { color: var(--color-02); /* Changed from color-04 for better contrast */ font-size: var(--normal-font-size); /* Reduced from base */ font-weight: var(--font-regular); } .section-content { display: flex; justify-content: center; align-items: flex-start; max-width: 800px; /* Constrain width for better readability */ margin: 0 auto; } *, *:hover, *:focus { cursor: none !important; } /* Hide the default cursor body, a, button, input, textarea { cursor: none; } */ /* customized cursor */ /* Hide native cursor everywhere */ body, a, button, input, textarea { cursor: none !important; } /* customized cursor container */ .cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--z-max); user-select: none; } /* small dot */ .cursor-dot { position: absolute; width: 9px; height: 9px; background: var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.3s ease; } /* outer circle */ .cursor-circle { position: absolute; width: 32px; height: 32px; border: 2px solid var(--primary-color); border-radius: 50%; opacity: 0.5; transform: translate(-50%, -50%); transition: border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; } /* When hovering interactive elements, enlarge circle and change color */ .cursor-hover .cursor-dot { background: transparent; } .cursor-hover .cursor-circle { background: var(--primary-color); border-color: var(--hover-color); opacity: 0.5; transform: translate(-50%, -50%) scale(1.5); } /* samss-header */ .samss-header { z-index: var(--z-fixed); position: fixed; width: 100%; top: 0; left: 0; padding: 30px 0; transition: .3s ease; } .samss-header .inner { width: 100%; display: flex; align-items: center; justify-content: space-between; } .samss-logo a { color: var(--color-01); font-size: 2.7rem; font-weight: var(--font-medium); letter-spacing: -3px; transition: .3s; } .samss-logo a:hover { color: var(--hover-color); } .header-btns { display: flex; justify-content: center; align-items: center; gap: 25px; /* Add spacing between items */ } /* Style for icon containers */ .lets-talk-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; transition: .3s ease; display: none; } /* Define the size-6 class for SVGs */ .size-6 { width: 27px; height: 27px; } /* Optional: Add hover effects */ .lets-talk-icon:hover { color: var(--hover-color); transform: scale(1.1); } /* Style for the main button */ .samss-main-btn { width: fit-content; padding: 14px 30px; border: 1px solid var(--color-01); border-radius: 35px; transition: .3s ease; } .samss-main-btn:hover { color: var(--white-color); background: var(--hover-color); } .samss-main-btn a { color: var(--color-01); font-size: var(--small-font-size); font-weight: var(--font-medium); transition: .3s; } .samss-main-btn:hover a { color: var(--white-color); } /* dark/light theme button */ .theme-btn { position: relative; display: flex; justify-content: end; align-items: center; width: 27px; cursor: pointer; } .theme-btn svg { position: absolute; color: var(--color-01); font-size: 27px; cursor: pointer; transition: .3s ease; } .theme-btn:hover svg { color: var(--hover-color); transform: rotate(-21deg); } /*.theme-btn .moon-icon { display: none; }*/ .theme-btn.active-sun-icon .moon-icon, .theme-btn .sun-icon { opacity: 1; transition: .3s; } .theme-btn.active-sun-icon .sun-icon, .theme-btn .moon-icon { opacity: 0; transition: .3s; } /* Bottom navigation menu */ .bottom-nav-container { position: relative; } .bottom-nav { z-index: var(--z-fixed); position: fixed; left: 50%; transform: translateX(-50%); bottom: 50px; } .bottom-nav-inner { position: relative; } .bottom-nav .menu { background: var(--bottom-nav-bg); backdrop-filter: blur(10px); padding: 9px 18px; display: flex; justify-content: center; align-items: center; column-gap: 15px; border: 1px solid hsl(var(--hue) 45% 98% / 0.1); border-radius: 50px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .bottom-nav .menu li { position: relative; /* Important for tooltip positioning */ } .bottom-nav .menu li a { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 8px 12px; border-radius: 12px; transition: all 0.3s ease; text-decoration: none; min-width: 60px; } /* Remove conflicting size-6 class and use consistent sizing */ .bottom-nav .menu li a svg { color: var(--color-02); margin-bottom: 4px; width: 30px; /* Fixed size instead of conflicting rules */ height: 30px; padding: 7px; border-radius: 50%; transition: all 0.3s ease; } /* Fixed tooltip styling */ .bottom-nav .menu li a span { position: absolute; top: -45px; /* Changed from transform for better positioning */ left: 50%; transform: translateX(-50%); color: var(--dark-color); background: var(--primary-color); font-size: var(--tiny-font-size); font-weight: var(--font-medium); padding: 6px 12px; border-radius: 6px; pointer-events: none; opacity: 0; visibility: hidden; transition: all 0.3s ease; white-space: nowrap; z-index: calc(var(--z-fixed) + 10); } /* Show tooltip on hover */ .bottom-nav .menu li:hover a span { opacity: 1; visibility: visible; top: -50px; /* Slight movement animation */ } /* Fixed tooltip arrow */ .bottom-nav .menu li a span::before { content: ""; position: absolute; top: 100%; /* Position at bottom of tooltip */ left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--primary-color); z-index: -1; } /* Hover effects */ .bottom-nav .menu li:hover a svg { color: var(--white-color); background-color: var(--hover-color); transform: scale(1.1); } /* Current/active state */ .bottom-nav .menu .current svg { color: var(--dark-color); background-color: var(--primary-color); } /* Active state tooltip styling */ .bottom-nav .menu .current span { background: var(--hover-color); color: var(--white-color); } .bottom-nav .menu .current span::before { border-top-color: var(--hover-color); } /* Menu toggle button styling */ .menu-show-btn { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: var(--primary-color); border-radius: 50%; display: none; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; z-index: calc(var(--z-fixed) + 1); transition: all 0.3s ease; } .menu-show-btn:hover { transform: scale(1.1); background: var(--hover-color); } .bar-01, .bar-02 { width: 20px; height: 2px; background: var(--white-color); margin: 2px 0; transition: 0.3s; border-radius: 2px; } /* Home section */ .home-container { height: 100vh; /* Fixed typo */ display: flex; align-items: center; justify-content: center; } .home-container .samss-wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1000px; } /* Social Media - Vertical Left Side */ .home-social { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 20px; } .home-social span { writing-mode: vertical-rl; text-orientation: mixed; font-size: var(--small-font-size); color: var(--color-02); font-weight: var(--font-medium); } .social-line { width: 2px; height: 60px; background: var(--color-02); opacity: 0.3; } .social-icons { display: flex; flex-direction: column; gap: 15px; } .social-icons li a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; color: var(--color-02); font-size: 18px; transition: all 0.3s ease; } .social-icons li a:hover { background: var(--primary-color); color: var(--white-color); transform: translateY(-3px); } /* Main Content - Centered */ .home-content { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 600px; } /* Avatar - Small and Clean */ .avatar-img { width: 180px; /* Much smaller */ height: 180px; margin-bottom: 30px; position: relative; border-radius: 50%; overflow: hidden; border: 4px solid var(--primary-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .avatar-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Text Content */ .avatar-info { display: flex; flex-direction: column; align-items: center; gap: 25px; } .text-content { display: flex; flex-direction: column; align-items: center; gap: 10px; } .hello-text { font-size: var(--normal-font-size); color: var(--color-02); font-weight: var(--font-regular); margin: 0; } .my-name { font-size: var(--medium-font-size); color: var(--color-01); font-weight: var(--font-semi-bold); margin: 0; line-height: 1.2; } .what-i-do { font-size: var(--h3-font-size); color: var(--primary-color); font-weight: var(--font-medium); margin: 0; } .description { font-size: var(--normal-font-size); color: var(--color-02); font-weight: var(--font-regular); margin: 0; max-width: 400px; line-height: 1.6; } .fill-btn { background: var(--primary-color); border: 2px solid var(--primary-color); } .fill-btn a { color: var(--dark-color); } /* About Details - Full width without image */ .about-details { width: 100%; display: flex; justify-content: center; flex-direction: column; text-align: center; } .about-info .iam { color: var(--primary-color); /* Changed to primary color for consistency */ font-size: var(--h3-font-size); /* Reduced from h4 */ font-weight: var(--font-semi-bold); margin-bottom: 25px; } .about-info .about-description { color: var(--color-02); font-size: var(--normal-font-size); /* Reduced from base */ font-weight: var(--font-regular); line-height: 1.7; /* Better line height */ margin-bottom: 15px; max-width: 700px; margin-left: auto; margin-right: auto; } /* Professional Cards - Improved Layout */ .pro-list { position: relative; max-width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 40px 0; } .pro-card { background: var(--card-bg); display: flex; align-items: center; gap: 15px; padding: 21px 18px; text-align: left; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } .pro-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .pro-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--primary-color); border-radius: 50%; color: var(--white-color); font-size: 20px; flex-shrink: 0; } .pro-info { flex: 1; } .pro-card span { color: var(--color-01); font-size: var(--h4-font-size); /* Reduced size */ font-weight: var(--font-semi-bold); display: block; margin-bottom: 5px; } .pro-card p { color: var(--color-02); font-size: var(--small-font-size); /* Reduced from tiny */ font-weight: var(--font-regular); line-height: 1.4; margin: 0; } /* Buttons - Consistent with home section */ .about-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 30px; } /* Resume section - properly sized to match about and home */ .resume-tabs { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 50px; } .resume-tabs .tab-btn { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--color-02); font-size: var(--tiny-font-size); /* Much smaller to match */ font-weight: var(--font-medium); padding: 8px 15px; /* Further reduced */ border-radius: 20px; cursor: pointer; transition: all 0.3s ease; background: var(--card-bg); border: 1px solid transparent; } .resume-tabs .tab-btn:hover { color: var(--primary-color); border-color: var(--primary-color); } .resume-tabs .tab-btn i { font-size: 14px; /* Smaller icon */ } .resume-tabs .tab-btn.active { color: var(--white-color); background: var(--primary-color); border-color: var(--primary-color); } .resume-tabs .tab-btn.active:hover { background: var(--hover-color); } /* Tab Content */ .resume-tab-content { display: none; width: 100%; } .resume-tab-content.active { display: block; } /* Timeline Layout */ .resume-timeline { position: relative; max-width: 600px; /* Much smaller to match about section */ margin: 0 auto; } .resume-line { position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: var(--primary-color); opacity: 0.3; } .resume-items { position: relative; padding: 15px 0; } .resume-items .item { position: relative; margin-bottom: 30px; /* Smaller spacing */ width: 50%; } .resume-items .item:last-child { margin-bottom: 0; } /* Timeline Dots */ .item-dot { position: absolute; top: 15px; width: 10px; /* Smaller dots */ height: 10px; background: var(--primary-color); border-radius: 50%; border: 2px solid var(--body-color); z-index: 2; } /* Left Side Items */ .item-left { left: 0; padding-right: 25px; text-align: right; } .item-left .item-dot { right: -5px; } .item-left .item-content { flex-direction: row-reverse; } /* Right Side Items */ .item-right { left: 50%; padding-left: 25px; text-align: left; } .item-right .item-dot { left: -5px; } /* Item Content - Much smaller to match about cards */ .item-content { display: flex; align-items: flex-start; gap: 10px; background: var(--card-bg); padding: 12px; /* Much smaller padding */ border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } .item-content:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); border-color: var(--primary-color); } .item-icon { display: flex; align-items: center; justify-content: center; width: 32px; /* Much smaller */ height: 32px; background: var(--primary-color); border-radius: 50%; color: var(--white-color); font-size: 14px; /* Smaller icon */ flex-shrink: 0; } .item-info h5 { color: var(--color-01); font-size: var(--normal-font-size); /* Matching about section */ font-weight: var(--font-semi-bold); margin-bottom: 3px; line-height: 1.3; } .item-info h6 { color: var(--primary-color); font-size: var(--small-font-size); /* Smaller subtitle */ font-weight: var(--font-medium); margin-bottom: 4px; } .item-info p { color: var(--color-02); font-size: var(--tiny-font-size); /* Much smaller text */ font-weight: var(--font-regular); margin-bottom: 4px; line-height: 1.4; } .item-info .date { color: var(--primary-color); font-size: var(--tiny-font-size); font-weight: var(--font-medium); background: rgba(var(--primary-color-rgb), 0.1); padding: 2px 8px; /* Much smaller padding */ border-radius: 10px; display: inline-block; } /* Skills Grid - Matching about section pro-cards */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Smaller cards */ gap: 15px; max-width: 600px; margin: 0 auto; } .skill-category { background: var(--card-bg); padding: 15px; /* Matching about pro-cards */ border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); text-align: center; transition: all 0.3s ease; } .skill-category:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); border-color: var(--primary-color); } .skill-category h5 { color: var(--primary-color); font-size: var(--normal-font-size); /* Matching about section */ font-weight: var(--font-semi-bold); margin-bottom: 12px; } .skill-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .skill-list span { background: var(--primary-color); color: var(--white-color); padding: 4px 10px; /* Much smaller */ border-radius: 15px; font-size: var(--tiny-font-size); /* Tiny text */ font-weight: var(--font-medium); } /* Service section - Matching other sections' sizes */ .service-container { display: grid; place-items: center; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto; } .service-card { position: relative; background: var(--card-bg); width: 200px; /* Much smaller */ height: 180px; /* Much smaller */ display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px; /* Reduced padding */ border-bottom: 3px solid var(--primary-color); border-radius: 8px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.05); } .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .service-icon { color: var(--primary-color); font-size: 24px; /* Much smaller */ margin-bottom: 12px; } .service-info { text-align: center; } .service-info h4 { color: var(--color-01); font-size: var(--normal-font-size); /* Matching other sections */ font-weight: var(--font-semi-bold); margin-bottom: 15px; line-height: 1.3; } .service-see-more { font-size: var(--small-font-size); /* Smaller text */ color: var(--color-02); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 4px; } .service-see-more:hover { color: var(--primary-color); } .service-see-more i { font-size: 14px; transition: transform 0.3s ease; } .service-see-more:hover i { transform: translateX(3px); } /* Modal Styles - Reduced sizes */ .service-modal-backdrop { z-index: var(--z-overlay); position: fixed; background-color: var(--modal-backdrop-bg); backdrop-filter: blur(10px); top: 0; left: 0; width: 100%; height: 100vh; display: none; /* Hidden by default */ justify-content: center; align-items: center; overflow: auto; } .service-modal-backdrop.active { display: flex; } .service-modal { position: relative; background: var(--color-03); width: 90%; max-width: 600px; /* Much smaller */ height: fit-content; margin: 20px; padding: 25px; /* Reduced padding */ border-radius: 12px; border-bottom: 3px solid var(--primary-color); overflow: hidden; } .modal-close-btn { position: absolute; color: var(--color-02); font-size: 20px; /* Smaller */ top: 15px; right: 15px; cursor: pointer; transition: all 0.3s ease; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.05); } .modal-close-btn:hover { color: var(--primary-color); background: rgba(255, 255, 255, 0.1); } .service-modal .modal-content { display: flex; flex-direction: column; gap: 20px; max-height: 400px; /* Smaller */ margin-top: 20px; overflow-y: auto; } .modal-content::-webkit-scrollbar { background: hsl(var(--hue) 25% 20%); width: 4px; border-radius: 4px; } .modal-content::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; } .modal-content::-webkit-scrollbar-thumb:hover { background: var(--hover-color); } .service-modal .modal-title { text-align: center; margin-bottom: 15px; } .service-modal .modal-title h3 { color: var(--color-01); font-size: var(--h3-font-size); /* Matching other sections */ font-weight: var(--font-bold); margin-bottom: 8px; } .service-modal .modal-title p { color: var(--color-02); font-size: var(--small-font-size); /* Smaller */ font-weight: var(--font-regular); line-height: 1.5; } .modal-content h4 { color: var(--primary-color); font-size: var(--normal-font-size); /* Smaller */ font-weight: var(--font-semi-bold); margin-bottom: 12px; } .modal-content .my-services { list-style: none; padding: 0; } .modal-content .my-services li { display: flex; align-items: flex-start; margin-bottom: 12px; /* Smaller spacing */ gap: 10px; } .modal-content .my-services li i { color: var(--primary-color); font-size: 16px; /* Smaller */ margin-top: 2px; flex-shrink: 0; } .modal-content .my-services li p { color: var(--color-02); font-size: var(--small-font-size); /* Smaller */ line-height: 1.5; margin: 0; } /* Portfolio section - Matching other sections' sizes */ .portfolio-tabs { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 50px; /* Reduced from 85px */ } .portfolio-tabs .tab-btn { color: var(--color-02); font-size: var(--tiny-font-size); /* Smaller to match resume tabs */ font-weight: var(--font-medium); padding: 8px 15px; /* Reduced padding */ border-radius: 20px; cursor: pointer; transition: all 0.3s ease; background: var(--card-bg); border: 1px solid transparent; } .portfolio-tabs .tab-btn:hover { color: var(--primary-color); border-color: var(--primary-color); } .portfolio-tabs .tab-btn.active { color: var(--white-color); background: var(--primary-color); border-color: var(--primary-color); } .portfolio-tabs .tab-btn.active:hover { background: var(--hover-color); } .portfolio-container { display: grid; place-items: center; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Much smaller */ gap: 20px; /* Much smaller gaps */ max-width: 800px; /* Constrain width like other sections */ margin: 0 auto; } .portfolio-card { position: relative; background: var(--card-bg); width: 100%; max-width: 240px; /* Much smaller */ border-radius: 8px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.05); } .portfolio-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .portfolio-card.hide { display: none !important; opacity: 0; transform: scale(0.8); pointer-events: none; transition: none; /* disable transition to avoid flicker */ } .portfolio-card.show { display: block !important; /* or inline-block if preferred */ opacity: 1; transform: scale(1); pointer-events: auto; transition: all 0.3s ease; } .portfolio-card .card-img { width: 100%; height: 160px; /* Fixed height for consistency */ overflow: hidden; } .portfolio-card .card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .portfolio-card:hover .card-img img { transform: scale(1.05); } .portfolio-card .card-info { position: relative; padding: 12px 15px; /* Reduced padding */ } .portfolio-card .card-info span { color: var(--primary-color); /* Changed for better visibility */ font-size: var(--tiny-font-size); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; } .portfolio-card .card-info h4 { color: var(--color-01); font-size: var(--normal-font-size); /* Reduced from medium */ font-weight: var(--font-semi-bold); margin: 0; line-height: 1.3; } .portfolio-card .card-info .card-btn { position: absolute; right: 12px; bottom: 12px; color: var(--white-color); background: var(--primary-color); font-size: 14px; /* Smaller icon */ width: 28px; /* Smaller button */ height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transform: scale(0); transition: all 0.3s ease; } .portfolio-card:hover .card-info .card-btn { transform: scale(1); } .portfolio-card .card-info .card-btn:hover { background: var(--hover-color); transform: scale(1.1); } /* Portfolio section - Properly sized to match other sections */ .portfolio-tabs { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 50px; } .portfolio-tabs .tab-btn { color: var(--color-02); font-size: var(--tiny-font-size); font-weight: var(--font-medium); padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; background: var(--card-bg); border: 1px solid transparent; } .portfolio-tabs .tab-btn:hover { color: var(--primary-color); border-color: var(--primary-color); } .portfolio-tabs .tab-btn.active { color: var(--white-color); background: var(--primary-color); border-color: var(--primary-color); } .portfolio-tabs .tab-btn.active:hover { background: var(--hover-color); } .portfolio-container { display: grid; place-items: center; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto; } .card-with-modal { width: 100%; transition: all 0.3s ease; } .portfolio-card { position: relative; background: var(--card-bg); width: 100%; max-width: 240px; border-radius: 8px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.05); } .portfolio-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .portfolio-card .card-img { width: 100%; height: 160px; overflow: hidden; } .portfolio-card .card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; } .portfolio-card:hover .card-img img { transform: scale(1.05); } .portfolio-card .card-info { position: relative; padding: 12px 15px; } .portfolio-card .card-info span { color: var(--primary-color); font-size: var(--tiny-font-size); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; } .portfolio-card .card-info h4 { color: var(--color-01); font-size: var(--normal-font-size); font-weight: var(--font-semi-bold); margin: 0; line-height: 1.3; } .portfolio-card .card-info .card-btn { position: absolute; right: 12px; bottom: 12px; color: var(--white-color); background: var(--primary-color); font-size: 14px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transform: scale(0); transition: all 0.3s ease; } .portfolio-card:hover .card-info .card-btn { transform: scale(1); } .portfolio-card .card-info .card-btn:hover { background: var(--hover-color); transform: scale(1.1); } /* Filter Animation - FIXED to remove empty spaces */ .card-with-modal.hide { display: none !important; opacity: 0; transform: scale(0.8); pointer-events: none; } .card-with-modal.show { display: block !important; opacity: 1; transform: scale(1); pointer-events: auto; transition: all 0.3s ease; } /* Portfolio Modal */ .portfolio-modal-backdrop { z-index: var(--z-overlay); position: fixed; background-color: var(--modal-backdrop-bg); backdrop-filter: blur(10px); top: 0; left: 0; width: 100%; height: 100vh; display: none; justify-content: center; align-items: center; overflow: auto; opacity: 0; transition: opacity 0.3s ease; } .portfolio-modal-backdrop.active { display: flex; opacity: 1; } .portfolio-modal { position: relative; background: var(--color-03); width: 90%; max-width: 900px; height: fit-content; max-height: 90vh; margin: 20px; padding: 30px; border-radius: 15px; border-bottom: 4px solid var(--primary-color); overflow: hidden; transform: scale(0.95); transition: transform 0.3s ease; display: flex; flex-direction: column; } .portfolio-modal-backdrop.active .portfolio-modal { transform: scale(1); } .modal-close-btn { position: absolute; top: 15px; right: 15px; color: var(--color-02); font-size: 24px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.05); z-index: 10; } .modal-close-btn:hover { color: var(--primary-color); background: rgba(255, 255, 255, 0.1); transform: rotate(90deg); } .modal-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; overflow-y: auto; max-height: 75vh; padding: 10px; } .modal-img { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .modal-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .modal-info { display: flex; flex-direction: column; gap: 15px; } .project-category { color: var(--primary-color); font-size: var(--small-font-size); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 1px; } .project-title { color: var(--color-01); font-size: var(--h2-font-size); font-weight: var(--font-bold); margin: 5px 0; } .project-description { color: var(--color-02); font-size: var(--normal-font-size); line-height: 1.7; margin-bottom: 15px; } .project-details h4 { color: var(--color-01); font-size: var(--h4-font-size); font-weight: var(--font-semi-bold); margin-bottom: 15px; position: relative; padding-bottom: 8px; } .project-details h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--primary-color); } .project-features { list-style: none; padding: 0; margin: 0; } .project-features li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; color: var(--color-02); font-size: var(--normal-font-size); } .project-features li i { color: var(--primary-color); font-size: 18px; margin-top: 3px; } .project-links { display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap; } .project-link { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--primary-color); color: var(--white-color); border-radius: 30px; font-size: var(--small-font-size); font-weight: var(--font-medium); transition: all 0.3s ease; text-decoration: none; } .project-link:hover { background: var(--hover-color); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } /* Contact me section - Matching other sections' sizes */ .contact-container { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; /*max-width: 900px;*/ margin: 0 auto; align-items: flex-start; } .contact-info h3 { color: var(--color-01); font-size: var(--h4-font-size); /* Matching other sections */ font-weight: var(--font-semi-bold); margin-bottom: 25px; position: relative; padding-bottom: 8px; } .contact-info h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--primary-color); } .contact-details { display: flex; flex-direction: column; gap: 25px; /* Reduced from 60px */ margin-bottom: 35px; } .contact-item { display: flex; align-items: flex-start; gap: 15px; /* Reduced from 25px */ padding: 15px; background: var(--card-bg); border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } .contact-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); } .contact-icon { color: var(--primary-color); font-size: 20px; /* Much smaller */ background: rgba(var(--primary-color-rgb), 0.1); width: 45px; /* Much smaller */ height: 45px; display: flex; justify-content: center; align-items: center; border-radius: 50%; flex-shrink: 0; } .contact-icon svg { width: 20px; height: 20px; } .contact-method { display: flex; flex-direction: column; gap: 4px; flex: 1; } .contact-method span { color: var(--color-02); font-size: var(--tiny-font-size); /* Matching other sections */ font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.5px; } .contact-method h4 { color: var(--color-01); font-size: var(--small-font-size); /* Much smaller */ font-weight: var(--font-semi-bold); margin: 0; line-height: 1.4; } .contact-method a { color: var(--primary-color); font-size: var(--tiny-font-size); font-weight: var(--font-medium); text-decoration: none; transition: all 0.3s ease; margin-top: 2px; } .contact-method a:hover { color: var(--hover-color); } .contact-method a i { font-size: 12px; margin-left: 4px; transition: transform 0.3s ease; } .contact-method a:hover i { transform: translateX(3px); } /* Social Links */ .contact-social-links { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; } .contact-social-links li a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--card-bg); border-radius: 50%; color: var(--color-02); font-size: 16px; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.05); } .contact-social-links li:hover a { background: var(--primary-color); color: var(--white-color); transform: translateY(-3px); border-color: var(--primary-color); } .contact-social-links li a:hover i { color: var(--white-color); } /* Contact Form */ .contact-form-container { background: var(--card-bg); padding: 25px; width: 126%; /* Reduced padding */ border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); } .contact-form-container h2 { color: var(--color-01); font-size: var(--h4-font-size); /* Matching other sections */ font-weight: var(--font-bold); margin-bottom: 8px; line-height: 1.3; } .contact-form-container h2 span { color: var(--primary-color); } .contact-form-container p { color: var(--color-02); font-size: var(--small-font-size); /* Smaller */ line-height: 1.6; margin-bottom: 25px; } .input-group { margin-bottom: 20px; } .input-group input, .input-group textarea { width: 100%; padding: 12px 15px; /* Smaller padding */ background: var(--body-color); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: var(--color-01); font-size: var(--small-font-size); /* Smaller font */ font-family: inherit; transition: all 0.3s ease; box-sizing: border-box; } .input-group input:focus, .input-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2); } .input-group input::placeholder, .input-group textarea::placeholder { color: var(--color-02); opacity: 0.7; } .input-group textarea { resize: vertical; min-height: 100px; } .send-message { position: relative; } .submit-btn { width: 100%; padding: 12px 20px; background: var(--primary-color); color: var(--white-color); border: none; border-radius: 25px; font-size: var(--small-font-size); font-weight: var(--font-medium); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .submit-btn:hover { background: var(--hover-color); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .submit-btn i { font-size: 16px; } .contact-form-alert { display: none; align-items: center; gap: 8px; margin-top: 15px; padding: 10px 15px; border-radius: 8px; font-size: var(--small-font-size); color: #fff; } .contact-form-alert.show { display: flex; } .contact-form-alert.success { background-color: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #22c55e; } .contact-form-alert.success i { color: #22c55e; } .contact-form-alert.error { background-color: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; } .contact-form-alert.error i { color: #ef4444; } /* Footer section - Matching other sections' sizes */ .samss-footer { background: var(--card-bg); border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 40px 0 140px; margin-top: 60px; } .samss-footer .inner { max-width: 1000px; margin: 0 auto; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; } /* Footer Brand */ .footer-brand { max-width: 280px; } .samss-footer .samss-logo a { color: var(--primary-color); font-size: var(--h2-font-size); /* Matching other sections */ font-weight: var(--font-semi-bold); text-decoration: none; transition: all 0.3s ease; } .samss-footer .samss-logo a:hover { color: var(--hover-color); } .footer-description { color: var(--color-02); font-size: var(--small-font-size); /* Small, matching other sections */ line-height: 1.6; margin-top: 12px; } /* Footer Sections */ .footer-links h4, .footer-contact h4, .footer-social h4 { color: var(--color-01); font-size: var(--normal-font-size); /* Matching other sections */ font-weight: var(--font-semi-bold); margin-bottom: 15px; position: relative; padding-bottom: 6px; } .footer-links h4::after, .footer-contact h4::after, .footer-social h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 25px; height: 2px; background: var(--primary-color); } /* Footer Menu */ .footer-menu { list-style: none; padding: 0; margin: 0; } .footer-menu .menu-item { margin-bottom: 8px; } .footer-menu .menu-item a { color: var(--color-02); font-size: var(--small-font-size); /* Small font */ font-weight: var(--font-regular); text-decoration: none; transition: all 0.3s ease; display: block; padding: 2px 0; } .footer-menu .menu-item a:hover { color: var(--primary-color); padding-left: 5px; } /* Footer Contact */ .contact-info p { color: var(--color-02); font-size: var(--small-font-size); /* Small font */ margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .contact-info i { color: var(--primary-color); font-size: 14px; width: 16px; } /* Footer Social */ .social-links { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; } .social-links li a { display: flex; align-items: center; justify-content: center; width: 32px; /* Small size */ height: 32px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; color: var(--color-02); font-size: 14px; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.05); } .social-links li a:hover { background: var(--primary-color); color: var(--dark-color); transform: translateY(-2px); border-color: var(--primary-color); } /* Footer Bottom */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.05); flex-wrap: wrap; gap: 15px; } .copy-right, .footer-credit { color: var(--color-02); font-size: var(--tiny-font-size); /* Very small font */ font-weight: var(--font-regular); margin: 0; } .copy-right a { color: var(--primary-color); text-decoration: none; font-weight: var(--font-medium); transition: color 0.3s ease; } .copy-right a:hover { color: var(--hover-color); } .copy-right i, .footer-credit i { font-size: 12px; margin: 0 3px; } .footer-credit i { color: var(--primary-color); animation: heartbeat 1.5s ease-in-out infinite; } /* Responsive Design */ @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* ===== RESPONSIVE DESIGN ===== */ /* Large Desktop */ @media screen and (max-width: 1400px) { .samss-container { max-width: 1100px; padding: 0 20px; } .home-container .samss-wrapper { max-width: 900px; } } /* Desktop */ @media screen and (max-width: 1200px) { .samss-container { max-width: 960px; padding: 0 20px; } /* Adjust font sizes */ :root { --h1-font-size: 2.5rem; --h2-font-size: 2rem; --h3-font-size: 1.75rem; --h4-font-size: 1.25rem; } /* Home section adjustments */ .home-social { left: -10px; } .avatar-img { width: 160px; height: 160px; } } /* Tablet Landscape */ @media screen and (max-width: 1024px) { .samss-container { padding: 0 30px; } /* Header adjustments */ .samss-header { padding: 20px 0; } .samss-logo a { font-size: 2.2rem; } /* Home section - stack social media */ .home-container .samss-wrapper { flex-direction: column; gap: 30px; } .home-social { position: static; transform: none; flex-direction: row; justify-content: center; order: 2; } .home-social span { writing-mode: initial; text-orientation: initial; } .social-line { width: 60px; height: 2px; } .social-icons { flex-direction: row; } /* Professional cards */ .pro-list { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; } /* Resume tabs */ .resume-tabs { gap: 10px; } /* Service cards */ .service-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Portfolio grid */ .portfolio-list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* Contact section */ .contact-container { gap: 30px; } } /* Tablet Portrait */ @media screen and (max-width: 768px) { .samss-container { padding: 0 20px; } /* Font size adjustments */ :root { --h1-font-size: 2.2rem; --h2-font-size: 1.8rem; --h3-font-size: 1.5rem; --h4-font-size: 1.15rem; --xlarge-font-size: 1.3rem; --large-font-size: 1.15rem; --medium-font-size: 1.1rem; --base-font-size: 1rem; --small-font-size: 0.95rem; --tiny-font-size: 0.85rem; } /* Header */ .samss-header .inner { padding: 0 20px; } .header-btns { gap: 15px; } .samss-main-btn { padding: 12px 24px; display: none; /* Hide on mobile */ } .lets-talk-icon { display: flex; /* Show icon instead */ } /* Bottom navigation - show menu button */ .menu-show-btn { display: flex; } .bottom-nav { bottom: -100px; transition: bottom 0.3s ease; } .bottom-nav.show { bottom: 20px; } .bottom-nav .menu { padding: 12px 20px; column-gap: 10px; } .bottom-nav .menu li a { padding: 6px 8px; min-width: 50px; } .bottom-nav .menu li a svg { width: 24px; height: 24px; padding: 5px; } /* Home section */ .avatar-img { width: 140px; height: 140px; margin-bottom: 25px; } .avatar-info { gap: 20px; } .text-content { gap: 8px; } /* About section */ .pro-list { grid-template-columns: 1fr; gap: 12px; } .pro-card { padding: 18px 15px; } .about-buttons { flex-direction: column; align-items: center; } /* Resume section */ .resume-tabs { flex-direction: column; gap: 8px; } .resume-tabs .tab-btn { width: 100%; max-width: 200px; justify-content: center; } .resume-content { padding: 0 10px; } /* Service section */ .service-list { grid-template-columns: 1fr; gap: 15px; } /* Portfolio section */ .portfolio-list { grid-template-columns: 1fr; gap: 20px; } /* Contact section */ .contact-container { grid-template-columns: 1fr; gap: 25px; } .contact-form-container { padding: 25px 20px; max-width: 100%; } /* Footer */ .footer-content { grid-template-columns: 1fr 1fr; gap: 25px; } .footer-brand { grid-column: 1 / -1; text-align: center; max-width: 100%; } /* Modal adjustments */ .modal-content { margin: 20px; max-height: calc(100vh - 40px); } } /* Mobile Landscape */ @media screen and (max-width: 640px) { .samss-sub-container { padding-top: 3em; padding-bottom: 3em; } .section-title { margin-bottom: 40px; } /* Home adjustments for landscape */ .home-container { padding: 20px 0; } .avatar-img { width: 120px; height: 120px; } } /* Mobile Portrait */ @media screen and (max-width: 480px) { .samss-container { padding: 0 15px; } /* Font size further reduction */ :root { --h1-font-size: 2rem; --h2-font-size: 1.6rem; --h3-font-size: 1.35rem; --h4-font-size: 1.1rem; } /* Header */ .samss-logo a { font-size: 2rem; } .header-btns { gap: 10px; } .theme-btn svg { font-size: 24px; } /* Bottom navigation */ .bottom-nav .menu { padding: 8px 15px; column-gap: 8px; } .bottom-nav .menu li a { padding: 5px 6px; min-width: 45px; } .bottom-nav .menu li a svg { width: 20px; height: 20px; padding: 4px; } /* Home section */ .home-container { min-height: 100vh; padding: 80px 0 120px; } .avatar-img { width: 110px; height: 110px; margin-bottom: 20px; } .description { max-width: 100%; } /* Social media - horizontal layout */ .home-social { margin-top: 20px; } .social-icons li a { width: 35px; height: 35px; font-size: 16px; } /* Professional cards */ .pro-card { flex-direction: column; text-align: center; padding: 15px 12px; } .pro-icon { margin-bottom: 10px; } /* Resume tabs */ .resume-tabs .tab-btn { padding: 10px 12px; font-size: var(--small-font-size); } /* Contact form */ .contact-form-container { padding: 20px 15px; } .input-group input, .input-group textarea { padding: 12px 15px; } .submit-btn { padding: 12px 20px; } /* Footer */ .footer-content { grid-template-columns: 1fr; text-align: center; gap: 20px; } .footer-links h4::after, .footer-contact h4::after, .footer-social h4::after { left: 50%; transform: translateX(-50%); } .social-links { justify-content: center; } .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } /* Modal full screen on mobile */ .modal-content { margin: 10px; max-height: calc(100vh - 20px); border-radius: 8px; } /* Custom cursor - disable on touch devices */ .cursor { display: none; } body, a, button, input, textarea { cursor: auto !important; } } /* Small Mobile */ @media screen and (max-width: 360px) { .samss-container { padding: 0 12px; } /* Further font size reduction */ :root { --h2-font-size: 1.4rem; --h3-font-size: 1.2rem; --h4-font-size: 1rem; } .samss-logo a { font-size: 1.8rem; } .avatar-img { width: 100px; height: 100px; } .pro-card { padding: 12px 10px; } .contact-form-container { padding: 18px 12px; } .bottom-nav .menu { padding: 6px 12px; column-gap: 6px; } .menu-show-btn { width: 45px; height: 45px; bottom: 15px; right: 15px; } } /* Landscape orientation adjustments */ @media screen and (max-height: 500px) and (orientation: landscape) { .home-container { min-height: auto; padding: 40px 0 80px; } .avatar-img { width: 80px; height: 80px; margin-bottom: 15px; } .home-social { margin-top: 15px; } .social-icons li a { width: 30px; height: 30px; font-size: 14px; } .samss-sub-container { padding-top: 2em; padding-bottom: 2em; } } /* High DPI displays */ @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) { .avatar-img img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } }