/* import google Fonts  */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #121212;
}

h1 {
    font-size: 3rem;
    position: absolute;
    right: 0;
    top: 20vh;
    color: #e3e3e3;
    font-family: 'Roboto', sans-serif;
    word-wrap: normal;
    width: 200px;
    text-align: right;
    margin: 1.5rem;
}

.content {
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, rgba(2,0,36,1) 15%, rgba(227,227,227,0) 55%);
    background-image: url("https://images.unsplash.com/photo-1629440408433-a9e951bfbcd8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#title {
    animation-name: fadein;
  animation-duration: 5s;
  opacity: 0;
}

/* animation */
@keyframes fadein {
    0% {
      opacity: 0;
    }
  
    55% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }}