@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    
}

body{
    /* font-family: 'Rajdhani', sans-serif; */
    font-family: 'Montserrat', sans-serif;
    /* overflow: hidden; */
}

.landing{
    font-family: 'Montserrat', sans-serif;
    background-color: #1f2029;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
    background-size: 4%;
    height: 100vh;
    width: 100%;
    display: flex;
    /* justify-content: center;
    align-items: center; */
    flex-direction: column;
    overflow: hidden;
 }

 .content{
     margin-top: 100px;
     /* background-color: moccasin; */
     display: flex;
     align-items: center;
     justify-self: center;
     flex-direction: column;
 }
 .cyber{
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    flex-direction: column;

}

.contact{

    /* height: 100px; */
    margin-top: 150px;
    display: flex;
    align-items: center;
    justify-content: bottom;
    flex-direction: column;   
}

.landing h1{
    color: white;
}

.landing h1 span{
    color: mediumspringgreen;
}
.landing h1 a{
    text-decoration: none;
}
.landing h1 span:hover{
    color: rgb(240, 81, 81);
}

.levitation {
    /* //... skiping size and position
    //creating shadow */
    filter: drop-shadow(22px -15px 5px rgba(0, 0, 0, 0.5));
    /* //... */
    }

    .levitation {
        /* //...
        //creating animation, name "bouge" (means move in french), infinitly, duration of the animation 8s on this exemple */
        animation: bouge 6s infinite alternate-reverse;
        }

        @keyframes bouge {
            /*starting point and angle (same angle as choosen into .levitation)*/
            from {
              transform: translateY(50px) rotate(0deg);
            }
            /* ending point and angle */
            to {
              transform: translateY(100px) rotate(0deg);    
            }
          }



.image{
    margin: 0;
    padding: 0;
    position: relative;
    /* background-color: peru; */
    /* display: grid;
    align-items: bottom; */
    /* justify-content: flex-end;
    align-items: flex-end; */
    width: 100%;
    margin-left: auto;
    height: 50%;
}
.cat{
    z-index: 1;
    position: absolute;
    right: -15vh;
    bottom: -15vh;
    height: 195%;
}

          @media screen and (max-width: 1000px){

            .landing{
                padding: 3px;
            }
            .landing h1{
                font-size: 16px;
                padding: 2px;
            }


          }

          .cyber-status{
              width: 100%;
              height: 100%;
          }

          .cyber{
              width: 100%;
              padding: 10px;
          }