/* animation: name duration timing-function delay iteration-count direction */
.flex-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.flex-container > div{
  max-width: 150px;
}

#portalTable{
width: 35%;
margin: 0 auto;
}

td{
padding: 12px;
}

@font-face{

font-family: "Super Mario";
src: url(TypefaceMarioWorldPixelOutlineRegular-MVzKp.ttf);

}

*{
font-family: 'Comic Sans MS'; 
text-align: center;
}

body {
background-image: url(https://dorgon.neocities.org/images/mainsite/generic_space_background.gif);
color: white;
}

#bigTitle {
font-family: "Super Mario"!important;
padding-top: 300px;
font-size: 56px;
}

#blog {
padding-bottom: 8px;
}

#www {
font-size: 12px;
}

a{
color: blue;
}

a:hover{
animation: colorchange 3s linear 0s infinite normal;
}

/* the planets */

#mercury {
position: absolute;
left: -15px;
top: 155px;
z-index: 2;
}

#venus{
position: absolute;
left: -15px;
top: 155px;
z-index: 2;
}

#earth{
position: absolute;
left: -17.5px;
top: 150px;
z-index: 2;
}

#mars{
position: absolute;
left: -17.5px;
top: 150px;
z-index: 2;
}

#jupiter{
position: absolute;
left: -70px;
top: 100px;
z-index: 2;
}

#saturn{
position: absolute;
left: -220px;
top: 10px;
z-index: 2;
}

#uranus{
position: absolute;
left: -55px;
top: 100px;
z-index: 2;
}

#neptune{
position: absolute;
left: -50px;
top: 100px;
z-index: 2;
}

#mercurystring{
position: absolute;
left: 65px;
top: 0px;
z-index: 1;

}

#venusstring{
position: absolute;
left: 165px;
top: 0px;
z-index: 1;
}

#earthstring{
position: absolute;
left: 267.5px;
top: 0px;
z-index: 1;
}

#marsstring{
position: absolute;
left: 367.5px;
top: 0px;
z-index: 1;
}

#jupiterstring{
position: absolute;
left: 570px;
top: 0px;
z-index: 1;
}

#saturnstring{
position: absolute;
left: 890px;
top: 0px;
z-index: 1;
}

#uranusstring{
position: absolute;
left: 1205px;
top: 0px;
z-index: 1;
}

#neptunestring{
position: absolute;
left: 1400px;
top: 0px;
z-index: 1;
}

/* decorative space stuff*/

#rocket{
position: absolute;
top:650px;
left: 200px;
}

#planet1{
position: absolute;
top: 550px;
left: 375px;
}

#star1{
position: absolute;
top: 450px;
right: 250px;
}

#satellite1{
position: absolute;
top: 675px;
right: 365px;
}

#satellite2{
position: absolute;
top: 775px;
left: 365px;
}

#star2{
position: absolute;
top: 825px;
right: 300px;
}

#ufo{
position: absolute;
top: 325px;
left: 125px;
}

#andromeda{
position: absolute;
top: 550px;
right: 100px;
}

#astronaut{
position: absolute;
top: 825px;
left: 425px;
}

/* animation: name duration timing-function delay iteration-count direction */
#mercurystring:hover {
animation: pendelum 8s ease-in-out 0s infinite normal;
transform-origin: 50% 0%;
}

#venusstring:hover {
animation: pendelum 8s ease-in-out 0s infinite reverse;
transform-origin: 50% 0%;
}

#earthstring:hover {
animation: pendelum 8s ease-in-out 0s infinite normal;
transform-origin: 50% 0%;
}

#marsstring:hover {
animation: pendelum 8s ease-in-out 0s infinite reverse;
transform-origin: 50% 0%;
}

#jupiterstring:hover {
animation: pendelum 10s ease-in-out 0s infinite normal;
transform-origin: 50% 0%;
}

#saturnstring:hover {
animation: pendelum 10s ease-in-out 0s infinite reverse;
transform-origin: 50% 0%;
}

#uranusstring:hover {
animation: pendelum 9s ease-in-out 0s infinite normal;
transform-origin: 50% 0%;
}

#neptunestring:hover {
animation: pendelum 9s ease-in-out 0s infinite reverse;
transform-origin: 50% 0%;
}

#footer1{
  font-size: 8px;
}

*::-webkit-scrollbar {
  width: 16px;
  
}

*::-webkit-scrollbar-corner {
  background: #dfdfdf;
}

*::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

*::-webkit-scrollbar-track {

  background-image: url(https://web.archive.org/web/20091020031437/http://es.geocities.com/pscartin/madrespace.gif);
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
display: block;
}

::-webkit-scrollbar-button:vertical:start {
height: 16px;
background-image: url(https://raw.githubusercontent.com/jdan/98.css/d39788c7886173b48399268d25c83874b1681a05/icon/button-up.svg);
}
::-webkit-scrollbar-button:vertical:end {
height: 16px;
background-image: url(https://raw.githubusercontent.com/jdan/98.css/d39788c7886173b48399268d25c83874b1681a05/icon/button-down.svg);
}
::-webkit-scrollbar-button:horizontal:start {
width: 16px;
background-image: url(https://raw.githubusercontent.com/jdan/98.css/d39788c7886173b48399268d25c83874b1681a05/icon/button-left.svg);
}
::-webkit-scrollbar-button:horizontal:end {
width: 16px;
background-image: url(https://raw.githubusercontent.com/jdan/98.css/d39788c7886173b48399268d25c83874b1681a05/icon/button-right.svg);
}
/*credit: https://github.com/jdan/98.css/blob/main/style.css*/

@keyframes pendelum{
0%{
transform: rotate(-15deg);
}
10%{
transform: rotate(15deg);
}
20%{
transform: rotate(-15deg);
}
30%{
transform: rotate(15deg);
}
40%{
transform: rotate(-15deg);
}
50%{
transform: rotate(15deg);
}
60%{
transform: rotate(-15deg);
}
70%{
transform: rotate(15deg);
}
80%{
transform: rotate(-15deg);
}
90%{
transform: rotate(15deg);
}
100% {
transform: rotate(-15deg);
}
}

@keyframes colorchange{
0%{
color: blue;
}
50%{
color: yellow;
}
100%{
color:blue;
}
}