*, *::before, *::after { box-sizing: border-box; }

p{
  font-size: 16px
}

@font-face {
  font-family: 'americantypewriter';
  src: url(font/americantypewriter-01-webfont.woff);
  
  
}

.bordered-img {
  border: 4px solid #ffffff;
  border-radius: 1.23vw;
}

.typewriter {
  color: black;
  font-family: 'americantypewriter';
}



body {
  background-image: url(graphics/bow.png);
  background-repeat: repeat;
  max-width: 200%;
  overflow: auto;
}



.main-grid {
    display: grid;
    grid-template-columns: 0% 100% 0%;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "header header header"
      "left-sidebar content right-sidebar"
      "footer footer footer"
    ;
    
    background-color: #ffbfe7;
    
    padding: .83%;
    
    border: 10px double white;
    border-radius: 1.23vw;
    
    margin-left: auto;
    margin-right: auto;
}


.main-grid > div {
  text-align: center;
  
  padding: .83%;
  
  border: solid .415vw white;
  border-radius: 1.23vw;
  overflow: auto;
}



.header {
  grid-area: header;
  
  background-image: url(graphics/bow.png);
  background-repeat: repeat;
  
  margin-bottom: .83%;
  overflow: auto;
}



.content {
  grid-area: content;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  
  /*border: .42vw #fda4ba;*/
  
  margin-left: 2%;
  margin-right: 2%;
  
  background-image: url(graphics/clouds.png);
  background-repeat: repeat;
  overflow: auto;
  
}

.content span,
.content p {
  background-color: rgba(195, 245, 254, 0.85)
}




.footer {
  grid-area: footer;
  
  background-color: #633959;
  overflow: auto;
  
  margin-top: .83%;
}



.titles {
  color: white;
}


/* Tooltip container */
.tooltip {
  border-bottom: 1px dotted black;
  position: relative;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 300px;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  left: 105%;
  bottom:50%;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.arttitle {
  margin-bottom: 35px; 
  font-size: 20px;
}