@font-face 
{
     font-family: 'Requiem';
     src: url('./ttf/Requiem.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}
@font-face 
{
     font-family: 'CelticMD';
     src: url('./ttf/celticmd.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}
@font-face 
{
     font-family: 'berlin';
     src: url('./ttf/BerlinRounded-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}
body
{
    font-family: Berlin, sans-serif;
    font-size: 16pt;
}
.background
{

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;


    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
} 
#background1
{
/*            background: #d8c8a8;*/
    background: url("./bg2.jpg") no-repeat center center fixed; 
    z-index: -3;
}
#background2
{
    background-image: radial-gradient(ellipse, rgba(255,255,255,.6), rgba(255,255,255,.0));
    z-index: -1;
}
a
{
    color: black;
    text-decoration: none;
}
a:hover
{
    text-decoration: underline;
}
.Logo
{
    font-size: 5em;
    line-height: 1em;
    font-family: Requiem;
    font-variant: small-caps;
    text-shadow: 0 0 .1em #9ea8d2;
}

.Wrapper
{
    border: 1px solid black;
    padding: 15px;
    border-radius: 15px;
    margin: 5px 0;
    border: 1px solid black;
    text-align: center;

    background-image: radial-gradient(ellipse, rgba(255,255,255,0), rgba(255,255,255,.5));
}
#header:hover
{
    text-decoration: none;
}

#left
{
    position: fixed;
    left: 0;
    right: 50%;
    top: 200px;
    bottom: 2vw;
    text-align: right;
    padding: 0 2% 0 2%;
    font-size: 2em;
    line-height: 1.4em;
    overflow-y: auto;
    }
#leftContent{}
#center
{
    position: fixed;
    left: 50%;
    width: 2px;
    top: 150px;
    bottom: 2vw;

    background-image: linear-gradient(rgba(255,255,255,0), #d8d8e0, #908585, #455045, black, #455045 ,#908585, #d8d8e0, rgba(255,255,255,0));
}
#right
{
    padding: 0 35% 0 2%;
    position: fixed;
    left: 50%;
    right: 0;
    top: 150px;
    bottom: 2vw;
    overflow-y: auto;
    overflow-x: hidden;
}
#rightContent
{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 500px;
}
#header
{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: auto;
    padding-top: .2em;
    text-align: center;
}
#footer
{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    text-align: center;
    font-size: .8em;
    padding-bottom: .2em;
}
@media (max-width: 1200px) {
    body{font-size: 1.8vw;}
    #center, #right {top: 13vw;}
    #left {top: 16.5vw;}
    #rightContent {width: 42vw;}
    #right a
    {
        padding: 1vw;
        border-radius: 1.4vw;
        margin: .4vw 0;
    }
}