@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 {
    /* Fonts */
    --titlefont:'Kristi', Georgia, serif;
    --headerfont:Georgia, serif;
    --bodyfont:Georgia, serif;

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

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

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

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

    --link:#A8F7FF;
    --linkhover:#4DCBDB;
    --linkborder:#15909E;

    --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;
}

body {
  height:74vh;
  width:100vw;
  background-image: var(--backgroundimage);
    
  font:1rem var(--bodyfont);
  line-height:1.5;
  color: white;
}

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

.parent {
  margin: 100px 300px auto 300px;
  height: 60vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 20px;
}

.navPanel {
  border-radius: 5px;
  border: 2px dashed;
    grid-row: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 2;
    background-color:var(--contentbackground);
    text-align: center;
}

.musicPlayer {
  border-radius: 5px;
  border: 2px dashed;
    grid-column-start: 1;
    grid-row-start: 5;
    background-color:var(--contentbackground);
    text-align: center;
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
  top:2em;
  margin-bottom:20px;
  left:0;
  margin-left:79px;
  display:flex;
  z-index:99;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}

#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;
}
 
.playy, .pausee {
  color:#fff;
  width: 100px;
  height: 100px;
  cursor: var(--pointercursorimage), auto;
  text-align: center;
}
 
.pausee {
  display:none;
}
 
.sonata {
margin-left:10px;
color:#000; /* color of music note symbol */
}
 
.labeltext {
margin-left:1px;
font-family:courier new;
font-size:9px;
color:#fff; /* color of song title */
}

/*--------------*/

.section-content {
  display: none;
  padding: 24px;
}

.section-content.show{
  display: block;
}

.infoBox {
  border-radius: 5px;
  border: 2px dashed;
    grid-column: span 3 / span 3;
    grid-row: span 5 / span 5;
    grid-column-start: 2;
    grid-row-start: 1;
    background-color:var(--contentbackground);
    overflow: scroll;
}

#container {
    margin: 20px auto 20px auto;
    
    max-width: 1200px;
    width:90%;
}

#navigation {
    width:calc(100% - 10px);
    text-align:center;
    padding:5px;
}

#navigation ul li {
    display:inline-block;
    list-style:none;
    padding: .25em .5em .25em 0;
}

#navigation ul li a {
    font:1.4em var(--headerfont);
    color:var(--navlink);
    text-decoration:none;
}

#navigation ul li a:hover, #navigation ul li a:focus {
    color:var(--navlinkhover);
}

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--contentbackground);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}