@font-face {
    font-display: swap;
    font-family: 'Kristi';
    font-style: normal;
    font-weight: 400;
    /* Change these paths if necessary: */
    src: url('fonts/kristi-v21-latin-regular.woff2') format('woff2'), 
       url('fonts/kristi-v21-latin-regular.ttf') format('truetype'); 
}



:root {

    /* Images - change paths if necessary */
    --backgroundimage:url("/media/backgrounds/intro_background.jpg");
    --headerimage:url(img/head.jpg);
    --boximage:url(img/quote.jpg);
    --regularcursorimage:url("/media/cursor/cursor_regular.png");
    --pointercursorimage:url("/media/cursor/cursor_pointer.png");
    --dragcursorimage:url("/media/cursor/cursor_drag.png");
    
    /* Colors */
    --backgroundcolor:#FFC9FA;
    --contentbackground:#FF66DE;
    --updatesScrollBackground:#E322BD;

    --contentcolor:#fff;
    --footercolor:#fff;

    --title:#FFFFFF;
    --header1:#FFC7F4;
    --header2:#FFC7F4;
    --header3:#cb4377;

    --navlink:#546926;
    --navlinkhover:#cb4377;

    --link:#982a54;
    --linkhover:#cd2b94;
    --linkborder:#b3d167;

    --formbackground:#FFF;
    --formcolor:#982a54;
    --formborder:#b3d167;

    --boxbackground:#ccc;
    --boxcolor:#555;
    --boxborder:#999;

    --footerlink:#982a54;
    --footerlinkhover:#cd2b94;
    
}

* { /*reset margin and padding*/
    margin: 0;
    padding: 0;
    border: 0;
    
    cursor: var(--regularcursorimage), auto;
}

@font-face {
  font-family: kabelFont; /* set name */
  src: url(/media/fonts/kabel.woff); /* url of the font */
}

h1 {
  font-size: 20px;
  font-family: kabelFont;
  margin-bottom: 5px;
}

ul {
  margin-left: 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}


.button {
  cursor: pointer;
}

a {
  cursor: var(--pointercursorimage), auto;
}

body {
  background-image: var(--backgroundimage);
  background-size: cover;
    
  font:1rem var(--bodyfont);
  color: white;
}

hr {
  border-top: 3px dotted white;
}

::selection {
  color: #fff;
  background: #d4169b;
}

.wrapper {
  background-size: contain;
  color: #fffbfe;
  width: 100vw;
  height: 100vh;
  padding: 0;
}
    
.pinkFuzzySoundsGeneratorDiv {
  background-color: #e952b5;
  border-style: solid;
  border-width: 5px;
  border-radius: 8px;
  overflow: auto;
  border-image-slice: 71 60 60 71;
  border-image-width: 40px 40px 40px 40px;
  border-image-outset: 13px 13px 13px 13px;
  border-image-repeat: repeat repeat;
  border-image-source: url("/media/fuzzyBorder.png");
  position: absolute;
  top: 23vh;
  left: 21%;
  width: 989px;
}

.updatesDiv {
  margin: 20px;
}

.buttonArea {
  margin-left: 194px;
  margin-right: 206px;
}
    
.buttonText {
  text-align: center;
}

.ActualButton {
  text-align: center;
}

.buttonImage {
  cursor: var(--pointercursorimage), auto;
  content:url(/media/pinkButton.png);
}

.buttonImage:hover {
  content:url("media/pinkButton.gif");
}

.songInfo {
  background-image: url("/media/backgrounds/onlyShallowBG.jpg");
  color: white;
  text-align: center;
  margin-left: 194px;
  margin-right: 206px;
  border-radius: 29px;
  background-size: cover;
}

#result::selection {
  color: #fff;
  background: #B20E74;
}

#result *::selection {
  color: #fff;
  background: #B20E74;
}

.navHeader {
  background-color: #e952b5;
  border-style: solid;
  border-width: 5px;
  border-radius: 8px;
  border-image-slice: 71 60 60 71;
  border-image-width: 0px 40px 40px 40px;
  border-image-outset: 13px 13px 13px 13px;
  border-image-repeat: repeat repeat;
  border-image-source: url("/media/fuzzyBorder.png");
  position: absolute;
  top: 0vh;
  left: 21%;
  width: 989px;
  height: 80px;
}

.navHeader_socials {
  background-color: #790766;
  border-style: solid;
  border-width: 5px;
  border-radius: 8px;
  border-image-slice: 71 60 60 71;
  border-image-width: 0px 27px 27px 40px;
  border-image-outset: 13px 13px 13px 13px;
  border-image-repeat: repeat repeat;
  border-image-source: url("/media/fuzzyBorder_blue.png");
  position: absolute;
  top: -1vh;
  width: 160px;
  height: 80px;
}

.navHeader_websiteNav {
  background-color: #e952b5;
  position: absolute;
  top: 0vh;
  width: 829px;
  height: 80px;
  right: 0px;
  border-width: 5px;
  border-radius: 8px;
  border-image-slice: 71 60 60 71;
  border-image-width: 0px 27px 27px 27px;
  border-image-outset: 13px 13px 13px 13px;
  border-image-repeat: repeat repeat;
  border-image-source: url("/media/fuzzyBorder.png");
}

.starButton1 {
  position: absolute;
  top: 190px;
  left: 1450px;
}

.starButton1:hover {
  filter:drop-shadow(0px 0px 8px)
}

#starButton1 {
  background-color: #e952b5;
  border-style: solid;
  border-width: 10px;
  border-radius: 1px;
  overflow: auto;
  border-image-slice: 71 60 60 71;
  border-image-width: 17px 17px 17px 17px;
  border-image-outset: 13px 13px 13px 13px;
  border-image-repeat: repeat repeat;
  border-image-source: url("/media/fuzzyBorder.png");
  position: absolute;
  top: 190px;
  left: 1400px;
  width: 300px;
  height: 260px;
  cursor: var(--dragcursorimage), auto;
}