body 
{
  background-color: white;
  color: black;
  font-family: Verdana;
}

body 
{
  overflow: hidden;
  background-image: url('pictures/bg2222.gif');
  background-position: center;
  background-size: 100%;
  min-height: 100vh;
  margin: 0;
}





@font-face 
{
  font-family: 'soopafre';
  src: url(https://dl.dropbox.com/s/fpgr6spck905sqg/soopafre.ttf);
}

@font-face 
{
  font-family: 'ring';
  src: url(https://dl.dropbox.com/s/j76dxwpephmv7gw/ring.ttf);
}

@font-face 
{
  font-family: 'cookies';
  src: url(https://dl.dropbox.com/s/dsfe2xnk0wpa5vr/Cookies.ttf);
}

@font-face 
{
  font-family: 'universe';
  src: url(https://dl.dropbox.com/s/b134x0u2z8fn25q/Boecklinsuniverse-x3jKm.ttf); 
}

@font-face 
{
  font-family: 'sant joan';
  src: url(https://dl.dropbox.com/s/o5umfqvcshf0ugj/SantJoanDespiRegular.woff);
}

::-webkit-scrollbar {
width: 15px;
}

::-webkit-scrollbar:horizontal {
height: 10px
}

::-webkit-scrollbar-corner {
background: transparent
}

::-webkit-scrollbar-track:vertical {
background: transparent
}

::-webkit-scrollbar-track:horizontal {
background: transparent
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 20px;
        border-radius: 20px;
        background: transparent;
  background-position: top;
  background-repeat: repeat;
        }

#leftbg
{
  background-color: transparent;
  background-image: radial-gradient(#fff 60%, transparent 70%); /* inner shadow */
  
  height: 58em;
  width: 50em;
position: absolute;
  left: 17em;
  top: .9em;
}

#rightbg
{
  background-color: transparent;
  background-image: radial-gradient(#fff 60%, transparent 70%); /* inner shadow */
  
  height: 58em;
  width: 30em;
position: absolute;
  left: 72em;
  top: .9em;
}

.leftbox
{
  background-color: white;
  
border-width: 7px;
border-style: solid; 
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round; 
  
  height: 56em;
  width: 44.5em;
position: absolute;
  left: 2em;
  top: .6em;
}

.rightbox
{
  background-color: white;

border-width: 7px;
border-style: solid; 
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round; 
  
  height: 56em;
  width: 26em;
position: absolute;
  left: 1.5em;
  top: .6em;
}

#lefttop
{
  background-color: transparent;
  
  height: 13.5em;
  width: 43.3em;
position: relative;
  left: .6em;
  top: .6em;
}

#lefttopmid
{
  background-color: transparent;
  
  height: 4.2em;
  width: 43.3em;
position: relative;
  left: .6em;
  top: 4.5em;
}

#leftmiddle
{
  background-color: grey;
  
  height: 20.8em;
  width: 43.3em;
position: relative;
  left: .6em;
  top: 4.95em;
}

#leftbottom
{
  background-color: transparent;
  
  height: 11.2em;
  width: 43.3em;
position: relative;
  left: .6em;
  top: 5.45em;
}


#righttop
{
  background-color: transparent;
  
  height: 27.2em;
  width: 24.9em;
position: relative;
  left: .6em;
  top: .6em;
}

.righttopl {
  background-color: #fefcee;
  
  height: 19.6em;
  width: 11.8em;
position: absolute;
  border: 2px inset;
}


.righttopr {
  background-color: #fefcee;
  
  height: 19.6em;
  width: 11.8em;
position: absolute;
  left: 12.8em;
  border: 2px outset;
}

#rightmiddle
{
  background-color: grey;
  
  height: 5em;
  width: 24.9em;
position: relative;
  left: .6em;
  top: 1.5em;
}

#rightbottom
{
  background: url('pictures/bg5.gif');
  
  height: 20.8em;
  width: 24.9em;
position: relative;
  left: .6em;
  top: 2em;
}

@-webkit-keyframes waveAnimation{
from { background-position-x: 0%; }
to { background-position-x: 200%; }
}

@keyframes waveAnimation{
from { background-position-x: 0%; }
to { background-position-x: 200%; }
}



#clock {
font-family: 'universe';
background-color: transparent;
border: solid #999999 1px;
color: #000000;
width: 185px;
padding: 10px;
text-align: center;

border-width: 7px; 
border-style: solid; 
border-image: url("https://i.imgur.com/ROjUrNz.gif") 7 fill round;
}
#date {
font-size: 20px;
font-weight: bold;
font-family: 'sant joan';
color: white;
-webkit-text-stroke: .001px black;
}
#time {
font-size: 42px;
font-family: 'soopafre';

color: transparent;
background: url("https://files.catbox.moe/db8ne8.png") repeat-x #fff;
background-clip: border-box;
background-size: 200% 100%;

background-clip: text;
-webkit-background-clip: text;
transition: background-position-y 0.6s ease;
-webkit-transition: background-position-y 0.6s ease;
animation: waveAnimation 4s infinite linear;
-webkit-animation: waveAnimation 4s infinite linear;

-webkit-animation-play-state: running;
animation-play-state: running;

/* below just adds the outlines */
filter: drop-shadow(1px 1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white)
drop-shadow(1px 1px black) drop-shadow(-1px 1px black) drop-shadow(1px -1px black) drop-shadow(-1px -1px black);
}



.clockborder
{
  background-color: transparent;
  
border-width: 7px; 
border-style: solid; 
border-image: url("pictures/bor8.png") 7 fill round;
  
  height: 20em;
  width: 24em;
position: relative;
  left: 0em;
  top: 0em;
}




.gallery { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  width:730px; /* this can be modified to make the gallery wider */
  height: 17.5em;
  overflow-y: scroll;
  overflow-x: hidden;
}

.gallery img {
  width:130px; /* this sets the width for every image */
  height:130px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.gallery > div {
  width:130px; /* this should match the image height */
  height:130px; /* this should match the image width */
  margin-right:10px; /* this controls the gaps between the images */
  margin-bottom:10px; /* this controls the gaps between the images */
}




#glenplayer02 {
position:relative;
top:-265px;
width:150px;
z-index:5;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}
div.ex2 {
width: 170px;
opacity:1;
margin: auto;
padding:5px;
}
#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:13px;
cursor:pointer;
}
 
.playy, .pausee {color:#FBD9E6; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;} /* color of play & pause buttons */
 
.pausee {display:none;}
 
.sonata {
margin-left:10px;
color:#222; /* color of music note symbol */
}
 
.labeltext {
margin-left:8px;
font-family:courier new;
font-size:9px;
color:#222; /* color of song title */
}
 

.stamp {
height: 56px;
width: 99px;
}


.pinkwave {
font-size: 2.25em;
font-weight: bold;
font-family: 'soopafre';

color: transparent;
background: url("https://files.catbox.moe/db8ne8.png") repeat-x #fff;
background-clip: border-box;
background-size: 200% 100%;

background-clip: text;
-webkit-background-clip: text;
transition: background-position-y 0.6s ease;
-webkit-transition: background-position-y 0.6s ease;
animation: waveAnimation 4s infinite linear;
-webkit-animation: waveAnimation 4s infinite linear;

-webkit-animation-play-state: running;
animation-play-state: running;

/* below just adds the outlines */
filter: drop-shadow(1px 1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white)
drop-shadow(1px 1px black) drop-shadow(-1px 1px black) drop-shadow(1px -1px black) drop-shadow(-1px -1px black);
}

@-webkit-keyframes waveAnimation{
from { background-position-x: 0%; }
to { background-position-x: 200%; }
}

@keyframes waveAnimation{
from { background-position-x: 0%; }
to { background-position-x: 200%; }
}


  #button {
    font-family: 'sant joan';
    border: 2px outset;
    box-shadow: 0px 0px 2px #000;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    color: #fdf0f6; /* color font */
    background-color: #F8E0F7;
    border-radius: 100px;
    background: linear-gradient(180deg, #b9dae7 0%, #fff 100%);
    /* change this if you want */
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    cursor: pointer;
    /* you can change this to hidden or pointer */
    text-decoration: none;
    letter-spacing: normal;
    transition: .3s;
    text-align: center;
    width: 7.5em;
    height: 1.4em;
  }
  
    #button:hover {
    font-family: 'soopafre';
cursor: url('https://cdn.cursors-4u.net/previews/mac-os-x-handwriting-b5d45d78-32.webp') 35 36, auto !important;
    letter-spacing: 1.5px;
    border: 2px inset;
  }



@transition-time:0.4s;


.main-container {
  margin:4em auto 0 auto;
  width:650px;
  .controls {
    margin:0 auto;
    padding:2em 0 0 0;
    text-align:center;
  }
}

.coverflow-container {
  box-reflect:below 0px -webkit-linear-gradient(top, rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
}

label {
	color:#999;
  display:inline-block;
  padding:10px;
  border:1px solid black;
  cursor:pointer;
  background:#252525;
  text-shadow:1px 1px 2px rgba(0,0,0,0.9);
  &:hover {
    color:#FFF;
  }
}

.coverflow-list {
  width:100%;
  .coverflow-item {
    display:inline-block;
    background:#414141;
    margin:0 -50px;
    position:relative;
    .album-cover {
      display:block;
      height:150px;
      margin:0;
      img {
        height:150px;
        width:150px;
        opacity:0.5;
      }
    }
    .album-name {
      text-align:center;
      display:block;
      color:#fdf0f6;
    }
    label {
    	padding:0;
      border:none;
      display:block;
      text-shadow:none;
    }
  }
}
/* Now apply 3D transforms (never done this before!) */
.coverflow-list {
	-webkit-transform: perspective(900px);
  -webkit-transform-style: preserve-3d;
  -webkit-perspective-origin: 100% 30%;
  .coverflow-item {
    -webkit-transition: all @transition-time ease;
    background:#212121;
    -webkit-transform: rotateY(45deg);
  }
}

input[type="radio"] {
  display:none;
  &:checked {
    + .coverflow-item {
      -webkit-transform: rotateY( 0deg );
      margin:0 auto;
      background:#313131;
      transition:all @transition-time ease;
      img { opacity:1; }
      figcaption { color:#b9dae7; }
      ~ .coverflow-item {
      	-webkit-transform:rotateY(-45deg);
        background:#515151;
      }
    }
  }
}

/*@keyframes cover-forward {
  0% { transform: rotateY( 45deg ); }
  50% { transform: rotateY( 0deg ) translate3d( 60px,0,0 ) scale3d(1.2,1.2,1.2); z-index:999; }
  100% { transform: rotateY( 45deg ) translate3d( 0,0,0 ) scale3d(1,1,1); }
}

@keyframes cover-return {
  0% { transform: rotateY( 45deg ); }
  100% { transform: rotateY( 0deg ) translate3d( 150px,0,0 ) scale3d(1.2,1.2,1.2); }
}*/