@font-face {
    font-family: bubblegumSans;
    src: url('BubblegumSans-Regular.otf') format('opentype');
      font-weight: 400;
  }

  @font-face {
    font-family: espresso;
    src: url('EspressoDolce.ttf')format('truetype');
  }

  .crimson-text-regular {
    font-family: "Crimson Text", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  

* {
	box-sizing: border-box;
  cursor: url('cursor_point1a.cur'), url('cursor_point1a.gif'), default;
}

body {
  background-image: url(sky.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.wrapper {
	margin: auto;
	padding-top: 10px;
    aspect-ratio: auto;
}

#header {
      height: auto;
      background-color: #8967B3;
      margin: 15px auto;
      padding: 20px;
      border: 10px rgb(202, 92, 202);
      border-style: groove;
      max-width: 900px;
      aspect-ratio: auto;
      font-family: monoSpace;
}

#header ul {
      display: flex;
      padding: 0;
      margin: 0;
      list-style-type: none;
      justify-content: space-evenly;
}

.container {
    aspect-ratio: auto;
    max-width: 900px;
    margin: 15px auto;
    height: auto;
	text-align: center;
	padding: 10px;
    overflow: auto;
    --r: 11px;
    padding: calc(2 * var(--r));
    background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

#adopts {
  max-height: 400px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-content: flex-start;
}

#purple {
    background: 
      radial-gradient(var(--r),#ffffff00 98%, #b480f0) round
        calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
      linear-gradient(#b480f0 0 0) no-repeat
        50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}


    a {
      font-size: 15px;
      color: rgb(255, 255, 255);
      text-decoration: none;
    }

    h1 {
      font-size: 20px;
      color: rgb(255, 255, 255);
      text-align: center;
      margin: auto;
    }
    h2 {
      font-size: 15px;
      color: rgb(252, 112, 189);
      text-align: center;
      margin: auto;
    }


   

      
    li a:hover {
    font-size: 20px;
   }


    footer {
        background-color: #8967B3;
        max-width: 900px;
        height: 80px;
        padding: 20px;
        margin: 15px auto;
        text-align: center;
        display: flex;
        box-shadow: 0 0 0 2px rgb(202, 92, 202), 8px 8px 0 0 rgb(202, 92, 202);
    }
    
    #home {
        width: 80px;
        height: 50px;
        text-align: center;
        background-color: pink;
    } 

    .items {
        background-image: none;
         display: flex;
          flex-wrap: wrap;
          align-items: flex-start;
          flex-direction: row;
          max-height: 100vh;
          flex-flow: row wrap;
      }
        #stamps img {
          margin: auto;
          height: 100px;
          width: 160px;
        }
            #buttons img {
              margin: auto;
              box-shadow: 3px 3px 8px 0px black;
              height: 100px;
              width: 100px;
            }
    
           



           


              #text h1 {
                font-size: 25px;
                color: rgb(211, 51, 203);
                padding: 10px;
                font-family: bubblegumSans;
            }

            #text li {
                color: rgb(189, 65, 189);
                list-style-position: inside;
                font-family: bubblegumSans;
            }


            #sticker {
              background-image: url(adopts/grid.png);
              background-repeat: repeat;
              aspect-ratio: auto;
              max-width: 900px;
              margin: 15px auto;
              max-height: 400px;
            text-align: center;
            padding: 10px;
              overflow: auto;
              border: 2px dotted black;
              border-radius: 3px;
            }
            
            #cambrian {
              aspect-ratio: auto;
              max-width: 900px;
              margin: 15px auto;
              max-height: 400px;
            text-align: center;
            padding: 10px;
              overflow: auto;
              background-color: black;
              border: 10px solid rgb(255, 0, 0);
            }
            
            
            .divider {
              display:block;
              border:0px;
              height:37px;
              max-width: 900px;
              background-image: url('adopts/divider.gif');
            
            }
            
            #me {
              text-align: center;
              margin: auto;
            }

          

            #sources li {
              list-style: none;
            }

            
#sources a {
  color: purple;
}

  /*Frogland stuff*/


  #frog {
    all: initial;
    font-family: espresso;
    background-color: #0a5f0f;
    
  }

  #frogwrap {
    max-width: 1000px;
    flex-direction: vertical;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

            .pond {
              background-color: #367cd8;
              aspect-ratio: auto;
              max-width: 100vw;
              margin: 15px auto;
            text-align: center;
            padding: 10px;
              overflow: auto;
              border-radius: 10px;
              border: 10px solid rgb(9, 51, 16);
              
            }
  

            #graveyard {
              display: flex;
              flex-direction: row;
              justify-content: space-evenly;
              flex-wrap: wrap;
              gap: 10px;
            }

            #graveyard a {
              color: blue;
            }
            
            #graveyard a:hover {
              text-decoration: underline;
            }





           /*Hover stuff*/

    .hvr-grow {
        display: inline-block;
        vertical-align: middle;
        transform: translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        transition-duration: 0.3s;
        transition-property: transform;
    }
    
    .hvr-grow:hover,
    .hvr-grow:focus,
    .hvr-grow:active {
        transform: scale(1.1);
    }
    
.grow img {
    transition: 1s ease;
    }
    
    .grow img:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1s ease;
    }
    
    button h1:hover {
        text-decoration: underline 3px rgb(156, 8, 255);
      }



      .tooltip {
        position: relative;
        display: inline-block;
      }
      
      /* Tooltip text */
      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: rgba(255, 96, 207, 0.753);
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
       
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
      }
      
      /* Show the tooltip text when you mouse over the tooltip container */
      .tooltip:hover .tooltiptext {
        visibility: visible;
      }