style.css

html{
    padding:0px;
    margin:0px;

}

body{
    padding:0px;
    margin:0px;
    font-size:16px;

}

#top-bar-container{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:arial;
    font-size:.9rem;
    height:60px;
}

#top-bar-left ul, #top-bar-right ul{
    list-style-type:none;
    display:flex;
    align-items:center;
}

#top-bar-left li, #top-bar-right li{
    padding-right:12px;
}

#top-bar-left ul{
    margin-left:-15px;
}
#top-bar-left li{
    padding-left:2px;
}

#top-bar-right ul{

}

#top-bar-right li{
    padding-right:15px;
}

#top-bar-container a{
    text-decoration:none;
    color:black;
}
#top-bar-container a:hover{
    text-decoration:underline;
}

#dots-link:hover{
    background-color:lightgray;
}

#acc-link:hover{
    background-color:lightgray;
}

#main-container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    max-width:1100px;
    margin:auto;
    margin-top:50px;
    height:390px;
}

#main-image-container{
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
    max-width:600px;
}
#main-image-container img{
    width:100%;
}

#main-search-container{
    padding:15px 0px;
    width:60%;
    min-width:300px;
}

#main-search-container  input[type=text]{
    width:100%;
    height:40px;
    border:1px solid lightgray;
    border-radius:150px;
    
}
#main-search-container  input[type=text]:hover{
    box-shadow:1px 1px 5px lightgray;
}
#main-search-container  input[type=text]:focus{
    outline:none;
}

#main-button-container{
    padding:10px;
}

#main-button-container button{
    background-color:rgb(248, 248, 248);
    border:1px solid rgb(248, 248, 248);
    font-size:.9rem;
    font-family:arial;
    padding:10px;
    border-radius:5px;
    margin:10px;

}

#main-button-container button:hover{
    background-color:rgb(233, 233, 233);
    box-shadow:1px 1px 5px lightgray;
}

#footer-container{
    font-family:arial;
    font-size:.9rem;
    width:100%;
    position:fixed;
    bottom:0;
    display:flex;
    justify-content:space-between;
    background-color:rgb(240, 240, 240);
    color:gray;
}

#footer-left ul, #footer-right ul{
    display:flex;
    list-style-type:none;
    justify-content:center;
    align-items:center;
}
#footer-left li{
    padding-right:30px;
}

#footer-right li{
    padding-left:0px;
    margin-right:30px;
}

#footer-middle{
    margin-left:-100px;
}

#footer-left a, #footer-middle a, #footer-right a{
    text-decoration:none;
    color:gray;
}
#footer-left a:hover,#footer-middle a:hover , #footer-right a:hover{
    text-decoration:underline;
}

@media (max-width:360px){
    #top-bar-container{
        justify-content:center;
    }
    #top-bar
}

@media (max-width:850px){
    #footer-container{
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    #top-bar-container{
        justify-content:flex-start;
    }

    #footer-middle{
        margin:auto;
    }
}