@font-face {
    font-family: "Times Dot Roman";
    src: 
      url("../TimesDot/TimesDotRom.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
  }
  
  /* Italic Style */
  @font-face {
    font-family: "Times Dot Roman";
    src: 
      url("../TimesDot/TimesDot-Italic.otf") format("opentype");
    font-style: italic;
    font-weight: normal;
  }
  
:root {
    --color: rgb(255, 0, 255);
    --background: #ededed;
    --black: #90828e;
  }

  /* width */
::-webkit-scrollbar {
    width: 3px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(255, 255, 255); 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 255, 0.8); 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {

  }

body{
    font-family: "Times Dot Roman", 'Times New Roman', Times, serif;
    margin: 1vw;
    box-sizing: border-box;
    text-shadow: 0px 0px 8px rgba(237, 38, 255, 0.1);
    background-color: var(--background);
    animation: opacity .45s forwards ease-in;
    overflow-x:hidden;

}

.header {
    position: fixed; /* Keep the header fixed */
    top: 0vw; /* Distance from the top of the page */
    left: 50%; /* Start positioning from the center */
    transform: translateX(-50%); /* Shift the header back to center */
    width: 100vw; /* Set the width of the header */
    margin: 0 auto; /* Center alignment */
    display: flex; 
    justify-content: space-between; /* Space between items */
    color: var(--color);
    font-size: 1.3vw;
    text-align: left; /* Ensure text within the header remains left-aligned */
    z-index: 100; /* Ensure header is above other content */
    background: linear-gradient(180deg, rgba(237,237,237,.95) 0%, rgba(237,237,237,.5) 30%, rgba(255, 255, 255, 0) 70%);
    padding-bottom: 4vw;
    /* border-bottom: 1px dotted var(--color); */
}

.details {
    transition: .8s; /* Smooth transition for opacity and blur */
}

.title {
    font-size: 1.3vw;
    box-sizing: border-box;
    margin: 0;
    margin-bottom: 1vw;
    margin-left: -.5vw;
    /* border: 1px dotted var(--color); */
    /* background-color: var(--color); */
    border-radius: 20vw;
    color: var(--background);
    display: inline-block; /* Inline-block keeps the width only as large as the text content */
    width: auto; /* Ensures width is based on content */
    /* opacity: 0; 
    transition: opacity 0.25s ease-in-out;
    transition-delay: .35s; */
    -webkit-box-shadow: 0px 0px 8px 0px rgba(255,0,255,0.1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(255,0,255,0.1);
    box-shadow: 0px 0px 8px 0px rgba(255,0,255,0.1);
    border-radius: 20vw;
    padding: .5vw .7vw;
    padding-top: .7vw;
    transition: .3s;
    background: var(--background);
    background: linear-gradient(180deg, rgba(237,237,237,1) 0%, rgba(255,0,255,1) 40%, rgba(255,0,255,1) 60%, rgba(237,237,237,1) 100%);
}

.title a{
    color: var(--background);
}

.subtitle{
    font-size: 1.1vw;  
    opacity: .8;
    display: block;
    font-style:italic;
    margin-top:-.25vw;
    padding: 0vw;
}


#top-header{
    opacity: 0;
    transition: .25s;
}

.time{
    font-size: 1.1vw;
    margin-top:.75vw;
    margin-bottom: 3vw;
    color: var(--black);
}

.header a:hover{
    /* font-family: 'Times Dot Roman Italic', Times, serif; */
    filter: blur(4px);
    color: var(--color);
}

.blur-and-hide {
    filter: blur(6px); /* Apply blur effect */
    opacity: 0; /* Hide the element */
}


.bio, .info, .archive {
    text-align: left; /* Specifically ensure each item is left-aligned */
    padding: 1.5vw;
    padding-bottom: 0vw;;
}


/* .name,.info,.archive{
    position: fixed;
} */

.bio{
    width: 65%;
    /* border: 1px dotted var(--color); */
    border-radius: 50%;
    /* padding: 2vw 2vw 2vw 2vw; */
}
  
a{
    color: var(--color);
    text-decoration: none;
    transition: .2s;
}
.info > a{
    font-family: 'Times Dot Roman', Times, serif;
    /* font-style: italic; */
    /* text-decoration: underline; */
}

.loc{
    opacity: .75;
}


.grid-container {
    display: flex;
    gap: 1vw; /* Space between the columns */
    width: 98vw;
    margin-top: 9vw;
    margin-bottom: 5vw;
}

.grid-column {
    display: flex;
    flex-direction: column; /* Stack items vertically within each column */
    gap: 2vw; /* Space between items in each column */
    flex: 1; /* Ensure all columns have equal width */
}

.grid-item {
    width: auto; /* Use full width within the column */
    justify-content: center;
    height: auto;
    position: relative;
    padding: 0;
    margin: 1vw;
    transition: .7s;
    color: var(--color);
    font-size: 1.1vw;
}

/* Initially hide the images */
.grid-item img {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

/* Reveal images when the 'visible' class is added */
.grid-item img.visible {
    opacity: 1;
}


p {
    text-indent: 0; /* No indentation by default */
    margin: 0; 
    padding: 0; 
    font-size: 1.1vw;
    color: var(--black);
}

p > a{
    text-decoration: none;
}

p:not(:first-of-type) {
    /* text-indent: 2.6vw;  */
}
.grid-container > a{
  /* cursor: alias!important;   */
}
.anchor{  
    font-size: 1.1vw;
    margin-bottom: 1vw;
    /* cursor: alias; */
    border: 1px dotted var(--color);
    display: inline-block; 
    width: auto;
    border-radius: 20vw;
    padding: .25vw .5vw;
    transition: .3s;
    /* text-decoration: underline; */
}

.anchor:hover{
    /* filter: blur(4px);
    color: var(--color); */
    /* cursor: alias!important; */
}

p>a{
    /* cursor: alias; */
}

.anchor a{
    cursor: alias;
}

.grid-column:nth-child(2){
    display: flex; /* Use flex on the column to center its content */
    align-items: center; /* Centers content vertically within the column */
}

.border{
    border-radius: .3vw;;
    border: 1px dotted var(--color); 
    box-sizing: border-box;
}

#cover1, #cover4 {
    transform: rotate(180deg); /* Rotate specific images */
}

.skill-text{
    transition: .25s;
    /* font-family: 'Times Dot Roman Italic', Times, serif;; */
    }

    .blur {
        filter: blur(4px);
      }
      
.copyright{
    color: var(--black);
    margin: .6vw;
    margin-bottom: 3vw;
    text-align: center;
    font-size: 1.1vw;
    animation: stack2 3s forwards ease-in;
}

.footer{
    width: 100vw;
    height: 4vw;
    display: block;
    position: fixed;
    background: rgb(78, 78, 78);
    background: linear-gradient(180deg, rgba(200,200,200,0) 0%, rgba(237, 237, 237, .8) 95%, rgba(237,237,237,1) 100%);
    bottom:0;
    left: 0;
    transition: .25s;
    pointer-events: none;
    }
    
    .information{
        position: fixed;
        width: 23vw;
        /* animation: stack2 .1s forwards ease-in; */
    }
    


    .subinfo{
    position: relative;
}

    .projpoints {
        width:  .65vw;
        height: .65vw;
        background-color: var(--color);
        transition: .3s;
        border-radius: 50%;
        filter: blur(2px);
        pointer-events: none;
        animation: opacityblur forwards .75s ease-in;
        }
        
    .full{
        width: 69.5vw;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        margin-bottom: 1.25vw;
        /* border-radius: .3vw; */
        animation: stack 1.25s forwards ease-in;
    }

    .first img{
        background-color: #90828e;
    }


    .full img{
        width: 100%;
        border-radius: .3vw;
    }
        
    .full video{
        width: 100%;
        border-radius: .3vw;
    }
        
    .third, .two{
        display: flex;
        justify-content: space-between;
    }

    .third img{
        width: 32%!important;
    }

    .two {
        display: inline-flex; /* Layout the images in a row */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100%; /* Full width of the grid item */
        align-items: flex-start; /* Align items to the top */
    }
    
    .two img {
        width: 49.1%; /* Each image takes half the width of the .two div */
        height: auto; /* Maintain aspect ratio */
        margin: 0; /* Remove any margin */
        padding: 0; /* Remove any padding */
        border: none; /* Ensure no borders add space */
    }

    .two video{
        width: 49.1%; /* Each image takes half the width of the .two div */
        height: auto; /* Maintain aspect ratio */
        margin: 0; /* Remove any margin */
        padding: 0; /* Remove any padding */
        border: none; /* Ensure no borders add space */
        border-radius: .3vw;
    }

/* Video sound container */
.video-sound-container {
    position: relative;
    width: 49.1%;
    cursor: pointer;
}

.video-sound-container video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: .3vw;
}

/* Sound label overlay */
.sound-label {
    position: absolute;
    top: 1vw;
    right: 1vw;
    background-color: var(--black);
    color: var(--color);
    padding: 0.3vw 0.5vw;
    padding-top: 0.5vw;
    border-radius: 20vw;
    font-size: 0.9vw;
    pointer-events: none;
    transition: opacity 0.3s ease;
    background: linear-gradient(180deg, rgba(255,0,255,1) 0%, rgba(237,237,237,1) 35%, rgba(237,237,237,1) 65%, rgba(255,0,255,1) 100%);
}

/* Hover effect for container */
.video-sound-container:hover .sound-label {
    opacity: 0;
}


    @keyframes stack{
        from {
            opacity: 0;
            filter: blur(5px);
        } to{
            opacity: 1;
            filter: blur(0px);
        }
    }


    @keyframes stack2{
        from {
            opacity: 0;
        } to{
            opacity: 1;
        }
    }

    @keyframes stack3{
        from {
            height: 0vh;
            opacity: 0;
        } to{
            opacity: 1;
            height: 100vh;
        }
    }

    @keyframes opacityblur {
        from {
          filter: blur(4px);
          opacity: 0;
        }
        to {
          filter: default;
          opacity: 1;
        }
        }
        
@keyframes opacity {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

@media only screen and (max-width: 1400px){
    .header{
        font-size: 1.8vw;
    }
}

@media only screen and (max-width: 1000px) {
    .header{
        width: 95vw;
        padding-top: 2vw;
        font-size: 2vw;
    }

    .bio{
        width: 75%;
    }

    .grid-container {
        display: block; /* Stack columns vertically */
        width: 95vw;
        margin: 16vw auto 8vw; /* Center the grid vertically */
    }
    
    .grid-column {
        display: block; /* Stack items one below the other */
        width: 100%;
    }
    
    .grid-item {
        display: block;
        justify-content: center; 
        width: 95vw; /* Ensure grid items are full width */
        margin-bottom: 5vw;
        margin-top: 5vw;
    }

      .hover{
        width: 100%;
      }

      .circle{
        padding: 2.25vw;
        padding-top: 2.6vw;
      }

      .text{
        font-size:2vw;
      }

      .skill, .copyright{
        font-size: 1.5vw;
      }
      .footer{
        height: 10vh;
      } 
      .information{
        position: relative;
        width: 90vw;
      }
      
      .title{
        font-size:3vw;
        padding: 1.8vw 2vw;
        padding-top: 2vw;
        margin-left: -1.3vw;
        width: 100%;
      }
      
      .subtitle, .time, .anchor, p{
        font-size: 2vw;
      }

      p{
        line-height: 1.25;
      }

      .anchor{  
        margin-top: 4vw;
        margin-bottom: 3vw;
        padding: .75vw 1vw;
    }

    .full{
        width: 93vw;
    }

    .scroll{
        margin-top: 0vw;
    }

    .full{
        margin-bottom: 2vw;
    }

        .video-sound-container {
        width: 49.1%;
    }
    
    .sound-label {
        font-size: 1.5vw;
        padding: 0.6vw 1vw;
        padding-top: 0.75vw;
        top: 1.5vw;
        right: 1.5vw;
    }
    
}
  

@media only screen and (max-width: 490px){
    .full{
        animation: stack2 1.25s forwards ease-in;
    }

    ::-webkit-scrollbar {
        display: none;
      }

    .header {
        font-size: 6.5vw;
        display: block; /* Switch to block layout */
        text-align: center; /* Center the text if desired */
        padding-top: 5vw;
        width: 90vw;
        z-index: -1000;
        line-height: 1.05;
    }


    #top-header{
        width: 100vw;
        height: 10vh;
        display: block;
        position: fixed;
        background: rgb(78, 78, 78);
        background: linear-gradient(0deg, rgba(200,200,200,0) 0%, rgba(237, 237, 237, .8) 80%, rgba(237,237,237,1) 100%);
        top:0;
        left: 0;
        transition: .25s;
        pointer-events: none;
        z-index: 1000;
    }

    .bio, .info, .archive {
        display: block; /* Ensure these elements are stacked vertically */
        width: 100%; /* Full width */
        padding-top: 1vw;
        padding-bottom: 1vw;
    }

    .sub{
        display: none;
    }
    .grid-container{
        margin: 45vw auto 8vw;
        width: 90vw;
        background-color: var(--background);
    }

    .grid-item {
        display: block;
        justify-content: center; 
        width: 90vw; /* Ensure grid items are full width */
        margin-bottom: 9vw;
        margin-top: 9vw;
    }
    
    .link{
        color: var(--black);
        font-style: italic;
    }

      .circle{
        padding: 5vw;
        padding-top: 6vw;
      }

      .text{
        font-size:4vw;
      }

      .skill, .copyright{
        font-size: 3vw;
      }
      
      .copyright{
        padding-bottom: 7vw;
      }

      .footer{
        height: 15vh;
        background: linear-gradient(180deg, rgba(200,200,200,0) 0%, rgba(237, 237, 237, .8) 80%, rgba(237,237,237,1) 100%);
      }

      .information{
        position: relative;
        width: 90vw;
      }
      
      .title{
        font-size: 6.5vw;
        padding: 4.5vw 4vw;
        padding-top: 6vw;
        margin-left: -2.5vw;
        width: 87.75vw;
      }
      
      .subtitle, .time, .anchor, p{
        font-size: 4vw;
      }

      p{
        line-height: 1.25;
      }

      .anchor{  
        margin-top: 4vw;
        margin-bottom: 3vw;
        padding: .75vw 1vw;
    }

    .full{
        width: 90vw;
    }

    .scroll{
        margin-top: 0vw;
    }



    .twoo img{
        width: auto!important;
        height:37.25vw;
    }

    .twoo2 img{
        width: auto!important;
        height:29.35vw;
    }

    .full{
        margin-bottom: 2vw;
    }

    .archive{
        display:none;
    }

}