*{
    margin: 0;
    padding: 0;
}

body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.banner-text{
    width: 100%;
    position: absolute;
}
.carrer-text{
    color: white;
    bottom: 94%;
    left: 80%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    width: 25px;
    height: 25px;
    position: absolute;
}
.transparent-carrer-button{
    width: 80px;
    height: 25px;
    margin-top: -100%;
    margin-left: -17%;
    color: transparent;
    background-color: transparent;
}
.projects-text{
    color: white;
    bottom: 94%;
    left: 85%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    width: 25px;
    height: 25px;
    position: absolute;
}
.transparent-projects-button{
    width: 96px;
    height: 25px;
    margin-top: -100%;
    margin-left: -17%;
    color: transparent;
    background-color: transparent;
}
.about-text{
    color: white;
    bottom: 94%;
    left: 91%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    width: 25px;
    height: 25px;
    position: absolute;
}
.transparent-about-button{
    width: 73px;
    height: 25px;
    margin-top: -100%;
    margin-left: -17%;
    color: transparent;
    background-color: transparent;
}
.right-corner ul{
    display: flex;
    text-align: right;
    margin-right: 20px;
}

.banner-text h2{
    text-align: center;
    text-shadow: 
    -1px 0px 1px rgba(38,33,33,1),  
    1px 0px 1px rgba(196,10,10,1),
    0px 1px 1px rgba(38,33,33,1),
    0px -1px 1px rgba(38,33,33,1); 
    background: linear-gradient(to right, rgba(38,33,33,1), rgba(196,10,10,1)); 
    background-clip: text;
    -webkit-background-clip: text; 
    color: transparent;
    font-size: 50px;
    margin-top: 20%;
}
.animation-area{
    background: linear-gradient(to left, #400101, #141414);
    width: 100%;
    height: 100vh;
}
.box-area{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.box-area li{
    position: absolute;
    display: block;
    list-style: none;
    width: 80px;
    height: 80px;
    background: rgba(38,33,33,0.25);
    animation: animate 90s linear infinite;
    bottom: -10%;
}
.box-area li:nth-child(1){
    bottom: -10%;
    left: 15%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    background: rgba(38,33,33,0.25);
}
.box-area li:nth-child(2){
    bottom: -10%;
    left: 70%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    background: rgba(110,19,19,0.25);
}
.box-area li:nth-child(3){
    bottom: -10%;
    left: 86%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    background: rgba(196,10,10,0.25);
}
@keyframes animate{
    0%{
        transform:  translateY(0) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(-800px) rotate(360deg);
    }
}
.box-areasecond{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.box-areasecond li{
    position: absolute;
    display: block;
    list-style: none;
    left: 8%;
    width: 40px;
    height: 40px;
    background: rgba(38,33,33,0.25);
    animation: animatesecond 90s linear infinite;
    bottom: 102%;
}
.box-areasecond li:nth-child(1){
    bottom: 102%;
    left: 78%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    background: rgba(99,17,17,0.25);
}
@keyframes animatesecond{
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(800px) rotate(360deg);
    }
}
.ProjectsButton-Container{
    position: relative;
    width: 86px;
    height: 38px;
    border: 0.5px solid black;
    bottom: 100.685%;
    left: 90%;
}
.projects-button{
    position: absolute;
    width: 86px;
    height: 38px;
    background: rgba(237, 230, 240,0);
}
.AboutButton-Container{
    position: relative;
    width: 65px;
    height: 38px;
    border: 0.5px solid black;
    bottom: 104.9%;
    left:  95.97%;
}
.about-button{
    position: static;
    width: 65px;
    height: 38px;
    background: rgba(237, 230, 240,0);
}