/*-------MUSIC PLAYER BY GLENTHEMES-------*/
        #glenplayer02 {
        position: relative;
        top: 0px;
        left: 5px;
        display: flex;
        z-index: 99;
        }

        #glenplayer02 a {
        text-decoration: none;
        }

        #glenplayer02>div {
        align-self: center;
        -webkit-align-self: center;
        }

        .music-controls {
        user-select: none;
        -ms-webkit-user-select: none;
        width: 13px;
        font-size: 18px;
        cursor: url('https://files.catbox.moe/gev9ox.png'), auto;
        }

        .playy,
        .pausee {
        color: #ff87ec;
        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;
        font-family: 'M PLUS Rounded 1c', sans-serif;
        font-size: 14px;
        color: #ff87ec;
        font-weight: bold;
        text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
        /* color of music note symbol */
        }

        .labeltext {
        margin-left: 0px;
        position: relative;
        bottom: 10px;
        font-family: 'M PLUS Rounded 1c', sans-serif;
        font-size: 14px;
        color: #ff87ec;
        font-weight: bold;
        text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
        /* color of song title */
        }
/*Font*/
        .delius-swash-caps-regular {
    font-family: "Delius Swash Caps", cursive;
    font-weight: 400;
    font-style: normal;
    src: url(https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&display=swap);
    }


.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;}

/*Side Bar*/
 * {
  box-sizing: border-box;
  cursor: url('rose_point.png'), auto;
 }
div.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;}

div.flex-container > div {
    margin: 15px;
    flex-wrap: space-evenly;
    align-items: space-evenly;
    min-width: 250px;
    background: #f0e6c2;
    border: 2.5px dotted #7b3f00;
    border-radius: 10px;
    outline: 5px dotted #7b3f00;
    outline-offset: 3px;
  height: auto;
}

/*tabs*/
        body {
            padding: 30px 20px;
            background: #f0e6c2 url("wallpaper.jpg");
            cursor: url('rose_point.png'), auto;}
        a:link, a:visited {
          background-color: transparent;
          color: inherit;
          text-decoration: none;}
        a:hover, a:active {
          background-color: inherit;
          color: #7b3f00;
          text-decoration: underline;
        }
/*NavBar*/
nav {
  display: flex;
  background-color: #e0a397;
  border-radius: 10px;
  cursor: url('rose_point.png'), auto;
  }
    nav p {
      display: block;
      color: #c26b5c;
      background-color: #f0e6c2;
      margin: 5px;
      padding: 6px;
      font: bold 16px;
      border-radius: 5px;
   
      }
    nav p:visited {
      color: pink;
      background-color: inherit;
      text-decoration: none;
    }
    nav p:hover {
        background-color: #A2B06D;
        color: #7b3f00;
        text-decoration: underline;
    }
    main {
            margin: auto;
        padding: 0px 6px 0px 6px;
            font: 18px Helvetica, Arial, sans-serif;
            line-height: 1.5;
          color:#c26b5c;
        }

        h1 {
             text-align: center;
            margin: 15px;
            font: bold 45px Delius Swash Caps, Arial;
        color: #c26b5c;
        }

        h2 {
            text-align: center;
            margin: 15px ;
            font: bold 30px Delius Swash Caps, Arial;
        color: #c26b5c;
        }
    h3 {
    text-align: Left;
            margin: 15px;
            font: bold 25px Delius Swash Caps, Arial;
        color: #c26b5c;}

        p {
            margin: 10px;
        padding: 10px;
            font: 18px Helvetica, Arial, sans-serif;
            line-height: 1.5;
          color:#c26b5c;
        }
    ul {
        margin: 5px 20px 10px;
        padding: 5px 20px 10px;
            font: 16px Helvetica, Arial, sans-serif;
            line-height: 1.5;
          color:#c26b5c;
          list-style-image: url('wand.gif');
    }
    footer {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #f0e6c2;
      padding: 8px;
      justify-content: space-between;
      flex-direction: row;
      align-content: flex-start;
      cursor: url('https://files.catbox.moe/gev9ox.png'), auto;
    }
.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 75%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
}

.iframe-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none; 
  cursor: url('https://files.catbox.moe/gev9ox.png'), auto;
}
    @media screen and (max-width:950px)  {
            div.flex-container {
            -webkit-flex-direction: column;
            -ms-flex-direction:column;
                flex-direction: column;}}
/* Scrollbar styling */
    ::-webkit-scrollbar {
        width: 15px;
        /* Vertical Width */
          height: 15px;
        /* Horizontal Height */
         }                           
    /* Scrollbar Track Color */
    ::-webkit-scrollbar-track {
        background: #f0e6c2;
        border-radius: 10px;
        }                                 
     /* Scrollbar Thumb Color */
     ::-webkit-scrollbar-thumb {
        background: #e0a397;
         border-radius: 10px;
         border: 2px solid transparent;
         }
         /* Thumb Hover */
        ::-webkit-scrollbar-thumb:hover {
        background: #c26b5c;
        }
/*floating text*/
  #float {
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #f3d2c8, 0 0;
     font-style: italic;
    font-size: 2em;
     font-weight: bold;
    color: #A67B5B;
    animation-name: floating;
     animation-duration: 3s;
     animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
    @keyframes floating {
         0% {
         transform: translate(0, 0px);
            }

        50% {
        transform: translate(0, 15px);
                    }

        100% {
        transform: translate(0, -0px);
             }
    }
#grad1 {
  height: 60px;
  background-color: #f0e6c2; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, #f0e6c2, #c26b5c);
  cursor: url('rose_point.png'), auto;
}
img {
 height: auto;
  width:100%;
}

/*Accordion*/
  /* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #e0a397;
    font: bold 16px Helvetica, Arial;
    color: #533a27;
    padding: 16px;
    cursor: url('rose_point.png'), auto;  
    width: 100%;
    text-align: left;
    border: 1px;
    outline: none;
    transition: 0.4s;
    
  }
.active, .accordion:hover {
  background-color: #A67B5B;}

.accordion:after {
  content: '\1F516';
  color: #7b3f00;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\1F4D6";
}

.panel {
  padding: 0 18px;
  color: #7b3f00;
  background-color: #f0e6c2;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


div.cover{
  height: 60%;
  display: grid;
  grid-template:  auto/ auto auto auto auto ;
  gap: 5px;
  background: transparent;
  overflow: hidden;
}
div.cover div{
 background-color: #f0e6c2;
  padding: auto;
  font-size: 30px;
  text-align: center;
  align-items: center;
   overflow: hidden;
}

div.cover div > p {
  margin: 2px;
  padding: 0px;
  font: 12px Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #c26b5c;
}
#book1 {
  float: inherit;
  display: none;
}
#book2 {
  float: inherit;
  display: none;
}
#book3 {
  float: inherit;
  display: none;
}
#book4 {
  float: inherit;
  display: none;
}
hr {
    display:block;
    border:0px;
    height:30px;
    background-image:url('lacebiscuits.png');
    background-repeat: repeat-x;
}
.button {
    background-color: #b4783c;
    border: none;
    color: #f0e6c2;
    border-radius: 5px;
    padding: 10px 23px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    text-align-last: center;
    cursor: url('rose_point.png'), auto;
}