body { 
    margin: 0; 
    padding: 0; 

    color: grey; 
}

* { 
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

.nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-direction: row; 
    flex-wrap: wrap; 
    
    width: 100%; 
    height: 75px;  
    background-color: #404040; 
    /*background-color: #5e5e5e; */
}

ul, li, a { 
    display: inline-block; 
    text-decoration: none; 
    margin-left: 50px; 
    margin-right: 50px; 
    color: grey; 
}

h1, h3{ 
    margin-left: 50px; 
}



.search-area { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: #5e5e5e;
    
    height: 400px; 
    width: 100%; 
}

#search-bar { 
    color: #404040;; 
    outline: none; 
    border: none; 
    width: 550px; 
    height: 50px; 
    font-size: 18px; 
    background-color: grey; 
    border-radius: 12px; 
}

::placeholder { 
    color: #404040;
}

.title { 
    display: flex;
    align-items: center; 
    background-color:  #5e5e5e;
}

.recent-servers { 
    display: flex; 
    justify-content: space-evenly; 
    flex-direction: row; 
    flex-wrap: wrap; 
    height: 100vh; 
    width: 100%; 
    background-color:  #5e5e5e;
}

.server-box { 
    display: flex; 
    height: 200px; 
    width: 200px; 
    background-color: #404040;
    margin-left: 50px; 
    margin-right: 50px; 
}