body{
    margin: 0px;
    background: rgb( 0 ,0 ,33);
}
 #main{ 
    width: 100%;
    height: 100%;
    /* position: absolute; */
    overflow: hidden; 

} 

/* #box2{
    width: auto;
    height: auto;
    font-family: 'Bahnschrift Condensed';
    color:  rgb(150, 137, 32);
    font-size:  9em;
    font-weight: 500;
    line-height: 140px;
    position: absolute;
    top: 80px;
    left: 100px;
    overflow: hidden;
}
#element{
    font-size:  0.9em;
   color:  rgb(57, 80, 133);
} */
#text{
    position: relative;
    left: 100%;
    animation: anim3 2s forwards 0.5s;
} 
 @keyframes anim3{
    from{
       left: 100%;
    }
    to{
        left: 0%;
    }
} 
 #box3{
    overflow: hidden;
}
#container{
    width: 100%;
    position: absolute;
    top: 100%;
    animation: anim4 2s forwards 2.5s;
}
#logo{
    float: left;
    margin-left: 100px;
    margin-top: 20px;
}
#logo img{
    width: 50px;
}
/* #menu{
    font-family: 'Bahnschrift Condensed';
    font-size: 14px;
    color: white;
    letter-spacing: 2px;
    margin-right: 150px;
    margin-top: 20px;
    float: right;
}
#menu ul{
    list-style: none;
}
#menu ul li{
    display: inline-block;
    margin-left: 100px;
}  */
 @keyframes anim4{
    from{
        top: 100%;
    }
    to{
        top: 0%;
        
    }
 } 
 
 @media only screen and (min-width:400px){
    #main{ 
        width: 100%;
        height: 100%;
        /* position: absolute; */
        overflow: hidden; 
    
    }
    #box2{
        width: auto;
        height: auto;
        font-family: 'Bahnschrift Condensed';
        color:  rgb(150, 137, 32);
        font-size:  4em;
        font-weight: 500px;
        line-height: 60px;
        position: absolute;
        top: 70px;
        left: 30px;
        overflow: hidden;
    }
    #element{
        font-size:  0.9em;
       color:  rgb(57, 80, 133);
    }
   
 }
 
 @media only screen and (max-width:400px){
    #main{ 
        width: 100%;
        height: 100%;
        /* position: absolute; */
        overflow: hidden; 
    
    }
    #box2{
        width: auto;
        height: auto;
        font-family: 'Bahnschrift Condensed';
        color:  rgb(150, 137, 32);
        font-size:  200%;
        font-weight: 45%;
        line-height: 100%;
        position: absolute;
        top: 20px;
        left: 20px;
        overflow: hidden;
    }
    #element{
        font-size:  0.9em;
       color:  rgb(57, 80, 133);
    }
   
 }
 @media (min-width:560px) and (max-width:950px){
    #main{ 
        width: 100%;
        height: 100%;
        /* position: absolute; */
        overflow: hidden; 
    
    }
    #box2{
        width: auto;
        height: auto;
        font-family: 'Bahnschrift Condensed';
        color:  rgb(150, 137, 32);
        font-size:  4.5em;
        font-weight: 550;
        line-height: 70px;
        position: absolute;
        top: 90px;
        left: 40px;
        overflow: hidden;
    }
    #element{
        font-size:  0.9em;
       color:  rgb(57, 80, 133);
    }
   
 }
 @media only screen and (min-width:950px){
    #main{ 
        width: 100%;
        height: 100%;
        /* position: absolute; */
        overflow: hidden; 
    
    }
    #box2{
        width: auto;
        height: auto;
        font-family: 'Bahnschrift Condensed';
        color:  rgb(150, 137, 32);
        font-size:  8em;
        font-weight: 500;
        line-height: 120px;
        position: absolute;
        top: 80px;
        left: 100px;
        overflow: hidden;
    }
   
    #element{
        font-size:  0.9em;
       color:  rgb(57, 80, 133);
    }
   
 }