body          { color:#727EB2; }
header, main, #post, #post-content, #innerBg, #bottom { display:block; margin: 0 auto; }

header        { background: url("img/gallery/gal-top.png") no-repeat top center; }
main          { background:#F5EDE0 url("img/gallery/gal-tile.png") repeat-y top center; }

#bottom       { background:#F5EDE0 url("img/gallery/gal-bottom.png") no-repeat top center; }
#post-content { text-align:justify; }
#post-content h2 { display:none; }
#post-content h3 {
    text-align:center; font-family:"Euphorigenic"; font-size:2.2rem;
    margin:5rem 0 2rem 0; padding-top:1rem;
    border-top:1px dotted #533f81;
}

h1            { display:none; }
a             { color:rgb(170, 140, 173); text-decoration:none; outline:0; }
a:hover       { color:rgb(141, 105, 168); text-decoration:underline; }

::selection { color:white; background:#8d9cce; }



.gallery-item a img{
    border:3px solid #F5EDE1;
    background: linear-gradient(90deg, #A18745 0%, #D0BA57 25%, #ffffff 50%, #D0BA57 75%, #A18745 100% );
}



#menuButton { background-position:top center; }


@media screen and (orientation: portrait){
    main             { background-size:101%; width:100%; }
    header           { height:80vw; background-size:179.5% 100%; }
    #post            { font-size:1.5rem; min-height:360px; }
    #post-content    { width:80%; margin:0 auto; margin-top:-35vw; }
    #bottom          { width:100%; height:50vw; background-size:101%; }
    body, #bg        { background:#F5EDE0; }
    .column, .clouds { display:none; }
}



@media screen and (orientation: landscape) {
    main          { width:1440px; background-size:56.25%; }
    header        { width:100%; height:649px; background-size:100%; }
    #post         { width:56.25%; font-size:1.4rem; }
    #bottom       { width:56.25%; height:310px; background-size:contain; }
    #post-content { width:80%; min-height:25vh; margin-top:-260px; }
    #innerBg      { background:#F5EDE0; position:fixed; bottom:O; left:50%; transform:translate(-50%); width:1440px; height:100vh; }
}



@media screen and (orientation: landscape) and (max-width: 1439px) {
    main             { position:absolute; left:50%; transform:translateX(-50%); }
    #post            { margin-top:-249px; }
    #innerBg         { z-index:-1; }
    .column, .clouds { display:none; }
}



@media screen and (orientation: landscape) and (min-width: 1440px) {
    #bottom     { z-index:1; }
    #innerBg    { z-index:0; }
    .column     {
        background:transparent url("img/gallery/col-tile.png") repeat-y top center; background-size:contain;
        position:fixed; top:0; height:100vh; width:150px; z-index:2;
    }
    .col        { width:150px; position:absolute; }
    .col-top    { top:0;    height:85px;  background:transparent url("img/gallery/col-top.png")    no-repeat top center;    background-size:100%; }
    .col-bottom { bottom:0; height:100px; background:transparent url("img/gallery/col-bottom.png") no-repeat bottom center; background-size:100%; }
    #col-right  { right:50%; margin-right:-835px; }
    #col-left   { left:50%;  margin-left:-835px;  }

    #bg {
        background: linear-gradient(0deg, #e7f0ff 0%, #dfedff 30%, #d2ceff 85%, #ddc2ff 100%);
        position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-2;
    }
    .clouds {
        background: url("img/gallery/clouds.png") no-repeat bottom right; background-size: cover;
        position:fixed; bottom:0; width:50vw; height:33vh; z-index:-1;
    }
    #cloudsLeft  { left:0; transform: scaleX(-1); }
    #cloudsRight { right:0; }
}