first wepage.css

body{
  margin: 0;
  padding: 0;
 
  }
p{
color:whitesmoke;
text-align: center;
text-decoration: none;
  font-family:system-ui;
  font-size: 36px;
}
h1{
  font-family:Bebas Neue;
  text-align: center;
  font-size: 70px;
  color:whitesmoke;
  margin: 3cm;
}
p2{
  font-family: Arial, Helvetica, sans-serif;
  color: black;

}
h3{
  font-family: Moongloss;
  color:whitesmoke;
  font-size: 36px;
  text-decoration:black underline ;
}
@font-face{
  font-family: Moongloss;
  src: url("MoonGlossDisplayMedium.otf");
}
.title{
 
 
  background-color:none;
  background-size:1500px 400px;
  background-repeat: initial;
}
.info{
  border:none;
  font-family: system-ui;
  color: black;
  margin: 1cm;
  margin-bottom: 1cm;
}
@font-face{
font-family: overpass;
src: url("overpass.bold.ttf");
}

.focus-in-expand {
-webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          
}

/* ----------------------------------------------
* Generated by Animista on 2020-5-9 12:3:13
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation focus-in-expand
* ----------------------------------------
*/
@-webkit-keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
h4{
  font-family: Aguafina Script;
  color:whitesmoke;
  text-align: center;
  margin: 1cm;
  font-size: 35px;
  padding-top: 0cm;
}
.text-shadow-drop-left {
-webkit-animation: text-shadow-drop-left 0.6s both;
          animation: text-shadow-drop-left 0.6s both;
      
}

/* ----------------------------------------------
* Generated by Animista on 2020-5-9 12:16:41
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* @animation text-shadow-drop-left
* ----------------------------------------
*/
@-webkit-keyframes text-shadow-drop-left {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: -6px 0 18px rgba(0, 0, 0, 0.35);
  }
}
@keyframes text-shadow-drop-left {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: -6px 0 18px rgba(0, 0, 0, 0.35);
  }
}

.box{
  align-self: center;
  font-family: Arial, Helvetica, sans-serif;
  text-align:left;
  /* background: rgb(137, 170, 189);
  margin: 0cm;
  padding-left: 5cm;
  border: solid darkblue;*/
}

h5{
  font-size: 20px;
  color:whitesmoke;
  font-family: system-ui;
  font-weight: lighter;
}
@font-face{
  font-family: Aguafina Script;
  src: url("AguafinaScript-Regular.ttf");
}

.projects{
  padding-bottom: 1cm;
  color: black;
  border:none;
  padding-left: 0;
  padding-bottom: 1.5cm;
 
}
h6{
  text-align: center;
  text-decoration:none;
  font-size: 36px;
  font-family: Moongloss;
  color:whitesmoke;
  margin: initial;
  padding: inherit;
  
} 
@font-face{
  font-family: Bebas Neue;
  src: url("BebasNeue-Regular.otf");
}
h8{
  font-size: 20px;
  text-align: center;
  padding-left: 14cm;
}
li{
  align-content: center;
  text-align: center;
  font-size: 20px;
  font-weight: lighter;
  color: whitesmoke;
  font-family: system-ui;
}
.multimedia{
  display:inline-block;
  text-align: center;
  padding-left: 1cm;
  border:solid white
}
.interests{

  font-family: system-ui;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  margin: initial;
}
ul{
  align-self: start;
  font-weight: lighter;
  font-size: 20px;
}
p{
  font-size: 36px;
}
.slide-in-bck-center {
-webkit-animation: slide-in-bck-center 3s both;
        animation: slide-in-bck-center 3s both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-5-12 17:17:21
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation slide-in-bck-center
* ----------------------------------------
*/
@-webkit-keyframes slide-in-bck-center {
  0% {
    -webkit-transform: translateZ(600px);
            transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-bck-center {
  0% {
    -webkit-transform: translateZ(600px);
            transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
.flip-in-hor-bottom {
-webkit-animation: flip-in-hor-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: flip-in-hor-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-5-12 17:20:2
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation flip-in-hor-bottom
* ----------------------------------------
*/
@-webkit-keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
.swirl-in-bck {
-webkit-animation: swirl-in-bck 1s ease-out both;
        animation: swirl-in-bck 1s ease-out both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-5-12 17:25:56
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation swirl-in-bck
* ----------------------------------------
*/
@-webkit-keyframes swirl-in-bck {
  0% {
    -webkit-transform: rotate(540deg) scale(5);
            transform: rotate(540deg) scale(5);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
}
@keyframes swirl-in-bck {
  0% {
    -webkit-transform: rotate(540deg) scale(5);
            transform: rotate(540deg) scale(5);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
}
.roll-in-left {
-webkit-animation: roll-in-left 0.6s ease-out both;
        animation: roll-in-left 0.6s ease-out both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-5-12 18:6:18
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation tracking-in-contract
* ----------------------------------------
*/
@-webkit-keyframes tracking-in-contract {
0% {
  letter-spacing: 1em;
  opacity: 0;
}
40% {
  opacity: 0.6;
}
100% {
  letter-spacing: normal;
  opacity: 1;
}
}
@keyframes tracking-in-contract {
0% {
  letter-spacing: 1em;
  opacity: 0;
}
40% {
  opacity: 0.6;
}
100% {
  letter-spacing: normal;
  opacity: 1;
}
}
.tracking-in-contract {
	-webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 4s both;
	        animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 4s both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-5-12 17:39:28
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation tracking-in-contract
* ----------------------------------------
*/
@-webkit-keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
@keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 5s both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 5s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-5-13 12:4:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
h2{
  font-family: system-ui;
  color: white;
  font-weight: lighter;
}
img{
   align-self: initial;
}
ul{
  color:whitesmoke
}
.ease-in{
   animation: yourAnimation 1s forwards 0s ease;
}

@keyframes yourAnimation{
  0%{
      transform: rotate(0deg) scale(1) translateX(100px) translateY(-15%);
      opacity: 0;
      }
  100%{
      transform: rotate(0deg) scale(1) translateX(100px) translateY(-10%);
      opacity: 1;
      }
}