/*INITIAL SETUP*/
/*INITIAL SETUP*/
@font-face {
    font-family: "Whyte Regular";
    font-weight: 300;
    src: url(../../fonts/ABCWhyteSemi-Mono-Regular-Trial.otf) format("opentype")
}

@font-face {
    font-family: "Denim";
    font-weight: normal;
    font-style: normal;
    src: url(../../fonts/Denim-TRIAL-Regular.otf) format('opentype');
}

:root {
    --color: #be19db;
    --background: #000000;
    --black: #90828e;
}

/* width */
::-webkit-scrollbar {
    width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(0, 0, 0);
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #be19db;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #be19db;
}

body {
    font-family: "Denim";
    margin: 1vw 1vw 0 1vw;
    padding-bottom: 50px;
    box-sizing: border-box;
    text-shadow: 0px 0px 8px rgba(237, 38, 255, 0.1);
    background-color: var(--background);
    animation: opacity .5s forwards ease-in;
    scroll-behavior: smooth;
}

.phone {
    display: none;
    margin: 0 auto;
    width: 80vw;
    text-align: center;
    justify-content: center;
    font-size: 8vw;
    color: var(--color);
}

.header {
  position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    display: flex;
    justify-content: space-between;
    color: var(--black);
    font-size: 1vw;
    text-align: left;
    align-items: flex-start;
    z-index: 100;
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 100%);
    padding-top: 1.5vw;
    padding-bottom: 2.5vw;
    box-sizing: border-box;
}

.header-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

#record-icon {
    display: block;
    width: 12px;
    height: 12px;
    background-color: #be19db;
    border-radius: 50%;
    flex-shrink: 0;
    animation: blink 4s ease infinite;
    margin-top: 5px;
    margin-left: 23px;
    position: relative;
}

.tooltip {
    position: absolute;
    background-color: #ffffff97;
    border-radius: 5px;
    color: #000000;
    padding: 5px 10px;
    text-align: left;
    z-index: 1000;
    visibility: hidden;
    width: auto;
    max-width: 200px;
    backdrop-filter: blur(5px);
}

@keyframes blink {
    0%   { opacity: 1; }
    40%  { opacity: 0.2; }
    80%  { opacity: 1; }
    100% { opacity: 1; }
}

.details, .sub {
    transition: .8s;
}

.blur-and-hide {
    filter: blur(6px);
    opacity: 0;
}

.bio {
    padding: 0;
    text-align: left;
    font-size: 1vw;
    line-height: 1.3;
    color: var(--black);
    font-size: 10pt;
}

.info, .archive {
    text-align: left;
    padding-bottom: 0;
    padding-right: 1.5vw;
}

.header-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 3vw;
    padding-right: 0.5vw;
}

.header-right a {
    color: var(--black);
    text-decoration: none;
    transition: .2s;
}

.header-right a:hover {
    filter: blur(4px);
}

.name {
    display: block;
    width: 22ch;
    color:#be19db ;
}

.name:hover {
    filter: blur(4px);
    color: var(--color);
}

.details {
    display: block;
    width: 22ch;
    transition: .8s;
}

.skill-text {
    display: block;
    width: 22ch;
    margin-top: 0.1em;
    color: rgba(255, 255, 255, 0.738);
}

a {
    color: var(--color);
    text-decoration: none;
    transition: .2s;
}

.header a:hover {
    font-family: "Denim";
    filter: blur(4px);
    color: var(--color);
}

.title {
    font-size: 1.3vw;
    margin: 0;
    margin-left: -.5vw;
    color: #ffffffc9;
    display: inline-block; /* Inline-block keeps the width only as large as the text content */
    width: auto; /* Ensures width is based on content */
    padding: .5vw;
    transition: .3s;
    font-family: "Denim" ;

}

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

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


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

.time{
    text-indent: 0; /* No indentation by default */
    padding: 0; 
    font-size: 1.1vw;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10pt;
    line-height: 1.30;
    margin-top:.75vw;
    margin-bottom: 1vw;
}

.loc{
    opacity: .75;
}

.container {
    width: 100%;
    max-width: none;
    margin: 0;
}

.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: 1;
    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);
    font-size: 10pt;
    line-height: 1.30;
}

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;; */
    }

      
.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(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 95%, rgb(0, 0, 0) 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: #000000;
    }


    .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: 1vw;
    }
}

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

    .bio{
        width: 15%;
        font-size: 2vw;
    }

    .sub {
        width: 55%
    }

    .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;
        overflow: visible;
    }

    .full {
    width: 100%;
}


      .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:2vw;
        padding-top: 2vw;
        width: 100%;
      }
      
      .subtitle, .time, .anchor, p{
        font-size: 1.7vw;
      }

      p{
        line-height: 1.25;
        font-size: 1.7vw;
      }

      .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: 800px) {
    .header{
        font-size: 2.5vw;
    }

    .bio {
        font-size: 2.5vw;
    }
    .sub{
        display: none;
    }

    .subtitle, .time, .title, .anchor, p{
        font-size: 3vw;
    }

}

@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;
    }

}