/*
Created for AMMRF/myScopeOutreach by Andres Vasquez
andres.vasquez@sydney.edu.au  —— www.andresvasquez.net ——
*/

@keyframes circle {
    to {
        transform: rotate(360deg);
    }
}
@keyframes updown1 {
    to {
        transform: translateY(200px);
    }
}
@keyframes updown2 {
    to {
        transform: translate(160px, 100px);
    }
}
@keyframes updown3 {
    to {
        transform: translate(-80px, 50px);
    }
}
#atom {
    position: absolute;
    left: 400px;
    top: 150px;
    opacity: 0;
    /*    display: none;*/
    /*    z-index: 18;*/
}
#nucleus {
    position: absolute;
    left: 310px;
    top: 200px;
    /*    display: none;*/
    z-index: 17;
}
figure {
    /*     border-style: solid;*/
    transform-origin: center;
    position: absolute;
    background-color: lightblue;
}
#electron1 {
    /*    border-color: red;*/
    animation: updown1 1s infinite ease-in-out alternate;
    top: 50px;
    left: 300px;
    z-index: 18;
}
#electron2 {
    /*    border-color: blue;*/
    animation: updown2 0.5s infinite ease-in-out alternate;
    top: 100px;
    left: 200px;
    z-index: 18;
}
#electron3 {
    /*    border-color: green;*/
    animation: updown3 0.75s infinite ease-in-out alternate;
    top: 200px;
    left: 400px;
}
#redball {
    position: absolute;
    z-index: auto;
    width: 50px;
    height: 50px;
    /*	border-radius: 50%; background: red;*/
    transform-origin: center 150%;
    animation: circle 2s infinite linear;
}
#blueball {
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 50px;
    /*	border-radius: 50%; background: blue;*/
    transform-origin: center 210%;
    animation: circle 1s infinite linear;
    /*    transform: rotate(60deg)*/
}
#greenball {
    position: absolute;
    z-index: 2;
    width: 50px;
    height: 50px;
    /*	border-radius: 50%; background: green;*/
    transform-origin: center -100%;
    animation: circle 1.5s infinite linear;
    /*    transform: rotate(60deg)*/
}
/* ------------- end tooltip ----------------------- */

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      87   181    275    369    463    */

@media only screen and (min-width: 480px) and (max-width: 769px) {
    #atom {
        left: -100px;
        top: 455px;
    }
}
/*  ----------------------------------------------------------------------------------*/

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 25px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      99   197    295    */

@media only screen and (max-width: 479px) {
    #atom {
        left: -195px;
        top: 600px;
    }
}