*{
    padding: 0;
    margin: 0;
}

body{
/*
    background : url(biit.jpg);
    background-size: cover;
    background-repeat: no-repeat;
*/
    background-color: rgb(235, 211, 255);

}

.loader-container{
    position: fixed;
    top:0; left:0;
    z-index: 10000;
    background:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
    width:100%;
  }
  
  .loader-container.fade-out{
    top:-120%;
  }
  

#contain {

    display: flex;
    justify-content: space-between;
    margin-top: 5%;

}

#loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #fff;
    background-image: url(load.gif);
    background-repeat: no-repeat;
    background-position: center;
    z-index:99999;
}

#block0 {
    margin: auto;
    margin-left: 2%;
    height: auto;
    width:auto;

}

#block0 h1{
    margin-bottom: 5%;
    font-size: 50px;
    color: rgb(116, 0, 211);

}

#block0 h3{
    color: rgb(46, 68, 168);

}

#block1 {
    margin: auto;
    width: 30%;
    /* margin-left: 5%; 
     display:flex; 
     margin-right: 2%; */
    border-radius: 20px;
    
}

#block2 {

    margin-top: auto;
    margin-bottom: auto;
    height: 500px;
    width:30%;
    background-image: url(fstall.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: fly 5s Linear infinite;   

}

@keyframes fly{

    100%{transform:translateY(10%)}
    75%{transform:translateY(-10%)}
    50%{transform:translateY(10%)}
    25%{transform:translateY(-10%)}
    0%{transform:translateY(10%)}
    
/*  45%{transform:translateY(-5pxpx)};
    60%%{transform:translateY(-10px)};    
    75%{transform:translateY(-5px)};
    100%{transform:translateY(5px)};    */
}


#hp {
    width: 90%;
    height: auto;


    margin-top: 40%;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;

}
#delv {
    align-items: center;
   animation: runn 18s Linear infinite; 
   height: 20%;
   width: 29%;
   
}

    @keyframes runn{

        100%{transform:translateX(70em)}
        45%{transform:translateX(0em)}
        55%{transform:translateX(0em)}
        0%{transform:translateX(-60em)}
    /*  95%{transform:translateX(60em)}
        52%{transform:translateX(52em)}
        50%{transform:translateX(50em)}
        48%{transform:translateX(48em)} */  
}

.location{

    
    width: 90%;

    margin-right: 5%;
    margin-left: 5%;
    margin-top: 2%;

    text-align: right;
    color: #f19d01;
    font-size: 500%;
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  

}

.weather-icon {
    
    object-position:center;
    width: 90%;
    text-align:right;
    
    margin-left: auto;
    margin-right: auto;


}


.temperature-description{

    
    width: 90%;


    text-align: right;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 2%;

    color: rgb(102, 1, 94);
    font-size: 300%;
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}

.temperature-value{

    
    width: 90%;


    text-align: right;

    margin-right: 5%;
    margin-left: 5%;
    margin-top: 2%;
    
    color: rgba(248, 3, 3, 0.774);
    font-size: 400%;
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.latitude{
    margin-left: 5%;
    margin-left: 5%;
    margin-top: 2%;
    
    width: 90%;

}

.longetude{
    margin-left: 5%;
    margin-left: 5%;
    margin-top: 2%;
    
    width: 90%;

}


.latitude p{

    margin-top: 2%;
    
    text-align: right;
    color: rgb(12, 95, 9);
    font-size: 300%;
    font-style: bold;
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}


.longetude p{

    margin-top: 2%;

    text-align: right;
    color: rgb(27, 6, 148);
    font-size: 300%;
    font-style: italic;
    font-variant-caps: all-petite-caps;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

@media (max-width: 1200px){


    #block0 {
        margin: auto;
    }

    #block0 h1{
        color: rgb(116, 0, 211);
        font-size: xx-large;

    }

    #block0 h3{
        font-size: large;
    }
    

    #block2{
        width: auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }

    #block1 {
        width: 70%;
        margin-top: 13%;
        margin-bottom: 5% ;

    }
    #block0{
        width: auto;
        margin-bottom: 10%;
    }

    #contain {
        display: flex;
        flex-direction: column;
    }

    
    .weather-icon{
        text-align: center;
    }


    .latitude p{
        text-align: center;
        font-size: large;

    }

    .longetude p{
        text-align: center;
        font-size: large;

    }

    .temperature-value{
        text-align: center;
        font-size: large;

    }

    .temperature-description{
        text-align: center;
        font-size: large;


    }

    .location{
        text-align: center;
        font-size: xx-large;
    }

    
#delv {
    align-items: center;
    height: 1%;
    width: 1%;
  animation: run 8s Linear infinite;   
   
}

    @keyframes runn{

        100%{transform:translateX(0em)}
        45%{transform:translateX(0em)}
        55%{transform:translateX(0em)}
        0%{transform:translateX(0em)}
    /*  95%{transform:translateX(60em)}
        52%{transform:translateX(52em)}
        50%{transform:translateX(50em)}
        48%{transform:translateX(48em)} */  
}


}
/*

@media (max-width: 400px){

    
    #block0 {
        margin: auto;
    }

    #block0 h1{
        color: rgb(116, 0, 211);
        font-size: 200%;

    }

    #block0 h3{
        font-size: 150%;
    }

    #block2{
        width: auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }

    #block1 {
        width: 70%;
        margin-top: 13%;
        margin-bottom: 5% ;

    }
    #block0{
        width: auto;
        margin-bottom: 10%;
    }

    #contain {
        display: flex;
        flex-direction: column;
        
    }

    .weather-icon{
        text-align: center;
    }

    .latitude p{
        text-align: center;
        font-size: large;
    }

    .longetude p{
        text-align: center;
        font-size: large;
    }

    .temperature-value{
        text-align: center;
        font-size: large;
    }

    .temperature-description{
        text-align: center;
        font-size: large;
    }

    .location{
        text-align: center;
        font-size: xx-large;
    }



}

*/


.foot{
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    height: 50px;
    background-color: rgb(82, 76, 75);
  }
  
  .foot h1{
    text-align: center;
    font-size: 35px;
    color: rgb(250, 229, 211);
  }