body {
color:#ffffff;
margin: 0;
font-size:24px;
background-image:url("images/gurblebg.png");
background-size:110%;
background-color: #0000ff;
position:relative;

}

/*the big boy*/
.wrapper {
width: 1200px;
margin: 0 auto;
}

.sidebar-img, .title, .links, .box {
margin-top: 25px;
margin: 0 auto;
}

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;

}


.title, .links, .footer {
text-align: center;
margin: 0 auto;
}

/*nav links*/
.links ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.links li {
display: inline-block;
}

.links .last:after {
content: "」";
}

.links li:before, .links li:after {
letter-spacing: 0.1em;
}

::-moz-selection { 
background-color: #ffa266; 
color: #ddd8a9;
}

::selection {
background-color: #ffa266;
color: #ddd8a9;
}

.box {
border: 1px solid black;
padding: 0.5em 1em;
}

.inner {
position: relative;
}

.inner::after {
content: url("images/exit.gif");
position: absolute;
top: -45px;
right: 0px;
left: 650px;
width: 100px;
height:50px;
background-size: 50px 25px;
}

button {
background-color:rgba(255, 162, 102);
color:white;
font-family:"basic";
font-size:16px;
color:#ddd8a9;
border-color:rgba(255, 162, 102);
padding: 0.2em;
}

button:hover {
border-color:#ffa266;
}

.secondary-inner {
position: relative;
}

.secondary-inner::after {
content: url("images/exit.gif");
position: absolute;
top: -65px;
right: 0px;
left: 880px;
width: 100px;
height:50px;
background-size: 50px 25px;
}

.box img, .sidebarleft img, .sidebarright img{
max-width: 100%;
height: auto;
}

.sidebarleft {
width: 200px;
float: left;
}

.sidebarright {
width: 200px;
float: right;
}

.fixednavigation {
  width: 200px;
  position: fixed;
}

.sidebar-image {
border: 1px solid black;
}

.sidebar-image img {
display: block;
}

/* wrapper. makes space for left and right sidebar.*/
.main-wrapper {
margin-left: 225px;
margin-right: 225px;
}

/* wrapper. makes space for ONLY right sidebar.*/
.secondary-wrapper {
margin-right: 225px;
}

.main {
columns: 2;
column-gap: 25px;
}

.main .box {
display: inline-block;
}

.single-column {
columns: 1;
}

.main-container {
min-height: 100dvh;
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* compensate footer height */
}

.footer {
background-color:#0000ff;
color:#ddd8a9;
position: absolute;
bottom:0;
width: 100%;
}

@media(max-width:915px) {
.wrapper {    
  width: 95%;
  }
  
.main-wrapper {
  width: calc(100% - 225px);
  }
}

@media (orientation: portrait), (max-width: 480px) {
.wrapper {
  width: 100%;
  }

.main-wrapper, .sidebarleft, .sidebarright{
  margin: 0 auto;
  width: 90%;
  }

.sidebarleft, .sidebarright {
  float: none;
  display: block;
  }

.sidebar-image {
  margin: 0 auto;
  width: 33%;
  margin-top:25px;
  }

.sidebarleft .sidebar-image img, .sidebarright .sidebar-image img {
  width: 100%;
  }
  


}

@media only screen and (max-width: 1026px) {
  .sidebarleft, .sidebarright {
      display: none;
  }
}

.box, .sidebar-image, .sidebar-image img {
  border: 0;
  border-radius: 0.4em;
  background: #ddd8a9;
  font-size: 20px;
}

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

h1{
  color: #ff00ee;
  line-height:15px;
}


/* links */

a{
  color: #e554ff;
}

/* link hover */
a:hover {
color: #d89261;
background-color: transparent;
text-decoration: underline;
}

.biglink {
  color: #0000ff;
  font-size: 30px;
}

.smalllink {
  color: #0000ff;
  font-size:20px;
}

h1 span { 
  background-color: blue; 
}

h3 span {
  background-color: blue;
  color: #ddd8a9;
}

  /* Marquee stuff */
.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 6s linear infinite;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* image hover and spin stuff */

img.spinning {
  cursor: pointer;
  width:150px;
  height:150px;
  animation: rotate 4s infinite linear;
  padding: 0px;
  
  --scale: 1;
  --transition-duration: 250ms;
  scale: var(--scale);
  transition:
  scale 
  var(--transition-duration) 
  ease-in-out;
}

img.spinning:hover {
  --scale: 1.1;
}


.img-hover-zoom {
--scale: 1;
--transition-duration: 250ms;
scale: var(--scale);
transition:
  scale 
  var(--transition-duration) 
  ease-in-out;
}

.img-hover-zoom:hover {
  --scale: 1.1;
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:static;
z-index:5
}

div.ex2 {
  padding: .5em;
  background-color: #54a6b9;
  border: 3px double rgba(255, 162, 102);
  color:white;
  text-align:center;
}

#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}

.music-controls {
user-select:none;
-webkit-user-select:none;
text-align:center;
cursor:pointer;
}

.playy, .pausee {color:#ffffff;} /* color of play & pause buttons */

.pausee {display:none;}

.sonata {
  font-style:italic;
  font-size:18px;
  color:#ffffff; /* color of music note symbol */
}

.labeltext {
  line-height:155%;
  font-size:12px;
  color:#ffffff; /* color of song title */
}

.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.art-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.grassbg
{
position:absolute;
bottom:0px;
left: 50%;
transform: translateX(-50%);
z-index:-1;
width:100vw;
}

#transformerbg-left
{
position:absolute;
left:-60px;
bottom:100px;
z-index:-2;
opacity: 50%;
height:50vw;
width:auto;
transform:scaleX(-1);
  
}

#transformerbg-left img
{
object-fit: fill;
display: none;
height:50vw;
}

#transformerbg-left img:first-child
{
display: block;
}


#transformerbg-right
{
position:absolute;
right:-40px;
bottom:100px;
z-index:-2;
opacity: 50%;
height:50vw;
width:auto;
}

#transformerbg-right img
{
  object-fit: fill;
  display: none;
  height:50vw;
}

#transformerbg-right img:first-child
{
display: block;
}


#lastphoto {
  padding: .25em;
  background-color: #54a6b9;
  border: 3px double rgba(255, 162, 102); 
  color:white;
}

#statuscafe {
  padding: .5em;
  background-color: #54a6b9;
  border: 3px double rgba(255, 162, 102); 
  color:white;
}

#statuscafe:link {
  color:white;
}

#statuscafe-username {
  margin-bottom: .5em;
  font-size: 12px;
  color: white;
}

#statuscafe-username a{
  margin-bottom: .5em;
  font-size: 12px;
  color: white;
}

#statuscafe-content {
  margin: 0.1em;
  font-size: 16px;
  color:white;
}

.image-fitter {
  object-fit: contain; 
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(5, auto); 
  width: 90%;
  margin-inline: auto;
  gap: 20px;
}

.right-arrow {
  display: inline-block;
  margin-left: auto;
}

.left-arrow {
  display: inline-block;
  margin-right: auto;
  transform:scaleX(-1);
}

.arrow-container {
  text-align:center;
}