@import url('common.css');
body{
    text-align  :   center;
    font-family :   Proxima;
}
.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255, 0.8);
    overflow: hidden;
    transition: var(--slowTransTime);
}

.overlay-content {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*top: 25%;*/
    width: 100%;
    text-align: center;
    transition: var(--transTime);
}

.menuItem0 {
    padding:1vh 1vh;
    margin: 0 0;
    transition: var(--transTime);
}

.menuItem1 {
    padding:1vh 1vh;
    margin: 5vh 0;
    transition: var(--transTime);
    background-color: rgba(0,0,0, 0);
    border: 0.3vh solid var(--themeBorder);
    border-radius: 50px;
}

.menuItem1:hover, .menuItem1:focus {
    background-color: var(--themeBorder);
}

.menuItem1:hover h1 {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    transition: var(--transTime);
}

.menuItem1 a{
    text-decoration: none;
    display: block;
    padding: 0 2vh;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay h1 {
    margin: 1.5vh 0;
    padding: 1.5vh 0;
    font-size: 3vh;
    color: var(--themeBorder);
    font-weight: 100;
}

.socialLogo {
    transition: var(--transTime);
    width: 10vh;
    max-width:100%;
    /*-webkit-filter: drop-shadow(1px 1px 0px var(--themeBorder)) drop-shadow(-1px -1px 0 var(--themeBorder)) drop-shadow(-1px 1px 0px var(--themeBorder)) drop-shadow(1px -1px 0 var(--themeBorder));
    filter: drop-shadow(1px 1px 0 var(--themeBorder);) drop-shadow(-1px -1px 0 var(--themeBorder);) drop-shadow(-1px 1px 0px var(--themeBorder);) drop-shadow(1px -1px 0 var(--themeBorder););*/
    border: 0.3vh solid rgba(65,65,65,1);;
    border-radius: 100%;
    background-color: rgba(0,0,0,0);
}

.socialLogo:hover{
    transition: var(--transTime);
    -webkit-filter: invert(100%);
    filter: invert(100%);
    background-color: rgba(1,1,1,1);
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
}

#downButton {
    background-color: var(--themeColor);
    transition: var(--fastTransTime);
}
#downButton:hover {
    background-color: rgba(255,255,255,1);
    cursor: pointer;
    transition: var(--fastTransTime);
}
#downButton:hover #downButtonImg {
    -webkit-filter: invert(100%);
    filter: invert(100%);
    transition: var(--fastTransTime);
}
#downButtonImg {
    height: calc((10vh - 4vw));
    max-height: 7vh;
    min-height: 5vh;
    font-size: 10vh;
    transition: var(--fastTransTime);
}

/* Image Filters*/
/* http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css */
/*Filter styles*/
.saturate {-webkit-filter: saturate(0); filter: saturate(0);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%)}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}