CSS/HTML5のサイジングの問題

現在、私は小さなウェブサイトで作業しています。私は常に画面（✔）の中心地に滞在する私の箱を希望CSS/HTML5のサイジングの問題

...私のボタンのいくつかの、アライメントサイジング、ポジショニングに関してはいくつか質問があります。
私は、ウィンドウが十分に小さくなったときに互いの上にスタックするように適応ボタン方式を使いたいと思います。現在、それらはすべて一緒に束ねられ、ページが特定のサイズに達すると判読できなくなります（下の画像参照）。
私のサインアップテキストは、私の2つのボタンの下にあるようにしたいと思います。それは現在、彼らの右側にあります。また、ウィンドウが横にではなく、お互いの上にある必要がある特定のサイズのウィンドウがある場合は、私のサインアップのテキストを続けて、2番目のボックスの下に移動します。以下で私のコード（html & CSS）を共有し、私はウェブサイトの現在の状態の写真を送信します。

ありがとうございます。

CSSコード

body{ 
    margin-top: 300px; 
    text-align: center; 
} 


.ownerButton, .employeeButton { 
    background-color: #333; 
    text-align: center; 
    text-decoration: none; 
} 



.ownerButton, .employeeButton { 
    font-family: "georgia", sans-serif; 
    font-size: 24px; 
    padding: 1em 2em; 
    margin: 3px; 
    border: 0; 
    outline: 0; 
    color: #000000; 
    background-color: #2196F3; 
    text-transform: uppercase; 
    border-radius: 0.15em; 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); 

    font-weight: bold; 

    overflow: hidden; 
    position: relative; 
} 

.footer{ 
    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 14px; 

    position: fixed; 
    left: 0; 
    bottom: 0; 
    width: 100%; 

    background-color: #2196F3; 
    text-align: center; 
}

HTMLコード

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
     <title>Belper</title> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body bgcolor=#4286f4> 

     <a href="http://www.google.com" class="ownerButton">Sign in as OWNER</a> 
     <a href="http://www.google.com" class="employeeButton">Sign in as EMPLOYEE</a> 

     <a href="http://google.com" class="signUp">Dont have an account? Sign up here!</a> 

     <div class="footer"> 
     <p>Copyright © 2000-2017 - Mathieu Larocque - All Rights Reserved.</p> 
     </div> 

    </body> 
</html>

Image while window is large

Image while window is small

出典

2017-10-05 Larocque