@font-face {
src: url(https://dl.dropbox.com/s/8p8mi5uzbekohv7/Starborn.ttf);
  font-family: starborn;}

@font-face {
  font-family:futurefont;
  src :url(futurefont.otf)
}


#welcomescreen {
  position: absolute;
  z-index: 9;
  background-image:url(https://i.pinimg.com/originals/51/dc/4b/51dc4be3e21778576cded73ba31f9768.png);
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  border: 1px solid #d3d3d3;
  padding: 10px;
  border-radius: 20px;
  width:450px;
  height: 800px;
  flex-direction:column;
}

#welcomescreenheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
   font-family: 'gorditas',sans-serif;
   font-size: 45px;
   
}

#welcomediv {
  background-color:rgba(135,206,250,0.9);
  width:fit-content;
  border-radius:20px;
  max-width: 450px ; 
  max-width: 600px ;
  padding:5px ; 
}

#welcometext {
color:rgba(230,101,54,0.85);
font-family:'gorditas',sans-serif;
font-size: larger;
word-break: normal ;
}

#rainbowCursor{
  z-index:9999;
  width:100%;
  height:100%;
  position:absolute;
  pointer-events: none;
}

.header { 
  display: flex; 
  justify-content: flex-start ;
  backdrop-filter: blur 20px ;
  background-color: rgba(230,101,54,0.85);
  backdrop-filter:brightness(3) ;
  border-radius: 20px ;
}

#OSname {
  margin-left: 130px;
  background-color: rgba(135,206,250,0.9) ;
  border-radius:20px ;
  padding: 5px;
  font-family:'gorditas', sans-serif;
}

#timerstyle {
 background-color: rgba(135,206,250,0.9);
 border-radius: 20px;
margin-left: 16px ;
padding: 6px ; 
font-family:'gorditas', sans-serif;
}

.timeElement {
   background-color: rgba(135,206,250,0.9);
   border-radius: 20px;
    margin-left: 360px ;
     padding: 6px ;
      font-family:'gorditas', sans-serif;
      width:300px;
      position: fixed;
}

.positionfixed {
display: flex;
justify-content: space-evenly;
}

.buttonvid {
background-color: lightskyblue ;
border-radius: 40px ;
width:fit-content;
font-family:'gorditas',sans-serif; 
color:rgba(230,101,54,0.85);
}

.buttonmed {
background-color: lightskyblue ;
border-radius: 40px ;
width:fit-content;
font-family:'gorditas',sans-serif;
color:rgba(230,101,54,0.85);
}

.quote {
 margin-left: 10px;
}

.quotetext {
padding: 5px ;
 background-color: lightskyblue;
 border-radius: 20px ; 
 font-family:'gorditas',sans-serif;  
 color:rgba(230,101,54,0.85);
}

.sunglass {
 height:79px;
 width:80px;
 position:absolute;
 left:16px;
 z-index: 9;
 cursor: pointer;
}

.runningGIF {
 height: 120px;
 width: 120px ;
 position:absolute;
 top: -35px;
 left: 675px;
}

.closewindow {
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
  height:30;
  width:30;
}

.notesIcon {
  text-align:center;
  width: 120px;
  height: 105px;
  padding: 5px ;
  border-radius:20px;
  background-color:rgba(60,9,108,0.85);
  margin-top:5px;
}

.notesopen {
width:fit-content;
height:fit-content;
}

.twilghtnotes {
  width:80px ;
  height:85px;
  cursor: pointer;
}

.noteswording {
font-family:'gorditas',sans-serif;
color:rgba(199,157,215);
margin-top:1px;
}

#noteswindows {
background-image:url(https://i.pinimg.com/originals/3d/82/f0/3d82f0cf6ed646bc996c01c4a898bb22.jpg);
background-size: cover;
width:500px;
height:700px;
border-radius:20px;
padding:10px;
position:absolute;
z-index:10;
display:none;
flex-direction:column;
top:95px;
left:280px;
}

.notesheader {
  background-image:url(); 
  background-color:violet;
  text-align:center;
  font-family:'gorditas',sans-serif;
  font-size:30px ;
  border-radius:20px;
  border: 2px solid rgba(135,206,250);
  cursor:move;
}

.notescontent {
  background-image:url();
  background-color:rgba(199,157,215);
  border-radius:20px;
  width:fit-content;
  height:fit-content;
}

.notescontentbotbar {
  background-image:url();
  background-color:violet;
  border-radius:20px;
  position:absolute;
  align-items:bottom;
  text-align:center;
}

.addnotes {
  border-radius:20px;
  background-color:rgba(60,9,108,0.85);
  font-family:'gorditas',sans-serif;
  cursor:pointer;
}

#noteDialog {
  background:transparent;
  border:none;
  padding:0px;
}

#dialog-content {
  background-color:purple;
  border-radius:28px;
  padding-left:10px;
  padding-right:10px;
  border:dotted black ;
  border-width:thick;
  overflow:hidden;
}

.dialog-title {
  background-color:rgba(93, 63, 211);
  border-radius:20px;
  padding:2px;
  font-family:starborn;

}

.close-button {
background-color:rgba(127,0,255);
border-radius:40px;
height:30px;
width:30px;
}

#noteform {
 background-color:rgba(218,112,214);
 background-image:url();
 border-radius:20px;
 font-family:starborn;
}

.form-label { 
background-color:rgba(195,177,225);
border-radius:20px;
padding:3px;
}

.form-input {
background-color:rgba(224,176,255);
width:250px;
font-family:starborn;
}

.form-group { 
padding:8px;
} 

.position {
 background-color:rgba(195,177,225);
  border-radius:20px;
  padding:3px;
  width:fit-content;
  margin-right:5px;
  vertical-align:top;
}


.form-textarea {
background-color:rgba(224,176,255);
width:200px;
height:100px;
min-width:200px;
min-height:100px;
font-family:starborn;
font-size:small;
border-radius:5px;
}

.cancel-button { 
background-color:red;
color:white;
margin:5px;
border-radius:20px;
font-family:starborn;
} 

.save-button {
background-color:limegreen;
color:white;
border-radius:20px;
font-family:starborn;
}

.empty-state {
background-color:pink;
background-image:url("blankState.png");
background-size:cover;
text-align:center;
width:500px;
height:268px;
font-family:starborn;
border-radius:20px;
}

.position2 {
 font-family:starborn;
 margin-top:60px;
 width:300px;
}

.add-note-button {
  background-color:lightskyblue;
  padding:10px;
  border-radius:20px;
  font-family:starborn;
  margin-top:45px;
  margin-left:220px;

}

.edit-button {
  background-color:rgba(159,43,104);
  border-radius:80px;
  color:gold;
  padding:6px;
  font-family:starborn;
}

.delete-button { 
background-color:rgba(159,43,104);
border-radius:80px;
color:gold;
padding:6px;
font-family:starborn;
}

.note-card {
background-image:url("noteBCG.png");
background-size:cover;
min-width:40px;
max-width:140px;
padding:5px;
border:orchid solid 2px ;
border-radius:5px;
position:relative;
margin-top:5px;
height:160px;
}

.note-title {
overflow-y:auto;
overflow-x:auto;
white-space:nowrap;
padding-bottom:10px;
max-height:20px;
font-family:'gorditas';
}

.note-content {
background-color:rgba(255,255,143,0.3);
overflow-wrap:break-word;
max-height:60px;
overflow:scroll;
margin-bottom:5px;
font-family:'gorditas';
border-radius:20px;
}

.notes-grid {
  display: grid;
  grid-auto-flow:column;
  grid-template-rows: repeat(3,1fr);
  gap:10px;
  height:700px;
}

#rolling {
 background-color: rgba(135,206,250,0.95);
 border-radius: 5px;
 width:290px; 
 font-family:starborn;
 margin-top:50px;
 margin-left:680px;
 padding-left:20px;
 height: 20px;
 font-family:starborn;
 font-size:small;
 border: solid white 2px;
}

.rollingtextquote {
  background-image:url("quote.png");
  background-size:270px;
  padding-left:20px;
  padding-right:20px;
  border-radius:20px;
  height:40px;
  width:234px;
  text-align:center;
  align-content:center;
  position:absolute; 
  margin-left:1039px;
  margin-top:5px;
  z-index:20px;
} 

.link {
  font-family:'gorditas';
  text-decoration:none;
  color: black;
}

.musicOpen {
  background-color:rgba(49,103,204,0.85);
  height:fit-content;
  width:fit-content;
  margin-top:5px;
  border-radius:20px;
}

.musicIcon {
text-align:center;
color:rgba(0,234,216)
}

.spinningPony {
height:105px;
width:120px;
padding:5px 5px 0px 5px;
}

.musicIconText {
font-family:'gorditas';
margin-top:1px;
height:25px;
}

.musicWindows {
  background-color:rgba(40,40,43);
  display:none;
  width:450px;
  height:300px;
  position:absolute;
  top:95px;
  left:290px;
  padding:5px;
  border-radius:20px;
}

.disk {
width: 250px;
height: 250px;
object-fit: cover;
mask-image: url(https://i.postimg.cc/3RYpcLqS/14.png);
mask-size: 100%;
mask-repeat: no-repeat;
mask-position: center;
animation-duration: 3s;
animation-iteration-count: infinite;
}

.disk {
        animation-name: spin;
        animation-timing-function: linear;
    }
    @keyframes spin {
        from { transform: rotate(0deg) }
        to { transform: rotate(360deg) }
} 
 
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:absolute;
display:flex;
justify-content:flex-start;
background-color:paleturquoise;
padding: .2em;
border: 3px ridge #F38BC8;
border-style: inset;
margin: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
width:fit-content;
height:fit-content;
top:260px;
left:10px;
border-radius:20px;
}
 
#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
z-index: 12;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:18px;
cursor:pointer;
font-family:futurefont;
}
 
.playy, .pausee {font-family:futurefont; font-size: 1.1em; color: #F38BC8; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em; } /* color of play & pause buttons */
 
.pausee {display:none;}

.nextsong {
/* HTML: <div class="triangle"></div> */
  --r:1px; /* border radius */
  height: 14px;
  margin-left:5px;
  aspect-ratio: cos(30deg);
  --_g:calc(tan(60deg)*var(--r)) left var(--r),#000 98%,#0000 101%;
  mask:
    conic-gradient(from 60deg at calc(3*var(--r)/2 - 100%),#000 60deg,#0000 0)
     0 0/calc(100% - 3*var(--r)/2) 100% no-repeat,
    radial-gradient(var(--r) at calc(100% - 2*var(--r)) 50%,#000 98%,#0000 101%),
    radial-gradient(var(--r) at top    var(--_g)),
    radial-gradient(var(--r) at bottom var(--_g));
  clip-path: polygon(100% 50%,0 100%,0 0);
  background: linear-gradient(45deg, #F38BC8);
}
 
.pervsong {
  /* HTML: <div class="triangle"></div> */
  --r:1px; /* border radius */
  height: 14px;
  margin-left:5px;  aspect-ratio: cos(30deg);
  --_g:calc(tan(60deg)*var(--r)) right var(--r),#000 98%,#0000 101%;
  mask:
    conic-gradient(from 240deg at calc(200% - 3*var(--r)/2),#000 60deg,#0000 0)
     100% 0/calc(100% - 3*var(--r)/2) 100% no-repeat,
    radial-gradient(var(--r) at calc(2*var(--r)) 50%,#000 98%,#0000 101%),
    radial-gradient(var(--r) at top    var(--_g)),
    radial-gradient(var(--r) at bottom var(--_g));
  clip-path: polygon(0 50%,100% 100%,100% 0);
  background: linear-gradient(45deg, #F38BC8);
}


.sonata {
margin-left:0.4em;
font-family:futurefont;
font-size:12px;
font-weight:bold;
color:black; /* color of music note symbol */
}
 
.labeltext {
margin-left:0.5em;
position: relative;
bottom:0.1em;
font-size:14px;/* color of song title */
}

.chatOpen {
  background-color:rgba(239,111,47,0.85);
  height:fit-content;
  width:fit-content;
  margin-top:-10px;
  border-radius:20px;
}

.chatIcon {
  text-align:center;
  color:rgba(250,245,171)
}

.happyJack {
  height:105px;
  width:120px;
  padding:5px 5px 0px 5px;
}

.chatIconText {
  font-family:'gorditas';
  margin-top:1px;
  height:25px;
}

.chatWindows {
  background-image:url("construction.png");
  background-size:cover;
  display:none;
  position:absolute;
  width:680px;
  height:600px;
  top:95px;
  left:300px;
  border-radius:20px;
  padding:5px;
}