.starting{
        height: 60%;
        border-radius: 5px;
        background-color: rgb(87, 23, 17);
        width: 76%;
        margin-inline: auto;
    }

.intro{
    height: 45%;
    border-radius: 10px;
    background-color: rgb(3, 60, 0);
    width: 80%; 
    margin-inline: auto;
    }

.about{
    height: 120%;
    border-radius: 10px;
    background-color: rgb(10, 45, 87);
    width: 80%; 
    margin-inline: auto;
    }

.center-img{
  display: block;
  width: 250px; 
  margin-left: auto;
  margin-right: auto;
}


#startingtext{
    font-family: 'Arial', sans-serif;
    font-size: 60px;
    color: rgb(161, 185, 255);
    text-align: center;
    }

 #introtext{
    font-family: 'Aaargh', sans-serif;
    font-size: 25px;
    color: rgb(255, 144, 144);
    text-align: center;

    }

#abouttext{
    font-family: 'Aaargh', sans-serif;
    font-size: 20px;
    color: rgb(109, 190, 97);
    text-align: center;

    }
body {
    background-color: rgb(0, 11, 31);
}
/*cool aniation which definetly did not take me 20 mins to research how to make*/
 @keyframes revealsite {
    0%{
        filter: blur(20px); /*make the site blured*/
        transform: scale(0.8);

    }

    66%{ /* zoom in */
        transform: scale(1);
    }

    100%{
        filter: blur(0px);
        transform: scale(1);

    }
 }
.unblur{
    animation: revealsite 1s ease-out forwards;
    transform-origin: center center;
    will-change: filter;
}