@font-face {
    font-family: 'Dited';
    src: url('Dited.otf') format('opentype');
}

body {
    font-family: 'Dited', 'Dited', sans-serif;
    height: 100vh;
    margin: 0;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevents scrolling */
}

.container {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}

#cube {
    width: 150px; /* Increased size */
    height: 150px; /* Increased size */
    transform-style: preserve-3d;
    animation: rotate 20s infinite linear;
}

#cube .face {
    position: absolute;
    width: 150px; /* Adjust to new cube size */
    height: 150px; /* Adjust to new cube size */
    background-image: url('front.png');
    background-size: cover;
    backface-visibility: hidden;
    transform: translateZ(75px); /* Adjust to fit the new cube size */
}

#cube .back   { transform: rotateY(180deg) translateZ(75px); }
#cube .right  { transform: rotateY(90deg) translateZ(75px); }
#cube .left   { transform: rotateY(-90deg) translateZ(75px); }
#cube .top    { transform: rotateX(90deg) translateZ(75px); }
#cube .bottom { transform: rotateX(-90deg) translateZ(75px); }

.name {
    font-size: 40px; /* Increased font size */
    font-weight: bold;
    color: #000;
    margin-left: 60px; /* Increased space */
    animation: glow 2s infinite alternate, wobble-name 5s infinite alternate;
}

.social-links {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}

.social-links a {
    width: 40px;
    height: 40px;
    display: block; /* Necessary for the hover effect to work correctly */
}

.social-links img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease; /* Smooth transition for hover effects */
}

/* Hover effects for social media icons */
.social-links a:hover img {
    transform: scale(1.1); /* Slightly enlarges the icon on hover */
}

.instagram img {
    content: url('instagram.png');
}
.instagram:hover img {
    content: url('instagram2.png');
}

.github img {
    content: url('github.png');
}
.github:hover img {
    content: url('github2.png');
}

.twitter img {
    content: url('twitter.png');
}
.twitter:hover img {
    content: url('twitter2.png');
}

.about-me {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    text-align: center;
}

.about-me button {
    font-size: 24px;
    font-weight: normal;
    font-family:'Dited';
    padding: 10px 20px;
    color: rgb(69, 51, 170);
    background-color: #96d4f8;
    border: none;
    cursor: pointer;
    animation: glow 2s infinite alternate;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.about-me button:hover {
    background-color: #007acc; /* Darker shade on hover */
}

@keyframes rotate {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}

@keyframes glow {
    from { text-shadow: 0 0 10px #009ffd; }
    to { text-shadow: 0 0 20px #00bfff; }
}

@keyframes wobble-name {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

@keyframes wobble-social {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}