* {
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
main {
width: 100%;
position: relative;
opacity: 0;
visibility: hidden;
background-color: #f7f8ff;
background-size: 100vw calc(100vw / 24);
background-repeat: repeat;
line-height: 1.3;
}
@font-face {
font-family: "--headingnowtrial";
src: url("./src/font/HeadingNowTrial-57Extrabold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
section {
min-height: 100vh;
width: 100%;
}
#scroll-right_one::before {
content: "";
position: relative;
display: inline-block;
width: 60px;
height: 2px;
background: #121212;
animation: elasticusRight_one 2.9s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes elasticusRight_one {
0% {
transform-origin: 0% 0%;
transform: scaleX(0);
}
50% {
transform-origin: 0% 0%;
transform: scaleX(1);
}
50.1% {
transform-origin: 100% 0%;
transform: scaleX(1);
}
100% {
transform-origin: 100% 0%;
transform: scaleX(0);
}
}
@media (max-width: 200px) {
#scroll-right_one {
flex-direction: column;
}
}
/** SKILLS **/
.skill-card:hover {
transform: translateY(-5px);
}
.skill-tag {
background-color: #ffffff;
color: #8f8f8f;
padding: 0.5rem 1rem;
border-radius: 0.75rem;
font-size: 0.85rem;
font-weight: 400;
transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
}
.skill-tag:hover {
background-color: #caf291;
color: #8f8f8f;
}
@media (max-width: 1024px) {
.skills-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
@media (max-width: 640px) {
.skills-section {
padding: 2rem 1rem;
}
.skills-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.skill-card {
padding: 1rem;
}
.card-title {
font-size: 1.1rem;
}
.skill-tag {
font-size: 0.8rem;
padding: 8px;
}
}
@media (max-width: 480px) {
.skills-section {
padding: 1.5rem 0.75rem;
}
.card-header {
gap: 0.5rem;
}
.card-icon {
width: 2rem;
height: 2rem;
}
}
/** SKILLS **/
/** CURSOR **/
html,
.cursor,
.press-text-two {
cursor: url('data:image/svg+xml;utf8,'),
auto;
}
a,
span,
button,
.sosial-icons {
cursor: url('data:image/svg+xml;utf8,')
10 10,
auto;
}
p,
h1,
h3,
h4,
b,
.footer-c {
cursor: url('data:image/svg+xml;utf8,')
20 20,
auto;
}
.box svg,
.skill-tag,
.services__row-cards {
cursor: url('data:image/svg+xml;utf8,')
10 10,
auto;
}
.project-box-cursor-p {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 28444 28444'%3E%3Cpath fill='%239FA6A5' d='M4382 1866h22196v22196h-2490V6124L3995 26217l-1768-1767L22321 4356H4382z'/%3E%3C/svg%3E")
20 6,
pointer;
}
.project-box-cursor-d {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 64 64'%3E%3Cpath fill='%239FA6A5' d='M32 6c14.336 0 26 11.664 26 26S46.336 58 32 58 6 46.336 6 32 17.664 6 32 6m0-6C14.327 0 0 14.327 0 32s14.327 32 32 32 32-14.327 32-32S49.673 0 32 0z'/%3E%3Cpath fill='%239FA6A5' d='m49.751 9.525 4.242 4.241-40.808 40.807-4.241-4.24z'/%3E%3C/svg%3E")
16 16,
pointer;
}
.footer-item-cursor {
cursor: url('data:image/svg+xml;utf8,')
20 20,
auto !important;
}
/** CURSOR **/
/** PROJECTS **/
.project-box {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-box:hover {
transform: translateY(-5px);
}
.project-box {
flex: 1 1 45%;
background: #fff;
border-radius: 14px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #caf291;
}
.project-box:hover {
transform: translateY(-5px);
}
@media (max-width: 480px) {
.projects {
flex-direction: column;
gap: 20px;
padding: 20px;
}
.project-box {
flex: 1 1 100%;
}
.project-content h3 {
font-size: 1.2rem;
}
}
@media (min-width: 481px) and (max-width: 1024px) {
.projects {
flex-direction: row;
flex-wrap: wrap;
padding: 30px;
gap: 18px;
}
.project-box {
flex: 1 1 48%;
}
}
/** PROJECTS **/