style.css

/*
#####################################################################################################################
#####################################################################################################################
################################################### Fonts ###########################################################
#####################################################################################################################
#####################################################################################################################
*/


@font-face {
  font-family: 'Ailerons';
  src: URL('Fonts/Ailerons/Ailerons-Regular.otf') format('truetype');
}
@font-face {
  font-family: 'Ailerons2';
  src: URL('../Yngchch.github.io/Fonts/Ailerons/Ailerons-Regular.otf') format('truetype');
}    

@font-face {
  font-family: 'goodTimes';
  src: URL('Fonts/good-times/goodTimes.otf') format('truetype');
}  
@font-face {
  font-family: 'moon';
  src: URL('Fonts/Moon/MOON\ 2.0\ FREE/Moon2.0-Regular.otf') format('truetype');
}  
@font-face {
  font-family: 'nidusSans';
  src: URL('Fonts/nidus_sans/nidus_sans/nidsans-webfont.ttf') format('truetype');
}  
@font-face {
  font-family: 'Stellar';
  src: URL('Fonts/PPStellar-Free_for_personal_use_v1.7/PPStellar-Free\ for\ personal\ use\ v1.7/PPStellar-Light.otf') format('truetype');
} 
@font-face {
  font-family: 'Stellar2';
  src: URL('../Yngchch.github.io/Fonts/PPStellar-Free_for_personal_use_v1.7/PPStellar-Free\ for\ personal\ use\ v1.7/PPStellar-Light.otf') format('truetype');
} 
@font-face {
  font-family: 'Calibre';
  src: URL('Fonts/Calibre/CalibreSuperCondensed-Regular.otf') format('truetype');
} 


/*
#####################################################################################################################
#####################################################################################################################
############################################### Stars Background ####################################################
#####################################################################################################################
#####################################################################################################################
*/
@keyframes move-background {
  from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
  }
  @-webkit-keyframes move-background {
  from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
  }

  @-moz-keyframes move-background {    
    from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
  }

    @-webkit-keyframes move-background {
    from {
      -webkit-transform: translate3d(0px, 0px, 0px);
    }
    to { 
      -webkit-transform: translate3d(1000px, 0px, 0px);
    }
  }

  .background-container{
    width: 100%;
    position: fixed;
    top: 0;
    left:0;
    bottom: 0;
    right: 0;
    z-index: 0;
  }

  .stars {
  background: black url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png") repeat;
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    z-index: 0;
  }

  .twinkling{
    width:10000px;
    height: 100%;
    background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
    background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    -moz-animation:move-background 40s linear infinite;
    -ms-animation:move-background 40s linear infinite;
    -o-animation:move-background 40s linear infinite;
    -webkit-animation:move-background 40s linear infinite;
    animation:move-background 40s linear infinite;	
  }

/*
#####################################################################################################################
#####################################################################################################################
################################################# Bar Animation #####################################################
#####################################################################################################################
#####################################################################################################################
*/

.vertBarWrap{
  min-height: 100%; 
  margin-bottom: 10vh; /* needs to be the same as the margin bottom for about me and experience */
}

.horizontal_bar{
  display: inline-flex;
  width:  100%;
  height: 1px;
  background-color: white;
  position: relative;
  z-index: 4;
  opacity: 0;
  /* border: 2.5px solid #FF1EAD; */
  border-radius: 14px;
}

.horizontal_expansion{
  animation: horizontal_bar 2s ease-in-out ;
  animation-fill-mode: forwards;
}

@keyframes horizontal_bar {
  0%,5%{ width: 0px; opacity: 0;}
  90%,100%{ width: 100%; opacity: 1;}
}



  .vertical_bar{
    display: inline-flex;
    width: 2px;
    height: 100%;
    background-color: white;
    position: relative;
    z-index: 4;
    /* border: 2.5px solid #FF1EAD; */
    border-radius: 14px;
    box-shadow:
      0 0 2px rgba(0, 0, 0, .75),
      inset 0 0 2px rgba(0, 0, 0, .45);
  
  }

  .vertical_expansion{
    animation: vertical_bar 2s ease-in-out ;
    animation-fill-mode: forwards;
  }

  @keyframes vertical_bar {
    0%,5%{ height: 1px; opacity: 0.5;}
    90%,100%{ height: 100%; opacity: 1;}
  }

/*
#####################################################################################################################
#####################################################################################################################
############################################### Buttons Animation ###################################################
#####################################################################################################################
#####################################################################################################################
*/
.button_text{
  --c: #FFF; /* the color  */
  --h: 1.2em;   /* the height */
  
  line-height: var(--h);
  background: 
    linear-gradient(var(--c) 0 0) no-repeat 
    calc(202% - var(--_p,0%)) 100%/200% var(--_p,.08em);
  color: #0000;
  overflow: hidden;
  text-shadow: 
    0 calc(-1*var(--_t,0em)) var(--c),     /* text-shadow | offset-x | offset-y | color */
    0 calc(var(--h) - var(--_t,0em)) #050E16;
  transition: .3s var(--_s,0s), background-position .3s calc(.2s - var(--_s,0s));
}
.button_text:hover {
  --_t: var(--h);
  --_p: 100%;
  --_s: .3s
}


.hover-2 {
  /* the height */
  --h: 1.2em;

  line-height: var(--h);
  background: 
    linear-gradient(#1095c1 0 0) 
    bottom/100% calc(100% - var(--_i, 1) * 100%) no-repeat;
  color: #0000;
  overflow: hidden;
  text-shadow: 
    0 var(--_i, var(--h)) #fff,
    0 0 rgb(0 0 0 / calc(var(--_i, 1) * 100%) );
  transition: 0.3s;
}
.hover-2:hover {
  --_i: 0;
}


/*
#####################################################################################################################
#####################################################################################################################
############################################### Fade-in Animation ###################################################
#####################################################################################################################
#####################################################################################################################
*/
@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 0.95;
    }
}

.flyIn{
  /* fade in animation */
  animation: flyIn 6s ease-out;
  animation-fill-mode: forwards;
}

@keyframes flyIn{
  0%{
    letter-spacing: 2.2vw;
    opacity: 0;
  }
  30%, 100%{
    letter-spacing: 0.5vw;
    opacity: 1;
  }
}
@keyframes noFlyIn{
  0%{
    letter-spacing: 0.5vw;
    opacity: 1;
  }
  30%, 100%{
    letter-spacing: 0.5vw;
    opacity: 1;
  }
}

/*
#####################################################################################################################
#####################################################################################################################
################################################ Border Animation ###################################################
#####################################################################################################################
#####################################################################################################################
*/
.btn {
  width: 400px;
  min-height: 400px;
  color: white;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 25px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  transition: 0.5s;
}

.btn::before, .btn::after {
  position: absolute;
  background: black;
  z-index: 6;
  transition: 0.5s;
  content: '';
}

.btn::before {
  height: 110%;
  width: 99%;
}

.btn::after {
  width: 110%;
  height: 99%;
}

.noselect {
  position: relative;
  z-index: 7;
  opacity: 0.8;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.noselect:hover{
  transition: 0.5s;
  opacity: 1;
}

.btn:hover::before {
  width: 0px;
  background: black;
}

.btn:hover::after {
  height: 0px;
  background: black;
}

.btn:hover {
  background: black;
}


/*
#####################################################################################################################
#####################################################################################################################
#################################################### Socials Bar ####################################################
#####################################################################################################################
#####################################################################################################################
*/

.socials{
  text-align: center;
  padding-left: 12%;
  padding-right: 12%;
  position: relative;
  z-index: 6;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-around;
  background-image: linear-gradient(to bottom, rgba(225, 0, 255, 0), #89009b49);
}

/*
#####################################################################################################################
#####################################################################################################################
################################################### Buttons & Links #################################################
#####################################################################################################################
#####################################################################################################################
*/


.buttonWrap{
  width: auto;
  height: auto;
  max-height: 15vh;
}

.link{
  border-left: 5px;
  text-decoration: none;
}

.in_text_link{
  color: white;
  text-decoration: underline;
}
/*
#####################################################################################################################
#####################################################################################################################
############################################## Project-related Wrappers #############################################
#####################################################################################################################
#####################################################################################################################
*/


#projectsWrap{
  padding-left: 3%;
  padding-right: 3%;
  padding-bottom: 5%;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-around;
  position: relative;
  z-index: 5;
}
#projectWrap{
  padding-top: 50px;
  padding-left: 30px;
  padding-right: 30px;
  min-height: 550px;
}
#project{
  width: 400px;
  padding-top: 15px;
  padding-bottom: 35px;
    border-radius: 40px;
  background-color: #000000;
  justify-content: center;
  /*box-shadow: 0 0 3pt 2pt #3CB4D2;*/
}
#iconWrap{
  width: 100%;
  height: 90px;
  padding-top: 10px;
  display: flex;
  justify-content: center;
}

/*
#####################################################################################################################
#####################################################################################################################
############################################### in-text link animation ##############################################
#####################################################################################################################
#####################################################################################################################
*/

.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #fb7500 0%,
    #ff1242 20%,
    #bc00d4 50%,
    #ff1242 80%,
    #fb7500 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size: 3vh;
  font-weight:bolder;
  text-decoration: underline;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}


/*
#####################################################################################################################
#####################################################################################################################
################################################ image text on hover ################################################
#####################################################################################################################
#####################################################################################################################
*/

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-family: 'Stellar';
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}