* {
    box-sizing: border-box;
}

body{
    width: 100vw;
    height: 100vh;
    background-color: black;
    margin: 0%;
}

img{
    max-width: 100%;
}

.full{
    opacity: 0;
    position:fixed;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    transition: opacity 2s;
}

.galaxy{
    background-image: url(galaxy.gif);
    opacity: 1;
}

.sun{
    background-image: url(sun.gif);
}

.earth{
    background-image: url(earth.gif);
}

.atmo{
    background-image: url(atmo.gif);
}

.ny{
    background-image: url(ny.gif);
}

.city{
    background-image: url(city.gif);
}

.people{
    background-image: url(people.gif);
}

.dirt2{
    background-image: url(dirt2.gif);
}

.ant{
    background-image: url(ant.gif);
}


/*
    min-wisth = mobile-firstdesign
    - scalable
    - constrained form (result is most sites now look the same)

    max-width = desktop-first design
    - more work to make responsive
    - more diverse forms and layouts
*/

@media screen and (max-width:1300px) {
    .galaxy {opacity: 0;}
    .sun {opacity: 1;}
}

@media screen and (max-width:1200px) {
    .sun {opacity: 0;}
    .earth {opacity: 1;}
}

@media screen and (max-width:1100px) {
    .earth {opacity: 0;}
    .atmo {opacity: 1;}
}

@media screen and (max-width:1000px) {
    .atmo {opacity: 0;}
    .ny {opacity: 1;}
}

@media screen and (max-width:900px) {
    .ny {opacity: 0;}
    .city {opacity: 1;}
}

@media screen and (max-width:800px) {
    .ny {opacity: 0;}
    .people {opacity: 1;}
}

@media screen and (max-width:700px) {
    .people {opacity: 0;}
    .dirt2 {opacity: 1;}
}

@media screen and (max-width:600px) {
    .dirt2 {opacity: 0;}
    .ant {opacity: 1;}
}