theme.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html, body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior:smooth;
    background-color: rgb(0, 0, 0);
}

.cursor {
    font-weight: 500;
    display: inline-block;
    animation: flicker 1.3s infinite;
}

.topbar {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.section1, .section2{
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    overflow-y: hidden;
    overflow-x: hidden;
    box-sizing: border-box;

}

.section2 {
    background: none;
}

.header {
    /* display: flex; 
    position: relative; 
    left: 60vw; 
    bottom: 7%;*/
    color: white;
    font-size: 1.5vw;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2vw;
}

nav ul li, nav ul span {
    display: inline;
    transition: 0.3s ease-in-out;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

nav ul li:hover{
    cursor: pointer;
    font-weight: bold;
    scale: 1.1;
}

nav ul li a {
    font-family: 'Poppins', 'monospace';
    color: green;
    text-decoration: none;
}

.title {
    font-family: "Poppins", 'monospace';
    font-size: 2vw;
    font-weight: bold;
    color: #00FF00;
    /* position: absolute;
    left: 40%;
    transform: translate(-50%, -50%); */
}

.heading101, 
.heading102 {
    font-family: "Poppins", 'monospace';
    margin-top: -5vh;
    font-weight: bold;
    font-size: 10vw;
    position: relative;
    transition: color 0.3 ease;
    margin-left: 3vw;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.running {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vh;
}

.info {
    border: 2px solid #6b6b6b66;
    border-radius: 20px;
    padding: 2vw;
    font-family: "Poppins", 'monospace';
    font-size: 1vw;
    padding-left: 2.5vw;
    color: white;
}

.section1{
    color: #00FF00;
    position: relative;
}

.section1 .heading102{
    padding-left: 25vw;
}

.section1 .intro{
    font-family: "Poppins", 'monospace';
    font-size: 1vw;
    font-weight: normal;
    padding-left: 2.5vw;
    color: white;
    line-height: 0.8;
    padding-top: 2vh;
    margin-top: -20vh;
}

.intro p {
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    transform: translateY(20px); /* Initial position for smoother animation */
}

.highlight{
    font-weight: bold;
    
}

.name{
    font-weight: bold;
}

footer{
    position: static;
    width: 100%;
    /*height: 5vh;*/
    opacity: 0.9;
    /*font-size: 0.8vw;*/
    font-family: "Poppins";
    color: whitesmoke;
    text-align: center;
    bottom: 0;
    margin: 0;
    padding: 0;
}

.members{
    font-family: 'Pixelify Sans', 'monospace';
    font-size: 2vw;
    /* position: relative;
    left: 2vw;
    top: 2vh; */
    color: rgb(128, 116, 217);
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.github{
    color: blueviolet;
    text-decoration: none;
}

.location{
    position: relative;
    top: 1.5vh;
    width: 50vw;
    padding-left: 22vw;
    height: auto;
}

@keyframes flicker {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

@keyframes glitch {
    0%, 100% {
        transform: translateX(0); 
    }
    5%, 95% {
        transform: translateX(5px); 
    }
    10%, 90% {
        transform: translateX(-5px);
    }
    15%, 85% {
        transform: translateX(3px); 
    }
    20%, 80% {
        transform: translateX(-3px);
    }
    25%, 75% {
        transform: translateX(2px); 
    }
    30%, 70% {
        transform: translateX(-2px);
    }
    35%, 65% {
        transform: translateX(1px); 
    }
    40%, 60% {
        transform: translateX(-1px); 
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes noShow {
    from {
        opacity: 0;
    }
    to {
        opacity: 0;
    }
}

.fade-in {
    animation-name: fadeIn;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    

}

@media (min-width: 900px) {

}

 /* @media screen and (max-width: 768px) {
    .heading101, .heading102 {
        font-size: 80px; /* Reduce the font size for smaller screens */
  /*      margin-left: 10px;
    }
    .section1 .heading102{
        padding-left: 0;
    }
    .section1 .intro {
        display: none;
    }
    .heading101{
        margin-top: 5%;
    }
    .heading101::before,
    .heading101::after{
        display: none;
    }
    .heading101:hover::before,
    .heading101:hover::after{
        display: none;
    } */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
  
/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
  
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}