* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(255, 254, 249);
    color: aliceblue;
  }

  body{
    background-color: transparent;
  }

  html{
    background-color: transparent;
  }

.main{
    background-color: transparent;
    height: 70vh;
    width: 70vh;
    margin: auto;
    margin-top: 3rem;
    margin-bottom: 2rem;
    color: aliceblue;
}

.nav-bar{
    height: 3vh;
    width: 50vh;
    font-family:  monospace;
    background-color: transparent; 
    gap: 2.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
}  

.gap{
    height: 2vh;
    /* background-color: cyan;ś */
}

#home-spec{
    font-family: monospace;
    background-color: blue;
    border: 0;
    padding: 0.5rem;
    color: aliceblue;
    font-size: 1rem;

}
#home-spec:hover{
    background-color: blue;
    color: aliceblue;
    cursor: pointer;
}

#home{
    font-family:  monospace;
    background-color: transparent;
    color: rgb(0, 0, 0);
    border: 0;
    padding: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}
#home:hover{
    background-color: blue;
    color: aliceblue;
    cursor: pointer;
}
#division{
    height: 0.0244rem;
    background-color: black;
    /* color: bisque; */
    border: 0;
}
.info-block{
    color: rgb(0, 0, 0);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    font-size: 5rem;
    
}

.info-block-2{
    color: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    column-gap: 0.2rem;
    gap: 0.2rem;
    margin: 0;
    border: 0;
     margin-top: 2rem;
}

#webdec{
    /* font-weight: bold; */
    font-size: 1.1rem;
    color: blue;
}

#zuck{
    height: 18vh;
    border-radius: 1rem;
    margin-top: 2.2rem;
}

#intro{
    font-size: 1rem;
    color: black;
    font-family:  monospace;
}
#home2{
    font-family: monospace;
    font-size: 1.1rem;
    background-color: transparent;
    border: 0;
    color: blue;

    
}
#home2:hover{
    background-color: blue;
    color: aliceblue;
    cursor: pointer;
}
#home3{
    font-family:  monospace;
    font-size: 1.1rem;
    background-color: transparent;
    border: 0;
    color: blue;
    padding-bottom: 1rem;
}
#home3:hover{
    background-color: blue;
    color: aliceblue;
    cursor: pointer;
}

#home4{
    font-family:  monospace;
    background-color: transparent;
    border: 0;
    padding: 0.5rem;
    font-size: 1rem;
    color: #FF0000;
}
#home4:hover{
    background-color: #FF0000;
    color: aliceblue;
    cursor: pointer;
}
#home5{
    font-family: monospace;
    background-color: transparent;
    border: 0;
    padding: 0.5rem;
    font-size: 1rem;
    color: blue;
}
#home5:hover{
    background-color: blue;
    color: aliceblue;
    cursor: pointer;
}
#home69{
    font-family: monospace;
    background-color: transparent;
    border: 0;
    padding: 0.5rem;
    font-size: 1rem;
    color: blue;
}
#home69:hover{
    background-color: blue;
    color:rgb(255, 230, 0);
    cursor: pointer;
}
.gap32{
    height: 1vh;
    /* background-color: cyan;ś */
}

#home6{
    font-family: monospace;
    background-color: transparent;
    color: black;
    border: 0;
    padding: 0.5rem;
    font-size: 1rem;
    text-align: center;
}
/* #home6:hover{
    background-color: blue;
    color: aliceblue;
    cursor: pointer;
} */

.bottoms{
    height: 15vh;    
}

#resume{
    font-family:  monospace;
    background-color: transparent;
    border: 0;
    padding: 0.4rem;
    font-size: 1rem;
    color: green;
    float: right;
    margin-top: -0.050rem ;
    /* margin-right: 0.5rem; */
    transition: all 0.2s ease;
    background-color: yellowgreen;
    color: black;
    border-radius: 0.5rem;
}
#resume:hover{
    background-color: green;
    color: aliceblue;
    cursor: pointer;
}


/* Responsive for mobile */
@media (max-width: 768px) {
    .main {
      width: 90vw;
      height: auto;
      padding: 1rem;
    }
  
    .nav-bar {
      flex-wrap: wrap;
      width: 100%;
      gap: 0.5rem;
      font-size: 0.9rem;
    }
  
    .info-block {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  
    .info-block-2 {
      align-items: center;
      text-align: center;
      margin-top: 0.5rem;
    }
  
    #zuck {
      height: 20vh;
      width: auto;
      margin-top: 0.5rem;
    }
  
    .year-block {
      text-align: center;
      padding: 0.5rem;
    }
  
    .social-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      text-align: center;
    }
  
    .top-gap, .gap, .gap32, .bottoms {
      height: 2vh;
    }
  
    #intro {
      font-size: 0.95rem;
    }
  
    button {
      font-size: 0.9rem !important;
      padding: 0.3rem !important;
    }
  }
  
  /* .linkstation {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    background-color: transparent;
    border: 0;
    color: rgb(76, 0, 255);
    text-decoration: none;
    letter-spacing: -0.1rem;
    display: inline-flex;
    justify-content: space-evenly;
    margin-left: 1rem;
    margin-top: 1.5rem;
  
  }

    .linkstation:hover {
        background-color: rgb(76, 0, 255);
        color: aliceblue;
        cursor: pointer;
    } */

    /* RGB Animation */
@keyframes rgbCycle {
  0%   { color: rgb(255, 0, 0); }      /* Red */
  25%  { color: rgb(156, 156, 0); }    /* Yellow */
  50%  { color: rgb(0, 255, 0); }      /* Green */
  75%  { color: rgb(0, 170, 255); }    /* Blue */
  100% { color: rgb(255, 0, 255); }    /* Magenta */
}

.linkstation {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    background-color: transparent;
    border: 0;
    text-decoration: none;
    letter-spacing: -0.1rem;
    display: inline-flex;
    justify-content: space-evenly;
    margin-left: 1rem;
    margin-top: 1.5rem;
    transition: all 0.3s ease;

    /* NEW: RGB animation */
    animation: rgbCycle 1s linear infinite;
}

/* Hover */
.linkstation:hover {
    background-color: rgb(76, 0, 255);
    color: aliceblue !important;
    cursor: pointer;
    animation: none; /* stop anim on hover if you want solid color */
    font-size: 1.2rem;
}


    @media (max-width: 768px) {
        .linkstation {
            font-size: 1rem;
            margin-left: -0.5rem;

        }
    }

    #gitA{
    font-family:  monospace;
    background-color: transparent;
    border: 0;
    padding: 0.5rem;
    /* font-size: 1rem; */
    color: black;
    /* margin-top: 1rem; */
    }

    .github-heatmap {
    width: 100%;
    /* whatever fits your sidebar */
    /* height: 45px;               zooms into last few months */
    overflow: hidden;
    /* hides old months */
    border-radius: 6px;
}

.github-heatmap img {
    width: 100%;
    /* zoom in horizontally */
    /* transform: translateX(-400px); */
    /* move left to show latest months */
}

@media (max-width: 400) {
    .github-heatmap {
        width: 200px;
        /* whatever fits your sidebar */
        /* height: 45px;               zooms into last few months */
        overflow: hidden;
        /* hides old months */
        border-radius: 6px;
    }

    .github-heatmap img {
        width: 600px;
        /* zoom in horizontally */
        transform: translateX(-400px);
        /* move left to show latest months */
    }
}

.terminal-line {
    margin-top: 12px;
    font-family: inherit;
    font-size: 0.98rem;
    color: rgb(0, 0, 139);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 1.4em;
}

.terminal-line .typed {
    color: rgb(0, 122, 75);
    background: transparent;
    padding: 2px 4px;
    border-radius: 4px;
    display: inline-block;
    white-space: pre;
    overflow: hidden
}

.cursor {
    color: rgb(0, 122, 75);
    font-weight: 800;
    line-height: 1;
    transform: translateY(-2px);
    opacity: 0.95; 
    /* margin-left: -1rem; */
}


@media (prefers-reduced-motion: reduce) {
    .cursor {
        animation:none;
    }
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

.cursor {
    margin-top: 0.2rem;
    animation: blink 0.5s steps(2, start) infinite
}

#summer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}