﻿
div#entryBackground {
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #000000 0%, #5e5e5e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #000000 0%,#5e5e5e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #000000 0%,#5e5e5e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#5e5e5e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    width: 100vw;
    height: 100vh;
    z-index:5;
    position:fixed;
}

center#backgroundCenter {
    vertical-align:middle;
    transform:translateY(35vh);
}

h2{
    font-size:x-large;
    margin-top:15px;
    margin-bottom:15px;
    opacity:0.3;
}

img#igLogo {
    width:35vw;
    z-index:7;
}

img#igSlogan {
    width:25vw;
    z-index:7;
}

p#clickHere{
    font-size:15px;
    color:white;
    margin-top:5vw;
    z-index:7;
}

.listLink{
    text-decoration:none;
    color:black;
}

.listDiv{
    width:20vw;
    margin-left:5vw;
    margin-bottom:30px;
}

.listLink::before{
    content: "❯ ";
}

html {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Fade in images animation */

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/* Slow pulse "click here" text */

.slowPulse{
    -webkit-animation-name: slowPulse;
    animation-name: slowPulse;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
}

@-webkit-keyframes slowPulse {

    0% { opacity: 0; }

    50% { opacity: 1; }

    100% { opacity: 0; }
}

@keyframes slowPulse {

    0% { opacity: 0; }

    50% { opacity: 1; }

    100% { opacity: 0; }
}

/* Fade out animation for the background */

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeOut {

    0% { opacity: 1; }

    100% {
        opacity: 0;
        visibility:hidden;
    }
}

@keyframes fadeOut {

    0% { opacity: 1; }

    100% {
        opacity: 0;
        visibility:hidden;
    }
}

/* Webpages' links animations */

.jumpRight {
    -webkit-animation-name: jumpRight;
    animation-name: jumpRight;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes jumpRight {

    0% {
        -webkit-transform: none;
        transform: none;
    }

    100% {
        -webkit-transform: translateX(3vw);
        transform: translateX(3vw);
    }
}

@keyframes jumpRight {
    
    0% {
        -webkit-transform: none;
        transform: none;
    }

    100% {
        -webkit-transform: translateX(3vw);
        transform: translateX(3vw);
    }
}

.jumpLeft {
    -webkit-animation-name: jumpLeft;
    animation-name: jumpLeft;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes jumpLeft {

    0% {
        -webkit-transform: translateX(3vw);
        transform: translateX(3vw);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes jumpLeft {
    
    0% {
        -webkit-transform: translateX(3vw);
        transform: translateX(3vw);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

/* Moving white circles' animation */

.movingCircle {
    -webkit-animation-name: movingCircle;
    animation-name: movingCircle;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 60s;
    animation-duration: 60s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    z-index:6;
}

@-webkit-keyframes movingCircle {

    0% {
        -webkit-transform: none;
        transform: none;
    }

    100% {
        -webkit-transform: translate3d(3000px, 50vh, 0);
        transform: translate3d(3000px, 50vh, 0);
    }
}

@keyframes movingCircle {
    
    0% {
        -webkit-transform: none;
        transform: none;
    }

    100% {
        -webkit-transform: translate3d(3000px, 50vh, 0);
        transform: translate3d(3000px, 50vh, 0);
    }
}
