@font-face {
    font-family: "Blue";
    src: url(../Font/Blue-Winter.ttf);
}


*{
    list-style: none;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    /*outline: 1px solid red !important;*/
    user-select: none;
    box-sizing: border-box;
}
body{
    background-color: rgb(0, 0, 140);
    font-family: "Blue", sans-serif; 
    width: 99vw;
    overflow-x: hidden;
    text-align: center;
    position: relative;
}




/*منو*/
header{
    width: 99vw;
    text-align: center;
    font-size: 25px;
}
#menu{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#menu ul{
    background-color: rgb(255, 234, 0);
    border-radius: 50px;
    margin: 10px;
    width: 60vw;
}
#menu li{
    display: inline-block;
    padding: 15px;
}
#menu li:hover{
    background-color: rgb(255, 208, 0);
    border-radius: 50px;
    transition: 0.5s;
}
#menu a{
    color: rgb(0, 0, 140);
}
#starmenu{
    width: 8vw;
    margin: 10px;
    animation:starColor 2s linear infinite;
}
@keyframes starColor{
    0%{
        filter:drop-shadow(0 0 60px rgba(255, 242, 0, 0.904))  hue-rotate(0deg) ;
    }
    100%{
        filter:drop-shadow(0 0 30px rgba(255, 242, 0, 0.904)) hue-rotate(360deg) ;
    }
}
#starIcon2{
    display: inline-block;
    width: 10vw;
}
#starIcon2 img{
    width: 2.5vw;
    cursor: pointer;
}


/*عکس اصلی*/
main{
    width: 99vw;
    text-align: center;
}
#mainPhoto img{
    width: 50vw; 
}
#mainPhoto{
    color:rgb(255, 234, 0);
    width: 99vw;
}
#mainPhoto p{
    font-size: 25px;
}


/*بنر ها*/
.banner{
    width: 50vw;
    margin: 5vw;
    border-radius: 50px;
}
#banner{
    margin-top: 10vw;
}


/*ستاره ها*/
.starRotate{
    width: 15vw;
    position: absolute;
    opacity: 0.8;
    animation: twinkle 2s infinite alternate;
    filter:drop-shadow(0 0 30px rgba(255, 242, 0, 0.904));
}
@keyframes twinkle {
    0% { opacity: 0.5; }
    50%,100% { opacity: 1; }
}
.starRotate:nth-child(1) { 
    top: 40vw; left: -3vw; 
    animation-delay: 1s;
}
.starRotate:nth-child(2) { 
    top: 60vw; left: 12vw; 
    animation-delay: 2s;
}
.starRotate:nth-child(3) { 
    top: 45vw; left: 80vw; 
}
.starRotate:nth-child(4) { 
    top: 70vw; left: 88vw; 
    animation-delay: 1s;
}
.starRotate:nth-child(5) { 
    top: 85vw; left: 1vw; 
    animation-delay: 2s;
}
.starRotate:nth-child(6) { 
    top: 90vw; left: 72vw; 
}
.starRotate:nth-child(7) { 
    top: 100vw; left: 5vw; 
    animation-delay: 1s;
}
.starRotate:nth-child(8) { 
    top: 110vw; left: 5vw; 
    animation-delay: 2s;
}
.starRotate:nth-child(9) { 
    top: 110vw; left: 90vw; 
}
.starRotate:nth-child(10) { 
    top: 16vw; left: 90vw; 
    animation-delay: 2s;
}
.starRotate:nth-child(11) { 
    top: 11vw; left: -6vw; 
}
.starRotate:nth-child(12) { 
    top: 140vw; left: 70vw; 
}
.starRotate:nth-child(13) { 
    top: 140vw; left: 5vw; 
    animation-delay: 2s;
}










/*پا صفحه*/
footer{
    width: 99vw;
    text-align: center;
    display: flex;
    align-items: end;
    justify-content: center;
    margin-top: 10vw;
}
footer img{
    width: 50vw;

}
footer p{
    color: rgb(255, 234, 0);
    text-align: left;
    font-size: 25px;
}





/*منوی ریسپانسیو*/
@media screen and (max-width: 700px){
    /*منو*/
header{
    width: 99vw;
    text-align: center;
    font-size: 10px;
}
#menu{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#menu ul{
    background-color: rgb(255, 234, 0);
    border-radius: 50px;
    width: 60vw;
    display: flex;
    justify-content: center;
    align-content: center;
}
#menu li{
    display: inline-block;
    padding: 5px;
}
#menu li:hover{
    background-color: rgb(255, 208, 0);
    border-radius: 50px;
    transition: 0.5s;
}
#menu a{
    color: rgb(0, 0, 140);
}
#starmenu{
    width: 10vw;
    margin: 10px;
    animation:starColor 2s linear infinite;
}
@keyframes starColor{
    0%{
        filter:drop-shadow(0 0 20px rgba(255, 242, 0, 0.904))  hue-rotate(0deg) ;
    }
    100%{
        filter:drop-shadow(0 0 10px rgba(255, 242, 0, 0.904)) hue-rotate(360deg) ;
    }
}

#starIcon2{
    display: inline-block;
    width: 10vw;
}
#starIcon2 img{
    width: 4vw;
    cursor: pointer;
}

#mainPhoto p{
    font-size: 10px;
}


footer p{
    font-size: 10px;
}
}