/************************************************************* 
NAVBAR
*************************************************************/

.navbar-toggler {
    border: none; 
}

.navbar-toggler-icon {
    width: 60px; 
    height: 60px;
}

.nav-image {
    width: 200px;
}

#links-button {
    width: 100%;
}


/************************************************************* 
INDEX
*************************************************************/

.container {
    max-width: 800px;
}

#covidStats {
    margin-top: 20px;
}

.earthImg {
    width: 110px;
    height: 110px;
}

.stats {
    /* border: 1px solid greenyellow; */
    font-family: 'Fira Code', monospace;
    font-size: .7em;
    margin: auto 0;
    color: yellow;
}

#date {
    font-size: 1.1em;
}

.statIcon {
    width: 1.1em;
    height: 1.1em;
    margin-left: 12px;
}


/************************************************************* 
LIVING ROOM
*************************************************************/

#livingRoom-body {
    background-image: url("/images/background-min.png");
    background-position: center;

    background-color: rgb(112, 174, 199); 
}

#livingRoom-div {
    width: 100%;
    height: 100%;
}


/************************************************************* 
GALLERY
*************************************************************/

#imageGallery {
    border: 1px rgba(255, 0, 0, 0) solid; 
    
    background-image: url("/images/frame-min.png");

    background-position: center;
    background-repeat: no-repeat; 
    background-size: contain; 

    width: 90%;
}

#image-container {
    position: relative;

    margin: 30px 9px; 
    width: 90%; 

    z-index: -1; ;
}

.photo {
    margin: 0 auto; 
}

/************************************************************* 
ADPOD
*************************************************************/

#space-nav {
    width: 100%;
    position: fixed; 
    z-index: 1;
}

.apod {
    height: 100%;
    width: 100%;  
    background-repeat: no-repeat;
    background-position: center;
    position: fixed;
    background-size: cover;
    z-index: -2;
}

/* desert background */
#apodBG {
    width: 100%; 
    position: fixed; 
    left: 0; 
    bottom: 0;  
    z-index: -1;
}

#arnold-div,
#dusty-div {
    width: 150px; 
    margin: 0;
    position: fixed; 
}

#dusty-div {

    /* Dusty starting position */
    top: 100px;  
    left: 50px;

    /* dusty spin */
    animation-name: dustySpin;
    animation-duration: 30000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes dustySpin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

#arnold-div {
    /* Arnold starting position */
    /* position: fixed; */
    bottom: 20px;  
    right: -150px;

    animation-name: arnoldSpin;
    animation-duration: 100000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes arnoldSpin {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}

.spaceDog-img {
    width: 100%; 
}

/************************************************************* 
PSOP
*************************************************************/

#psop-body {
    background-image: linear-gradient(dodgerblue, lightskyblue);
}

.clouds {
    position: absolute; 
    z-index: -1;

    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    animation-direction: normal; 
}

#cloud1 {
    top: 10;
    left: -620;
    animation-name: cloud1Float;
    animation-duration: 25000ms;
}

@keyframes cloud1Float {
    to {top: 10; left: 1200}
}

#cloud2 {
    top: 50;
    left: -1220;
    
    animation-name: cloud2Float;
    animation-duration: 34000ms;
}

@keyframes cloud2Float {
    to {top: 50; left: 1200}
}

#cloud3 {
    top: 120;
    left: -420;
    animation-name: cloud3Float;
    animation-duration: 26000ms;
}

@keyframes cloud3Float {
    to {top: 120; left: 1200}
}

#cloud4 {
    top: 180;
    left: -920;
    animation-name: cloud4Float;
    animation-duration: 33000ms;
}

@keyframes cloud4Float {
    to {top: 180; left: 1200}
}

#cloud5 {
    top: 250;
    left: -720;
    animation-name: cloud5Float;
    animation-duration: 27000ms;
}

@keyframes cloud5Float {
    to {top: 250; left: 1200}
}

#cloud6 {
    top: 300;
    left: -820;
    animation-name: cloud6Float;
    animation-duration: 32000ms;
}

@keyframes cloud6Float {
    to {top: 300; left: 1200}
}

#cloud7 {
    top: 340;
    left: -420;
    animation-name: cloud7Float;
    animation-duration: 25000ms;
}

@keyframes cloud7Float {
    to {top: 340; left: 1200}
}

#cloud8 {
    top: 410;
    left: -1120;
    animation-name: cloud8Float;
    animation-duration: 40000ms;
}

@keyframes cloud8Float {
    to {top: 410; left: 1200}
}

#airplane-container {
    position: relative;

    top: 100px;
    left: 50px; 

    animation-name: flyingPlane;
    animation-duration: 15000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes flyingPlane {

    to { top: 0; left: 50; }
}

#airplane {
    width: 900px;
}

.passenger-container {
    display: flex;
    width: 185px;
    height: 40px;
    position: absolute; 
    top: 155;
    left: 36;
}

#pilot {
    height: 74%;
    margin-left: 0; 
}

#pilot,
#passenger-6,
#passenger-13 {
    margin-right: 60px;
}

.passengers {
    height: 100%;

    justify-content: space-between; 
    
    margin: 0 5px; 
}

.image-source-link {
	color: #98C3D1;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	/*transition speed should match zoom duration */
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}