body{
    padding: 0;
    margin: 0;
    overflow-x: hidden;

    font-family: 'Exo';
}

#vidTitle{
    background: black;
    height: 45vw;width: 80vw;max-width: 1200px;max-height: 575px;min-width: 350px;min-height: 200px;/*! margin-bottom: -50px; *//*! margin-top: -50px; */
    box-shadow: 0px 0px 80px 15px #673ab7;
    border-radius: 12px;/*! box-shadow: 0px 0px 20px -2px #000000; */
}

#welcomeBlock{
    color: white;
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: 6;
}

#welcomeBlock h1{
    font-family: Bebas Neue;
    margin: 0;
    font-size: 10em;
    text-align: center;
    padding-top: 50px;

    font-weight: 1000;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-repeat: no-repeat;
background-position: center;
  background-position-x: center;
background-image: url('../imgs/pro.jpg');
transform: translate3d(0, 0, 0);
background-size: 20em;
animation-name: title;
  animation-duration: 7s;
}

@keyframes title{
    from { background-size: 0em; }
    to { background-size: 20em; }
}

.blackBlock{
    background-color: black;
    background-image: url('../imgs/pro.jpg');
    background-size: 5000px;
    filter: brightness(0.3);
    margin-top: -493px;

    width: 100vw;
    height: 100vh;
    z-index: 0;
    position: relative;

    animation-name: backAnim;
  animation-duration: 30s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.figureOval{
    clip-path: ellipse(60% 22.21% at 50% 50%);
    background: white;
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100vh;
    margin-top: -100vh;
}

@keyframes backAnim{
    from { background-position-x: 0vw; }
    to { background-position-x: -100vw; }
}

#fBB{
    height: 80vh;
}


#secondBlock{
    width: 100vw;
    
    background: black;
    color: white;
    position: relative;
    z-index: 6;
height: auto;padding-bottom: 50px;}

#secondBlock h1{
    
    font-size: 10em;
    text-align: center;

    -webkit-text-stroke: 3px #d9d9d9;
    color: transparent;
    font-family: Bebas Neue;
    margin-top: 0px;
    background: -webkit-linear-gradient(-86deg, #5be1f8 5%, #b57aec 53%, #cb09e5 91%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-stroke: 5px transparent;
    color: black;
}

  .proj {
    overflow: hidden;
    display: flex;
  justify-content: space-evenly;flex-direction: row-reverse;margin-bottom: 150px;}

  .infoProj h2 {font-size: 3em;}

button {transition: all 0.5s;/* border: 2px solid #c96de3b8; */
;;;;border: none;;;box-shadow: #a96de33d 0px 0px 0px 0px;border-radius: 60px;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 15px;
    padding-bottom: 15px;display: flex;align-items: center;background: rgb(144 83 236 / 43%);color: white;color: #da58ff;font-size: 1.4em;cursor: pointer;}

button:hover {background: rgb(144 83 236 / 61%);box-shadow: rgb(91 61 168 / 43%) -15px 0px 0px 0px;margin-left: 15px;}

.infoProj a {text-decoration: none;}

img.appIcon {border-radius: 25px;
    /* box-shadow: 7px 7px 0px 0px rgb(201 109 227); */
    width: 120px;
    height: 120px;margin-bottom: 0px;margin-right: 25px;}


.screenshots img {max-width: 300px;border-radius: 10px;}

.imgsOfProj {display: flex;flex-direction: column;align-items: center;}

.screenshots {display: flex;width: 40vw;}

.infoProj h3 {max-width: 400px;font-size: 1.7em;}

.pillsInfo {margin-bottom: 27px;max-width: 450px;}

.pillsInfo span {border: 1px #642dce solid;background: #642dce66;border-radius: 60px;padding: 6px;padding-left: 14px;padding-right: 14px;font-weight: bold;color: #de78fe;margin-right: 10px;float: left;margin-bottom: 27px;}

.dir2proj {flex-direction: row;}

.dir2proj .screenshots {flex-direction: row-reverse;}

#fo2{
    display: block;
    margin-top: -450px;
    background: black;
    margin-bottom: calc(-50vh - 110px);
}

.mobileWatch{display: none;}

.bpim {display: flow-root;}