style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s, transform 0.3s;
}
body, html {
    font-family: 'Courier New', monospace;
    background: #da545b;
    color: #2c3e50;
    background: linear-gradient(-45deg, #da545b, #23d5ab, #da545b, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.wrapper {
    position: relative;
    max-width: 1200px;
    margin: auto;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('pattern.png');
    opacity: 0.5;
    z-index: -1;
}

.h1 {
    margin-top: 80px;
    margin-bottom: 30px;
}
.profile-section {
    text-align: center;
    padding: 50px;
    background: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
}

.profile-pic {
    width: 400px;
    height: auto;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

nav ul {
    background: #2c3e50;
    overflow: hidden;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 15px 20px;
    display: inline-block;
}

nav ul li a:hover, nav ul li a:focus {
    background: #da545b;
}

.card {
    background: #fff;
    margin: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

main {
    position: relative;
    z-index: 1;
}

footer {
    text-align: center;
    padding: 20px;
    background: #2c3e50;
    color: #fff;
}

#about {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 10px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative; 
}

.about-content h2 {
    color: #3498db;
    margin-bottom: 20px;
}

.about-content p {
    line-height: 1.6;
    color: #333;
    font-size: 1rem;
}

.highlight {
    background-color: #3498db;
    color: white;
    padding: 3px 6px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.about-icons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.icon {
    text-align: center;
    transition: transform 0.3s ease;
}

.icon img {
    width: 80px;
    height: auto;
    transition: transform 0.3s ease;
}

.icon-description {
    display: block;
    margin-top: 8px;
}

.icon:hover {
    transform: translateY(-10px);
}

.icon img:hover {
    transform: scale(1.1);
}

.about-content .highlight:hover {
    background-color: #2c3e50;
    cursor: pointer;
}


pre {
    background-color: #2C2F33;
    color: #DCDDDE;
    border-left: 3px solid #7289DA;
    padding: 10px;
    font-family: 'Courier New', monospace;
    overflow-x: auto;
    white-space: pre-wrap;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 18px;
}
pre code .keyword {
    color: #beec14; 
}

pre code .function {
    color: #da545b; 
}

@media only screen and (max-width: 768px) {
    .about-icons {
        flex-direction: column;
        align-items: center; 
    }
    .icon {
        margin-bottom: 20px;
    }
}


.icon#coffee-icon img {
    width: 80px;
    height: auto;
    transition: transform 0.3s ease;
}

#coffee-icon:hover img {
    transform: scale(1.1); 
}


#coffee-icon:hover .icon-description {
    font-weight: bold; 
    color: #3498db; 
}


.card:hover, nav ul li a:hover, .nav-dot:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}


.carousel {
    position: relative;
    max-width: 100%;
    margin: auto;
}

.carousel-slides {
    display: flex;
    overflow: hidden;
}

.slide {
    display: none;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    transition: all 0.5s ease;
}

input[name="projectCarousel"]:nth-child(1):checked ~ .carousel-slides .slide:nth-child(1),
input[name="projectCarousel"]:nth-child(2):checked ~ .carousel-slides .slide:nth-child(2),
input[name="projectCarousel"]:nth-child(3):checked ~ .carousel-slides .slide:nth-child(3),
input[name="projectCarousel"]:nth-child(4):checked ~ .carousel-slides .slide:nth-child(4) {
    display: flex;
}

.carousel-nav {
    text-align: center;
}

.nav-dot {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 5px;
    cursor: pointer;
    border-radius: 50%;
    background: #bbb;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.nav-dot:hover {
    background: #3498db;
}

input[name="projectCarousel"] {
    display: none;
}


@media only screen and (max-width: 768px) {
    .profile-pic {
        width: 250px;
        height: 250px;
    }
}

.project-img {
    width: 100%; 
    height: auto;
    border-radius: 5px;
    margin: 10px 0;
}

.project-link {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
    margin-bottom: 30px;
}

.project-link:hover {
    background-color: #2c3e50;
}

.project:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.project-img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}

.btn {
    display: inline-block;
    background: #3498db;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
    margin-top: 20px;
    margin-bottom: 30px;
}

.btn:hover {
    background: #2c3e50;
}

.learning-journey {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 10px;
    margin: 20px auto 50px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.learning-journey h2 {
    color: #3498db; 
    margin-bottom: 20px;
}

.learning-journey p {
    line-height: 1.6;
    color: #333;
    font-size: 1rem;
}


span {
    position: relative;
    cursor: pointer;
  }
  
  span::after {
    content: attr(data-detail);
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.6s, visibility 0.6s;
  }
  
  span:hover::after {
    visibility: visible;
    opacity: 1;
  }
  
  .hard-of-hearing::after {
    content: "Navigating both the silent and sound-filled worlds has honed my ability to observe and appreciate the unspoken nuances in games and music. It's led me to advocate for more accessible technology and inclusive design in everything from multiplayer games to coding platforms.";
  }
  
  .avid-gamer::after {
    content: "From pixelated quests to sprawling open worlds, gaming is my portal to new realities. It's where I've battled dragons, built empires, and even programmed my first game. Each genre teaches me something new, mirroring the challenges and triumphs I encounter in coding.";
  }
  
  .proud-nerd::after {
    content: "Proudly diving into realms of fantasy and science fiction, I've found both escape and inspiration. My passion for stories that stretch the imagination fuels my creativity in coding, driving me to build my own worlds through lines of code.";
  }
  
  .old-era-music::after {
    content: "There's something timeless about the crackle of a vinyl record playing classics from decades past. This music connects me to a different era, influencing my creative process with its unique blend of sounds and storytelling techniques that I often mirror in my coding projects.";
  }
  
  .snowboarding::after {
    content: "Snowboarding is my adrenaline rush, a physical puzzle where each slope offers new challenges. It's about planning your line, adapting to the terrain, and sometimes, just going with the flow. It teaches me balance, focus, and the thrill of navigating the unpredictable—much like coding.";
  }

  .life-motto::after {
    content: "Embrace the adventure of life with 'Ride' - feel the wind as you conquer roads and slopes. 'Drink' - savor the moments with friends over your favorite beverages. 'Play' - immerse yourself in games that challenge and excite you. 'Lime it' - chill out and relax, embracing the laid-back moments. It's all about balance and enjoying every aspect of life.";
  }