html,body{height:100%}
body
    {
    margin:0;
    padding:0;
    }

.main-background
    {
    position:absolute;
    left:0;
    right:0;
    width:100%;
    height:100vh;
    background: black;
    overflow: hidden;
    z-index:-1;
    }

.main-foreground
    {
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    min-height:calc(100vh - 20px);
    padding:10px;
    }

.main-header-outside
    {
    display:flex; 
    align-items:center; 
    gap:12px;
    border: 4px solid gold;
    border-radius: 10px; 
    height:80px;
    }
        
.main-header-inside
    {
    width:calc(100% - 22px);
    height:calc(100% - 42px); 
    padding:22px;
    box-shadow: inset 0 0 0 2px #fff4c2;
    display: flex;
    flex-direction: row;
    }

.main-middle
    {
    height : calc(100% - 200px);
    width : calc(100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    }

.menu-left-outside
    {
    flex-grow: 1;
    margin-top:10px;
    margin-bottom:10px;
    margin-right:10px;
    border-radius: 10px;
    padding:0px;
    }
    
.menu-left-inside
    {
    height:calc(100% - 16px);
    padding:8px;
    box-shadow: inset 0 0 0 2px #fff4c2;
    }

.center-outside
    {
    flex-grow: 4;
    margin-top:10px;
    margin-bottom:10px;
    border-radius: 10px;
    }

.center-inside
    {
    height:calc(100% - 16px);
    padding:8px;
    box-shadow: inset 0 0 0 2px #fff4c2;
    }

.center-floating-outside
    {
    background:gold;
    margin-top:10px;
    margin-bottom:10px;
    border-radius: 10px;
    }

.center-floating-inside
    {
    height:calc(100% - 16px);
    padding:8px;
    box-shadow: inset 0 0 0 2px #fff4c2;
    }

.footer-outside
    {
    margin-top:12px;
    text-align:center;
    font-size:12px;
    color:#000;
    border-radius: 10px;
    }
    
.footer-inside
    {
    height:calc(100% - 16px);
    padding:12px;
    font-weight:bold;
    }

.btn
    {
    display:inline-block; 
    padding:10px 14px; 
    margin-top:12px; 
    cursor:pointer;
    color:#fff; 
    text-decoration:none;
    border: 3px solid gold;
    }
        
.btn:hover
    { 
    background:#257545;
    }

.btn:active
    { 
    transform: translate(2px,2px); 
    box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    }

.input-text
    {
    }

.title-box
    {
    width:50%;
    }

.top-box
    {
    text-align:right;
    width:50%;
    }