@charset "utf-8";

/**********saman's reset********/

body,h1,h2,ul,li,p{

	margin:0px;

	padding:0px;

	font-size:1.1rem;

	line-height:1.6;

	color:hsl(44, 79%, 91%);

}



*{box-sizing:border-box;}













/***********body**************/

#page{

 

    font-family: 'Lato', sans-serif;

    margin:5vh auto;

    text-align: center;



}



body{

    background-image: url(images/fakurian-design-PGdW_bHDbpI-unsplash.jpg); 

    background-size: cover;	



	



}



/***********header*************/

h1{

	font-family: 'Roboto', sans-serif;

	color:hsl(284, 87%, 15%);

	font-size:1.5rem;

}



img{

	width:45%;	

}





/************main************/



 h2{

	font-size:1.2rem;

	margin:10px 0px;

	color:hsl(284, 87%, 15%);

	

}



section ul li{

    list-style-type: none;	

	padding:5px 0px;

}

ul li a{

    color: #FEF4D7;;

    text-decoration: none;

    font-size:1rem;	

}



ul li a:hover{

    text-decoration:underline ;	

	color:#FFC727;

} 





/***********footer*********/





 footer{

	text-align: center;

	grid-column: 1/3;

	padding:20px;

	

}

footer p{

	font-size:.8rem;

}

footer a{

	color:#C7C7C7;

	text-decoration:underline;

	font-size:.7rem;

} 











@media only screen and (min-width: 570px){



        /***********body**************/

        #page{

            width: 65vw; 

            display: grid; 

            background: #88D0E6;

            background: -webkit-radial-gradient(top left, #88D0E6, #9677C3);

            background: -moz-radial-gradient(top left, #88D0E6, #9677C3);

            background: radial-gradient(to bottom right, #88D0E6, #9677C3);

            opacity: .9;

            backdrop-Filter:blur(7px);

            border-radius: 8px; 

        }



        body{

            background-image: url(images/fakurian-design-PGdW_bHDbpI-unsplash.jpg);

            background-size: cover;	 



        }



        .animation-area {

        

            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: 25px;

            height: 25px;

            border-radius:60px;

            background: #4f035c11;

            animation: animate 15s linear infinite;

            bottom: -150px;

        }

        .box-area li:nth-child(1) {

            left: 86%;

            width: 80px;

            height: 80px;

            animation-delay: 0s;

        }

        .box-area li:nth-child(2) {

            left: 12%;

            width: 30px;

            height: 30px;

            animation-delay: 1.5s;

            animation-duration: 10s;

        }

        .box-area li:nth-child(3) {

            left: 70%;

            width: 100px;

            height: 100px;

            animation-delay: 5.5s;

        }

        .box-area li:nth-child(4) {

            left: 42%;

            width: 150px;

            height: 150px;

            animation-delay: 0s;

            animation-duration: 15s;

        }

        .box-area li:nth-child(5) {

            left: 65%;

            width: 40px;

            height: 40px;

            animation-delay: 0s;

        }

        .box-area li:nth-child(6) {

            left: 15%;

            width: 110px;

            height: 110px;

            animation-delay: 3.5s;

        }

        @keyframes animate {

            0% {

                transform: translateY(0) rotate(0deg);

                opacity: 1;

            }

            100% {

                transform: translateY(-800px) rotate(360deg);

                opacity: 0;

            }

        }

        



        /***********header*************/

        header{

            

            grid-column: 1/3;

            padding:25px 100px 0px 100px;

            position:relative;

            

        } 



        header p{

            text-align: left;

        }



       





        /************main************/

        main{

            padding:20px 50px 10px 50px;

            grid-column: 1/3;

        } 



        

        #project{

            display :flex;

            flex-wrap: wrap;

        }

        #project li {

            flex-basis: 50%;

        } 



        }

        

        

















            @media only screen and (min-width: 800px){

                main{

                    display:flex;



                }



                section{

                    flex-basis: 50%;

                

                }





            }













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

                    #page{

                    

                    display: grid; 

                    background: #88D0E6;

                    background: -webkit-radial-gradient(top left, #88D0E6, #9677C3);

                    background: -moz-radial-gradient(top left, #88D0E6, #9677C3);

                    background: radial-gradient(to bottom right, #88D0E6, #9677C3);

                    

                    }



                    /***********header*************/

                    header{

                        

                        grid-column: 1/2;

                        padding:100px 100px 0px 120px;

                        position:relative;

                    

                    } 



                    h1{

                        position: absolute;

                        left:120px;

                        top:50px;

                        font-family: 'Roboto', sans-serif;

                        color:hsl(284, 87%, 15%);

                        font-size:1.5rem;

                    }



                    img{

                        height:5%vh; 

                        width:45%;

                        position: absolute;

                        left:100px;

                        top:100px; 

                        

                        

                    }



                    /************main************/

                     main{

                        padding:90px 20px 50px 20px;

                        display:block;

                        grid-column: 2/3;

                    } 



                    #project{

                        display :flex;

                        flex-wrap: wrap;

                    }

                    #project li {

                        flex-basis: 50%;

                    } 

                        





                }