body {
    background-image: url(images/water/Art-Sparkling-GIF.gif);
    background-size: cover;
}

a:visited {
    color: rgb(255, 172, 48);
}

.title {
    font-style: italic;
    padding-left:18%;
    padding-top:5%;
    padding-bottom: 1px;
    color: rgb(255, 172, 48);
    font-size: 2.5em;
    text-shadow: 2px 2px 10px rgb(32, 16, 0);
    line-height: 0%;
}

.return {
    padding-left: 18%;
    line-height: 0%;
    color:aqua;
}

.container {
      display: flex;
      gap: 20px;           /* space between the two boxes */
      max-width: 1200px;
      margin: 40px auto;
      padding: 0 20px;
}

.box {
    box-sizing: border-box;   /* Important! Makes padding included in width */
    padding: 30px;
    border: 3px solid #b6f6ff;
    border-radius: 8px;
}

.left {
    flex: 2;                  /* Makes left box bigger */
    background-color: #e3f2ff;
}

.left h2 {
    color:rgb(48, 66, 99);
}

.left p {
    color:rgb(75, 101, 149);
}

.leftcenteredtext {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hubnav {
    padding: 1% 2%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
}
.hubnav img {
    margin: 0;
    display: flex;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.hubnav img:hover {
    transform: scale(1.04);
}


/*------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Hub Home 1*/
.hubhome {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background-color: rgb(27, 40, 56);
}

.hubhome img {
    opacity:0;
}

.hubhome:hover img {
    opacity:1;
}

.hubhome-text {
    font-style:italic;
    font-size: 1.5em;
    padding: 5px;
    position: absolute;
    color: rgb(255, 230, 255);
    text-shadow: 3px 3px 10px black;
    pointer-events: none;
    opacity: 1;
}

.hubhome-caption {
    position: absolute;
    color: rgb(255, 230, 255);
    text-shadow: 3px 3px 10px black;
    pointer-events: none;
    opacity: 0;
    width: 25ch;
    background-color: rgba(0, 25, 0, 0.61);
}
.hubhome:hover .hubhome-text{
    opacity: 0;
}

.hubhome:hover .hubhome-caption{
    opacity: 1;
}



/* Hub art 2*/
.hubart {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    position:relative;
    background-color: rgb(65, 18, 66);
}

.hubart img {
    opacity:0;
}

.hubart:hover img {
    opacity:1;
}

.hubart-text {
    font-style:italic;
    font-size: 1.5em;
    padding: 5px;
    position: absolute;
    color: rgb(255, 244, 199);
    pointer-events: none;
    opacity: 1;
}

.hubart-caption {
    position: absolute;
    color: rgb(255, 230, 255);
    text-shadow: 3px 3px 10px black;
    pointer-events: none;
    opacity: 0;
    width: 25ch;
    background-color: rgba(0, 25, 0, 0.61);
}

.hubart:hover .hubart-text{
    opacity: 0;
}

.hubart:hover .hubart-caption{
    opacity: 1;
}



/* Hub 3D 3*/

.hub3D {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    position: relative;
    background-color: #dadada;
}

.hub3D img {
    opacity:0;
}

.hub3D:hover img {
    opacity:1;
}

.hub3D-text {
    font-style:italic;
    font-size: 1.5em;
    padding: 5px;
    position: absolute;
    color: rgb(0, 0, 0);
    text-shadow: 2px 2px 10px rgb(255, 255, 255);
    pointer-events: none;
    opacity: 1;
}
.hub3D:hover .hub3D-text{
    opacity: 0;
}

.hub3D-caption {
    position: absolute;
    color: rgb(255, 230, 255);
    text-shadow: 3px 3px 10px black;
    pointer-events: none;
    opacity: 0;
    width: 25ch;
    background-color: rgba(0, 25, 0, 0.61);
}

.hub3D:hover .hub3D-caption{
    opacity: 1;
}






/* Hub music 4*/
.hubmusic {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    position:relative;
    background-color: #ffd3b6;
}

.hubmusic img {
    opacity:0;
}

.hubmusic:hover img {
    opacity:1;
}
.hubmusic-text {
    font-style:italic;
    font-size: 1.5em;
    padding: 5px;
    position: absolute;
    color: rgb(70, 104, 67);
    pointer-events: none;
    opacity: 1;
}
.hubmusic:hover .hubmusic-text{
    opacity: 0;
}

.hubmusic-caption {
    position: absolute;
    color: rgb(255, 230, 255);
    text-shadow: 3px 3px 10px black;
    pointer-events: none;
    opacity: 0;
    width: 25ch;
    background-color: rgba(0, 25, 0, 0.61);
}

.hubmusic:hover .hubmusic-caption{
    opacity: 1;
}





/* Hub guestbook 5*/
.hubguest {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    position:relative;
    background-color: rgb(73, 11, 11);
}

.hubguest img {
    opacity:0;
}

.hubguest:hover img {
    opacity:1;
}

.hubguest-text {
    font-style:italic;
    font-size: 1.5em;
    padding: 5px;
    position: absolute;
    color: rgb(228, 255, 209);
    text-shadow: 2px 2px 10px black;
    pointer-events: none;
    opacity: 1;
}
.hubguest:hover .hubguest-text{
    opacity: 0;
}

.hubguest-caption {
    position: absolute;
    color: rgb(255, 230, 255);
    text-shadow: 3px 3px 10px black;
    pointer-events: none;
    opacity: 0;
    width: 25ch;
    background-color: rgba(0, 25, 0, 0.61);
}

.hubguest:hover .hubguest-caption{
    opacity: 1;
}



/* Hub aesthetics 6*/
.hubaesthetics {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background-color: rgb(31, 230, 203);
}

.hubaesthetics img {
    opacity:0;
}

.hubaesthetics:hover img {
    opacity:1;
}
.hubaesthetics-text {
    font-style:italic;
    font-size: 1.5em;
    padding: 5px;
    position: absolute;
    color: rgb(255, 184, 53);
    text-shadow: 3px 3px 10px black;
    pointer-events: none;
    opacity: 1;
}

.hubaesthetics-caption {
    position: absolute;
    color: rgb(255, 255, 255);
    pointer-events: none;
    opacity: 0;
    background-color: #00000050;
}
.hubaesthetics:hover .hubaesthetics-text{
    opacity: 0;
}

.hubaesthetics:hover .hubaesthetics-caption{
    opacity: 1;
}

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


.right {
    flex: 1; /* Makes right box smaller */
    background-color: #fffaf3;
}

.right h3 {
    margin-top: 0;
    color:rgb(71, 32, 32);
} 

.right p {
    margin: 15px 1px;
    display:inline;
    /*line-height: 0.5;*/
    color:rgb(100, 43, 43);
    line-height: 1.3;
}
.p.italic {
    font-style: italic;
}

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

.homebgmbody {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(images/water/Art-Sparkling-GIF.gif);
    background-size: cover;
}

.homebgm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.bgmcentercontainer {
    display: flex;
    align-items: center;
    justify-content: center;
}