body{
  background-color: rgba(0,0,0,0.7);
  display:flex; flex-direction: column;
  align-items: center;
  font-family: sans-serif; color: white;gap:20px
}

h1{
  font-size: 7em;
  text-align: center;
  animation: fade 2s linear;
}

u{font-size: 2.5em}

.mainCTA{font-size: 2.5em; font-weight: lighter; text-align: center;
width: 70vw; height:10vh}

h2{font-size:4em; font-weight: bold; text-align: center; padding-bottom: 20px;}

#cont{
  display:flex; flex-direction: column;
  align-items: center; justify-content: center;

}

.fade{animation: fadeReg 2s linear}
.slide{display: flex; flex-direction: column; align-items: center;}
@keyframes fade {
  0%{opacity: 0%}
  50%{opacity: 10%}
  75%{opacity: 30%}
  100%{opacity: 100%}
}

@keyframes fadeReg {
  from{opacity: 0%}
  to{opacity: 100%}
}

.type{font-size: 2.5em; font-weight: lighter; text-align: center;
width: 70vw; height:10vh}

#links{position: absolute;  animation: fade 2s linear;
top:100%; left:50%; transform: translate(-50%,-100%); display: flex; flex-direction: column;align-items: center; padding-bottom: 30px}


#continua{  animation: fade 2s linear;}
#skip{  animation: fade 2s linear;}
button{
  padding-left: 25px;padding-right: 25px;
  height: 2em;
  margin-top: 10px;
  color: white; font-size: 0.85em; font-weight: bold;
  background-color: rgba(0,0,0,0.0); border-radius: 50px;
  border-color: rgb(225,225,225); border-width: 2px; border-style: solid;
}

button.external{

  padding-left: 25px;padding-right: 25px;
  height: 2em;
  margin-top: 10px;
  color: white; font-size: 0.85em; font-weight: bold;
  background-color: rgba(0,0,0,0.3); border-radius: 50px;
  border-color: rgb(225,225,225); border-width: 2px; border-style: solid;
}

button:hover{
  padding-left: 25px;padding-right: 25px;
  height: 2em;
  margin-top: 10px;
  color: rgb(245,245,245); font-size: 0.85em; font-weight: bold;
  background-color: rgba(0,0,0,0.5); border-radius: 50px;
  border-color: white; border: 2px solid;
}

button:active{

  padding-left: 25px;padding-right: 25px;
  height: 2em;
  margin-top: 10px;
  color: rgb(245,245,245); font-size: 0.85em; font-weight: bold;
  background-color: rgba(0,0,0,0.5); border-radius: 50px;
  border-color: white; border: 2px solid;
}

.imgBox{
  gap:20px;
  display: flex; flex-direction: column;
  align-items: center;
  object-fit: contain;
  width: 45vh;
  border-radius: 30px}

  .imgBox img{border-radius:40px}


  .imgContainer{
    width:200%;
    overflow-x:  scroll;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    z-index: 10;
    height: auto;
    gap:40px
  }

  #about{
    font-size: 2em;
    width: 80vw;
    display: flex;
    flex-direction: column;
    gap:10px;
    justify-content: center;
    overflow: scroll;
  }


#myvideo{width:720px; height:1264px; background-color: black; border-radius: 40px;object-fit: cover;}







.animator{height:30vh; display: flex; flex-direction: column;
justify-content: flex-end; padding-bottom: 30px}


#globe1{animation: globe 12s infinite;
transform-origin: 50% 90%}

@keyframes globe { 0%{transform: scale(0%,0%)}
              10%{transform: scale(120%,120%)}
              15%{transform: scale(100%,100%)}


              90%{transform: scale(100%,100%)}
              95%{transform: scale(105%,105%)}

              100%{transform: scale(0%,0%)}
}

#chat2{animation: chat2 4s infinite;
  transform-origin: 100% 50%}

  @keyframes chat2 {
    0%{transform: translate(50%,-50%) scale(0,0)}
      25%{transform: translate(0%,-30%) scale(1,1)}

        60%{transform: translate(400%,-80%) scale(1,1)}

          75%{transform: translate(50%,-50%) scale(0,0)}
          100%{transform: translate(50%,-50%) scale(0,0)}
  }


  #chat1{animation: chat1 3s infinite;
    transform-origin: 0% 50%}


    @keyframes chat1 {
      0%{transform: translate(-100%,0%) scale(0,0)}

          60%{transform: translate(30%,-10%) scale(1,1)}

            100%{transform: translate(-100%,0%) scale(0,0)}
    }

    #chat22{animation: chat22 3s infinite;
      transform-origin: 100% 50%}


      @keyframes chat22 {
        0%{transform: translate(200%,-150%) scale(0,0)}

            60%{transform: translate(100%,-150%) scale(1,1)}

            80%{transform: translate(100%,-130%) scale(1,1)}

              100%{transform: translate(200%,-50%) scale(0,0)}
      }

      #chat11{animation: chat11 4s infinite;
        transform-origin: 0% 50%}


        @keyframes chat11 {
          0%{transform: translate(-200%,-150%) scale(0,0)}

              50%{transform: translate(-100%,-250%) scale(1,1)}

              75%{transform: translate(-50%,-150%) scale(1,1)}

            100%{transform: translate(-300%,50%) scale(0,0)}


        }


        #chat23{animation: chat223 12s infinite;
          transform-origin: 100% 50%}


          @keyframes chat223 {
            0%{transform: translate(250%,0%) scale(0,0)}

              20%{transform: translate(250%,0%) scale(0,0)}

                30%{transform: translate(200%,0%) scale(1,1)}

                  35%{transform: translate(450%,0%) scale(0,0)}


                    100%{transform: translate(250%,0%) scale(0,0)}


          }



  #lock{background-image: url("./imgs/lockC.png");
  width:192px; height:192px; transform-origin: 50% 100%;
  animation:open 4s infinite }

  @keyframes open {
    0%{transform:  scale(0%,0%);background-image: url("./imgs/lockC.png"); opacity: 1}
      20%{transform:scale(120%,120%);background-image: url("./imgs/lockC.png"); opacity: 1}
        25%{transform: scale(100%,100%);background-image: url("./imgs/lockC.png"); opacity: 1}

          30%{transform:  scale(100%,100%);background-image: url("./imgs/lockC.png"); opacity: 1}
          40%{transform: scale(100%,100%); background-image: url("./imgs/lockC.png"); opacity: 1}
          45%{transform: scale(100%,100%); background-image: url("./imgs/lockO.png"); opacity: 1}


          60%{transform: scale(0%,0%); background-image: url("./imgs/lockO.png"); opacity: 0.5}

                            100%{transform:scale(0%,0%); background-image: url("./imgs/lockC.png"); opacity: 1}
  }

  .permission{
    animation: permission 4s infinite; display: flex
  }

@keyframes permission {

  0%{opacity: 0.3; transform: translate(0px,0px) scale(50%,50%); gap:50px}
    40%{opacity: 0.3; transform: translate(0px,0px) scale(50%,50%);gap:50px}
    45%{opacity: 0.3; transform: translate(0px,0px) scale(50%,50%);gap:50px}


        60%{opacity: 1; transform: translate(0px,-60px) scale(125%,125%);gap:150px}

            65%{opacity: 1; transform: translate(0px,-60px) scale(120%,120%);gap:150px}

            90%{opacity: 1; transform: translate(0px,-60px) scale(120%,120%);gap:150px}
            100%{opacity: 0; transform: translate(0px,-60px) scale(50%,50%);gap:50px}

}


#user{transform: scale(200%,200%); animation: user 4s infinite}
@keyframes user {

    0%{transform: scale(0%,0%);}
    5%{transform: scale(210%,210%);}
    10%{transform: scale(200%,200%);}
  75%{transform: scale(200%,200%);}
    80%{transform: scale(210%,210%);}
        100%{transform: scale(0%,0%);}
}

#globe2{animation: globe2 4s infinite}
@keyframes globe2 {
  0%{transform: scale(0%,0%);}
  10%{transform: scale(120%,120%);}
  15%{transform: scale(100%,100%);}
  75%{transform: scale(100%,100%);}
    80%{transform: scale(120%,120%);}
        100%{transform: scale(0%,0%);}
}

#message{animation: message 4s infinite}
@keyframes message {
  0%{transform: translate(0,-30px) scale(0,0)}
  25%{transform: translate(0,-30px) scale(100%,100%)}
  50%{transform: translate(110px,-30px) scale(100%,100%); opacity: 1}
  75%{transform: translate(110px,-30px) scale(100%,100%); opacity: 0}
  100%{transform: translate(0,-30px) scale(0,0); opacity: 0}
}


#message2{animation: message2 4s infinite; transform-origin: 0% 50%;}
@keyframes message2 {
  0%{transform: translate(0px,-150%) scale(0,0);}
  30%{transform: translate(0px,-150%) scale(0,0);}
    50%{transform: translate(0px,-150%) scale(1,1);opacity: 1}
        60%{transform: translate(0px,-150%) scale(1,1);opacity: 1}
     90%{transform: translate(0px,-150%) scale(1,1);opacity: 0}
      100%{transform: translate(0px,-150%) scale(1,1);opacity: 0}
}


#message3{animation: message3 4s infinite; transform: translate(-80%,-40%);}
@keyframes message3{
  0%{transform:translate(-80%,-40%) scale(0,0);}
  40%{transform: translate(-80%,-40%) scale(0,0);}
    60%{transform: translate(-80%,-40%)scale(1,1);opacity: 1}
        70%{transform: translate(-80%,-40%)scale(1,1);opacity: 1}
      100%{transform: translate(-80%,-40%) scale(1,1);opacity: 0}
}

#tree{ animation: tree 12s infinite; }

@keyframes tree {
  0%{transform: translate(-10px,0px)scale(0%,0%); opacity:0}
    15%{transform: translate(-10px,0px)scale(120%,120%);opacity:1}
        20%{transform:translate(-10px,0px) scale(100%,100%);opacity:1}
          90%{transform: translate(-10px,0px)scale(100%,100%);opacity:1}
            95%{transform: translate(-10px,0px)scale(100%,100%);opacity:1}
           100%{transform: translate(-10px,0px)scale(0%,0%);opacity:0}
}


#message5{animation: mess5 12s infinite;
  transform-origin: 0% 100%;transform: translate(-25px,-150%) scale(150%, 150%); }

@keyframes mess5 {
  0%{transform: translate(-150px,-150%)scale(0%,0%); opacity:0}
    15%{transform:translate(0px,-160%) scale(150%,150%);opacity:1}
        20%{transform:translate(-25px,-150%) scale(150%,150%);opacity:1}

          25%{transform:translate(-25px,-150%) scale(150%,150%);opacity:1}
          30%{transform:translate(-25px,-170%) scale(170%,170%);opacity:1}
          40%{transform:translate(-25px,-170%) scale(170%,170%);opacity:1}
          45%{transform:translate(-25px,-150%) scale(150%,150%);opacity:1}

          50%{transform:translate(-25px,-150%) scale(150%,150%);opacity:1}
          55%{transform:translate(-25px,-170%) scale(170%,170%);opacity:1}
          65%{transform:translate(-25px,-170%) scale(170%,170%);opacity:1}
          70%{transform:translate(-25px,-150%) scale(150%,150%);opacity:1}


          75%{transform:translate(-25px,-150%) scale(150%,150%);opacity:1}
          80%{transform:translate(-25px,-170%) scale(170%,170%);opacity:1}
          90%{transform:translate(-25px,-170%) scale(170%,170%);opacity:1}
            95%{transform: translate(-25px,-150%)scale(150%,150%); opacity:1}

                            100%{transform: translate(-150px,-150%)scale(0%,0%); opacity:0}

}


#face1{transform: translate(100%,-50%); animation: enter 12s infinite;
  width:120px;height:120px; object-fit: cover;background-repeat: round;}

@keyframes enter {
  0%{transform: translate(100%,-25%);opacity:0; background-image: url("./imgs/face2.png");}

    20%{transform: translate(100%,-25%);opacity:0;}
     30%{transform: translate(-75%,-25%);opacity:1;}
     40%{transform: translate(-75%,-25%);opacity:1;}
      45%{transform: translate(-75%,-25%);opacity:0;background-image: url("./imgs/face2.png")}

      46%{transform: translate(100%,-25%);opacity:0;background-image: url("./imgs/face3.png")}
       55%{transform: translate(-75%,-25%);opacity:1;}
       65%{transform: translate(-75%,-25%);opacity:1;}
        70%{transform: translate(-75%,-25%);opacity:0;background-image: url("./imgs/face3.png")}


              71%{transform: translate(100%,-25%);opacity:0;background-image: url("./imgs/face1.png")}
               80%{transform: translate(-75%,-25%);opacity:1;}
               90%{transform: translate(-75%,-25%);opacity:1;}
                95%{transform: translate(-75%,-25%);opacity:0;background-image: url("./imgs/face1.png")}
                100%{transform: translate(-75%,-25%);opacity:0;background-image: url("./imgs/face1.png")}


}

#mess6{animation: mess6 12s infinite;
  transform-origin: 100% 50%; transform: translate(-20px,-150%)}


  #mess7{animation: mess7 12s infinite;
    transform-origin: 100% 50%; transform: translate(80px,-150%)}

@keyframes mess6 {
  0%{transform: translate(50px,-150%)scale(0%,0%); opacity:0}
    15%{transform: translate(-20px,-150%)scale(120%,120%);opacity:1}
        20%{transform:translate(-20px,-150%) scale(100%,100%);opacity:0}

          21%{transform: translate(50px,-50%)scale(0%,0%); opacity:0}
            30%{transform: translate(-20px,-50%)scale(120%,120%);opacity:1}
                40%{transform:translate(-20px,-50%) scale(100%,100%);opacity:0}

                41%{transform: translate(50px,-150%)scale(0%,0%); opacity:0}
                  50%{transform: translate(-20px,-150%)scale(120%,120%);opacity:1}
                      60%{transform:translate(-20px,-150%) scale(100%,100%);opacity:0}

                                      61%{transform: translate(50px,-50%)scale(0%,0%); opacity:0}
                                        70%{transform: translate(-20px,-50%)scale(120%,120%);opacity:1}
                                            80%{transform:translate(-20px,-50%) scale(100%,100%);opacity:0}
                                            100%{transform:translate(-20px,-50%) scale(100%,100%);opacity:0}

}

@keyframes mess7 {
  0%{transform: translate(80px,-50%)scale(0%,0%); opacity:0}

    10%{transform: translate(80px,-50%)scale(0%,0%); opacity:0}
    20%{transform: translate(80px,-50%)scale(0%,0%); opacity:0}

          40%{transform: translate(150px,-150%)scale(0%,0%); opacity:0}
            30%{transform: translate(60px,-150%)scale(120%,120%);opacity:1}
                40%{transform:translate(60px,-150%) scale(100%,100%);opacity:0}

                35%{transform: translate(150px,-50%)scale(0%,0%); opacity:0}
                  45%{transform: translate(60px,-50%)scale(120%,120%);opacity:1}
                      55%{transform:translate(60px,-50%) scale(100%,100%);opacity:0}

                                      65%{transform: translate(150px,-150%)scale(0%,0%); opacity:0}
                                        75%{transform: translate(60px,-150%)scale(120%,120%);opacity:1}
                                            85%{transform:translate(60px,-150%) scale(100%,100%);opacity:0}
                                            100%{transform:translate(60px,-150%) scale(100%,100%);opacity:0}

}


#popup{
  transform: translate(-90%,-80%);
  animation: popup 12s infinite;
}

@keyframes popup {
  0%{opacity: 0}

    30%{opacity: 0}
      35%{opacity: 1}
       40%{opacity: 1}
       45%{opacity: 0}


       55%{opacity: 0}
         60%{opacity: 1}
          65%{opacity: 1}
          70%{opacity: 0}

          80%{opacity: 0}
            85%{opacity: 1}
             90%{opacity: 1}
             95%{opacity: 0}
              100%{opacity: 0}

}