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

body {
    background-color: rgb(0, 0, 37);
    margin: 0;
}

@keyframes fall {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;

    }
}

#fallTrigger:checked~.star {
    animation: fall 5s linear forwards;
}

.star {
    width: 15px;
    height: 15px;
    clip-path: polygon(50% 2.45%, 61.8% 38.77%, 100% 38.77%, 69.1% 61.23%, 80.9% 97.55%, 50% 75.1%, 19.1% 97.55%, 30.9% 61.23%, 0% 38.77%, 38.2% 38.77%);
    background-color: rgb(255, 255, 255);
    position: fixed;
    z-index: -1;
}

.star0 {
    top: 10px;
    left: 40px;
    position: fixed;
}

.star90 {
    transform: rotate(90deg);
    position: fixed;
    right: 20px;
    top: 30px;
}

.star120 {
    transform: rotate(120deg);
    position: fixed;
    top: 60px;
    right: 90px;
}

.box {
    display: flex;
    width: 500px;
    height: 350px;
    background-color: rgb(108, 108, 108);
    border-radius: 9px 20px;
    margin: auto;
    margin-top: 180px;
    box-shadow: 0 0 10px 10px rgb(255, 255, 255);
    direction: rtl;
    box-sizing: border-box;
    z-index: 1;
}

h1 {
    /* position: fixed; */
    /* display: inline-block; */
    top: 100px;
    text-shadow:
        0 0 5px rgb(248, 191, 2),
        0 0 10px rgb(248, 191, 2),
        0 0 20px rgb(248, 191, 2),
        0 0 40px rgb(248, 191, 2),
        0 0 80px rgb(248, 191, 2);
    /* border: solid rgb(255, 225, 0); */
    margin: auto;
    color: rgb(255, 204, 0);
}

.smallBox {
    width: 200px;
    height: 350px;
    border-radius: 20px 10px;
    position: relative;
    bottom: 50px;
    right: 20px;
    background-color: rgb(99, 108, 108);
    box-shadow: 0 0 8px 6px rgb(255, 255, 255);
    display: inline-block;
    margin-left: 30px;
}

.smallBox img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    box-shadow: 0 0 10px 20px rgb(248, 191, 2) inset;
    margin-top: 15px;
}

.container {
    text-align: center;
}

#s1 {
    position: fixed;
    top: 50px;
    right: 10px;

}

#s2 {
    position: fixed;
    top: 200px;
    right: 60px;

}

#s3 {
    position: fixed;
    top: 500px;
    right: 1200px;
}

#s4 {
    position: fixed;
    top: 400px;
    right: 1000px;
}

.box2 {
    display: inline-block;
    width: 400px;
    height: 300px;
    margin: 0 20px 0 10px;
    color: rgb(0, 0, 0);
    line-height: 24.5px;
    margin-top: 23px;
    text-align: justify;
    direction: ltr;
}

.fas.fa-phone {
    transform: rotate(260deg);

    color: rgb(219, 187, 3);
    text-shadow:
        0 0 3px rgb(248, 191, 2);
}

.smallBox2 a {
    display: inline-block;
    margin-right: 4px;
    text-decoration: none;
    color: black;
    margin-top: 10px;
}

.fas.fa-at {
    color: rgb(219, 187, 3);
    text-shadow:
        0 0 3px rgb(248, 191, 2);
    margin-top: 5px;

}

.smallBox2 {
    text-align: justify;
    margin: 5px;
    line-height: 20px;
}

.font {
    font-size: 13.96px;
}

.fas.fa-paper-plane {
    color: rgb(219, 187, 3);
    text-shadow:
        0 0 3px rgb(248, 191, 2);
    margin-top: 5px;
    /* direction:; */
}

.fab.fa-github {
    color: rgb(219, 187, 3);
    text-shadow:
        0 0 3px rgb(248, 191, 2);
    margin-top: 5px;
    font-size: 18px;
}

.star:hover {
    transform: scale(1.3, 1.3);
}

.btn {
    text-align: center;
    margin-top: 18px;
}

button {
    background-color: rgb(248, 191, 2);
    border-radius: 10px;
    width: 110px;
    height: 35px;
    border: solid rgb(248, 191, 2);
    box-shadow:
        0 0 10px rgb(248, 191, 2),
        0 0 20px rgb(248, 191, 2),
        0 0 40px rgb(248, 191, 2),
        0 0 80px rgb(248, 191, 2);
    cursor: pointer;
}

.star.fall {
    animation: fall 5s linear forwards;

}