/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {

    /*======= COLORS =========*/
    --blue-color-darken:    #0c0f14;
    --blue-color:           #171c26;
    --blue-color-light:     hsl(220, 24%, 15%);
    --blue-color-lighten:   hsl(220, 20%, 18%);
    --white-color:          #e5e5ff;
    --sig-blue-light:       #979bff;
    --sig-blue-darken:      #797cca;

    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font:            "Montserrat", sans-serif;
    --normal-font-size:     .938rem;
    --outline-font:         -2px -2px 0 var(--white-color), 2px -2px 0 var(--white-color), -2px  2px 0 var(--white-color), 2px  2px 0 var(--white-color);

    /*========== Font weight ==========*/
    --font-regular:         400;
    --font-semi-bold:       600;
}

/*=============== BASE ===============*/
* {
    box-sizing:             border-box;
    padding:                0;
    margin:                 0;
    -webkit-tap-highlight-color: transparent; /* Disable blue overlay */
    user-select:            none; /* Disable text selection */
    -webkit-user-drag:      none; /* Prevent dragging */
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family:            var(--body-font);
    font-size:              var(--normal-font-size);
    background-color:       var(--body-color);
}

ul {
    list-style:             none;
    /* Color highlighting when pressed on mobile devices */
    /*-webkit-tap-highlight-color: transparent;*/
}

main {
    color:                  var(--white-color);
    min-height:             300vh;
    background-color:       var(--blue-color);
    display:                flex;
    flex-direction:         column;
}

a {
    text-decoration:        none;
}


/*============ NOPE ============*/

.NOPEEE {
    z-index:                10000;
    position:               absolute;
    background-color:       black;
    width:                  100vw;
    height:                 100vh;
    color:                  var(--white-color);
    font-size:              2rem;
    font-weight:            900;
    display:                none;
}

@media screen and (max-width: 222px) {
    .NOPEEE {display:       block;}
}

/*==================== HERO ====================*/

.hero {
    font-family:            var(--body-font);
    display:                flex;
    flex-direction:         row;
    align-items:            center;
    height:                 50vw;
    width:                  100vw;
}

.texts {
    margin-left:            10vw;
}

.desc {
    display:                flex;
    flex-direction:         column;
    align-items:            flex-start;
}

/*-------------- Video and Texts and Desc --------------*/

.pp-video {
    margin:                 4vw 0 0 6vw;
    width:                  30vw;
    border-radius:          50%;
}

.my-name {
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: var(--white-color);
    color: transparent;
    font-family:            Arial, Helvetica, sans-serif;
    font-size:              10rem;
    margin:                 0 0 0 1rem;
    padding:                0;
    opacity:                0;
    animation:              fadeIn 1s ease-in-out forwards;
}

.text-about {
    font-weight:            var(--font-semi-bold);
    font-size:              3rem;
    opacity:                0;
    animation:              fadeIn 1s ease-in-out 0.5s forwards;
}

.text-desc {
    margin:                 1rem 0 0 8rem;
    color:                  var(--sig-blue-darken);
    width:                  31rem;
    opacity:                0;
    animation:              fadeIn 1s ease-in-out 1s forwards;
}

.spacer {
    width: 100%;
    background-repeat:      no-repeat;
    background-position:    center;
    background-size:        cover;
}

.layer1 {
    background-image:       url(../IMAGE/BackCool1.svg);
}

/*============= ANIMATION =============*/

@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }    


/*==================== PHONE ====================*/

@media screen and (max-width: 1114px) {
    .layer1 {
        background: none !important;
    }
    .hero {
        flex-direction:         column;
        align-items:            center;
        height:                 200%;
        text-align:             center;
    }
    .pp-video{
        inset:                  auto;
        top:                    10rem;
        margin:                 7rem 0 0 0;
        width:                  80vw;
    }
    .texts {
        text-align:             center !important;
        margin:                 1rem;
    }
    .my-name {
        -webkit-text-stroke-width: 0.5vw;
        font-size:              28vw;
        margin:                 0;
    }
    .text-about {
        text-align:             center !important;
        font-size:              8.5vw;
        margin-left: auto;
        margin-right: auto;
    }
    .text-desc {
        font-size:              3vw;
        margin:                 0;
        width:                  80vw;
    }
}


/*============= TIMEBAR =============*/

.time-bar {
    height:                 15px;
    position:               fixed;
    bottom:                 0px;
    z-index:                1000;   
    background-color:       var(--sig-blue-light);
    width:                  100%;
    scale:                  0 1;
    transform-origin:       left;

    animation:              scroll-watcher linear;
    animation-timeline:     scroll(y);
}

@keyframes scroll-watcher {
    to { scale: 1 1;}
}