/* Style page content */
html {
	width: 100vw; /* Disable page size change when scrollbar appears */
	overflow-x: hidden; /* Disable horizontal scroll */
}
.main {
        margin-left: 160px; /* Same as the width of the sidebar */
        padding: 0px 10px;
}

body {
        max-width: 960px;
        margin: 0 auto;
        background-image: url('assets/background.png');
        font-family: Tahoma, Verdana, Arial, sans-serif;

}

/* Show different elements on desktop or mobile */
@media (hover:none) {
	.desktop_display {
		display:none;
	}
}
@media (hover:hover) {
        .mobile_display {
                display:none;
        }
}


/* Rainbow text */
.rainbow_text {
    animation: color-change 1s infinite;
}
@keyframes color-change {
  0% { color: red; }
  15% { color: orange; }
  30% { color: yellow; }
  45% { color: green; }
  60% { color: blue; }
  75% { color: purple; }
  100% { color: red; }
}

/* Create expandable sections of page (click to expand\collapse) */
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
}

details > summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
    background-color: #ddd;
    border-radius: 4px;
    cursor: pointer;
}

details > summary:hover {
    background-color: #ccc;
}

details[open] {
    padding: 0.5em;
    background-color: #ddd;
    border-radius: 4px;
}

details[open] > summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
}

/* DVD bounding animation */
@keyframes hor-movement {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: 100%;
  }
}

@keyframes ver-movement {
  from {
    margin-bottom: 0%;
  }
  to {
    margin-bottom: 100%;
  }
}

.bouncing {
  animation-name: hor-movement, ver-movement;
  animation-duration: 3.141s, 1.414s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

/* Rotating image */
.spinning_image {
  animation: rotation 4s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}