/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 10, 2022 */

@font-face {
    font-family: 'rainyheartsmedium';
    src: url('rainyhearts.woff') format('woff'),
		url('rainyhearts.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 16, 2022 */

@font-face {
    font-family: 'cute_fontmedium';
    src: url('cute_font.woff2') format('woff2'),
         url('cute_font.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
font-family: 'rainyheartsmedium';
font-size: 20px;
background-image: url('../images/bg/bgclouds.jpg');
background-color: #020514;
background-size: cover;
text-shadow: 1px 1px 0px #ddd;
text-align: center;
}

h1 {		/* SITE TITLE */
font-family: 'Reenie Beanie';
font-size: 50px;	
text-decoration: none;
font-weight: bolder;
font-style: normal;
color: white;
line-height: 8px;
text-align: left;
text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
margin-bottom: -10px;
text-indent: 90px;
}

h2 {		/* NAVIGATION LINKS SIDE */
font-family: 'cute_fontmedium';
font-size: 35px;	
text-decoration: none;
font-weight: bold;
font-style: normal;
color: white;
line-height: 8px;
text-align: center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

margin-bottom: 10px;
margin-top: 10px;

background: pink;
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,192,203,1) 25%, rgba(255,192,203,1) 50%, rgba(255,192,203,1) 75%, rgba(0,0,0,0) 100%);
}

h3 {		/* MAIN PAGE TITLES */
font-family: 'cute_fontmedium';
font-size: 30px;	
background: pink;
text-decoration: none;
font-weight: bold;
font-style: normal;
color: white;
line-height: 8px;
text-align: left;
margin-right: 5px;
margin-left: 5px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

a {
text-decoration: none;
color: inherit;
}

a:hover {
color: pink;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}


#headerimg {		/* HEADER IMG */
text-align: left;
height: 0px;
margin-left: -25px;
}

#title {		/* SITE TITLE */
left: 25px;
position: relative;
}

#linkcloud {		/* NAV LINKS TOP */

margin-left: 320px;
margin-top: -60px;
position: absolute;
float: right;

background-image: url('../images/bg/cloud_links3.png');
background-repeat: no-repeat; 
width: 376px;
height: 119px;

}

#links {
text-align: right;
font-family: 'cute_fontmedium';
font-size: 34px;	
text-decoration: none;
font-weight: bold;
font-style: normal;
color: white;
text-shadow: -1px 0 #B081B3, 0 1px #B081B3, 1px 0 #B081B3, 0 -1px #B081B3;
margin-top: 45px;
margin-right: 45px;
}

.container {
display: inline-block;
margin-top: 5%;
padding: 20px;
overflow: hidden;
height: 590px;
width: 1280px;

}

#cloud {
display: inline-block;
vertical-align: top;
text-align: center;
background-image:url('../images/bg/cloud_bg.png');
background-repeat: no-repeat;
height: 533px;
width: 716px;
padding: 0px;

}


#mainframe { 
border-radius: 5px; 
border: 0px dashed black;

height: 420px;
width: 500px;

background-size: auto;
background: transparent;

font-family: Reenie Beanie; 
font-size: 20px;
text-align: center;
vertical-align: top;

padding: 15px;
padding-top: 55px;


}

#cloudleft {	/* CREW NAV CONTAINER */
background-image: url('../images/bg/cloud_nav.png');
background-repeat: no-repeat; 

width: 419px;
height: 255px;

position: relative;

bottom: 290px;
left: -245px;

}

#crewtitle {		/* CREW NAV TITLE */
right: ;
top: 60px;
position: relative;
background-color: ;

font-family: 'cute_fontmedium';
font-size: 34px;	
text-decoration: none;
font-weight: bold;
font-style: normal;
color: white;
text-shadow: -1px 0 #B081B3, 0 1px #B081B3, 1px 0 #B081B3, 0 -1px #B081B3;
}

#leftcontainer {	/* CREW NAV LINKS */
height: 100px;
width: 250px;
display: table-cell;

top: 60px;
left: 88px;

vertical-align: middle;
color: #B081B3;
font-size: 16px;

overflow: hidden; 
position: relative;

line-height: 100%;

}


#cloudright {
background-image: url('../images/bg/cloud_right.png');
background-repeat: no-repeat; 


width: 460px;
height: 329px;

position: relative;

bottom: 690px;
left: 555px;

}

#navframe {
height: 170px;
width: 340px;

top: 75px;
right: 15px;

border: 0px dashed black;


vertical-align: middle;
color: #B081B3;
font-size: 16px;

margin: auto;
overflow: auto;
position: relative;
}

#musiccloud {
background-image: url('../images/bg/cloud_small.png');
background-repeat: no-repeat; 


width: 279px;
height: 141px;

position: relative;	
bottom: 690px;
left: 25px;


}

#musicplayer {
	padding: 20px;
	padding-top: 42px;
	overflow: auto;
	position: relative;
	color: #B081B3;
	font-size: 16px;
}

#footer {		/* FOOTER */
position: relative;
bottom: 830px;
width: 250px;
left: 400px;
background-color: ;
text-align: right;
}

#footertext {
position: relative;
float: center; text-align: center; 
margin-top: -36px;
margin-right: 25px;
color: white;
font-size: 17px;
text-shadow: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px pink; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: mistyrose; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: antiquewhite; 
}