@font-face{
    font-family: ChesterfieldAntique Script;
    src: url('/ChesterfieldAntique Script Regular.ttf')
}
@font-face{
    font-family:swirlycanalope;
    src: url('/SwirlyCanalope_PERSONAL_USE_ONLY.ttf')
}
@font-face{
    font-family:trajan;
    src: url('/TrajanPro-Regular.ttf')
}
@font-face{
    font-family:futura;
    src: url('/FuturaCyrillicLight.ttf')
}
@font-face{
    font-family:garamonditalic;
    src: url('/Garamond Italic.ttf')
}
@font-face{
    font-family:animeace;
    src: url('/animeace2_reg.ttf')
}
@font-face{
    font-family:shardee;
    src: url('/Shardee.ttf')
}
@font-face{
    font-family:centuryoldstyle;
    src: url('/Century Old Style Std Regular.ttf')
}

.title {
    color: #7A8B40;
}

body{
    font-family: baskerville;
	font-size: 14px;
	color: black;
	background-color: #ffffe9;
    background-image: url(shrines_img/anime_forest_bg.jpeg);
    background-repeat:no-repeat;
    background-size:auto 1040px;
    background-attachment: fixed;
}
    a:link{
        color:#5ffff9;
    }
    a:hover{
        color:#8eac70;
    }
    a:visited{
        color:#5aa9d3;
    }

.container{
    max-width: 800px;
    margin:auto;
    justify-content: center;
}
#banner{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    Color: #FBF5D7;
    background-color: #436E4D;
    border-radius: 10px;
    border: solid;
    border-color: #2b4631;
    font-family: Eckmann, baskerville;
    font-size: 25px;
    grid-column-start: 1;
    grid-column-end: 3;
}
#banner h1{margin: 5px;
    }

.header{  
    margin-bottom: 10px;
    Color: #FBF5D7;
    background-color: #436E4D;
    border-radius: 10px;
    border: solid;
    border-color: #2b4631;
    text-align-last: center;
    font-family: Eckmann, baskerville;
    font-size: 40px;
}

.shrinegallery div{
    width:calc(33% - 10px);
    margin:5px;
    border:5px solid;
    border-color: #2b4631;
    border-radius: 5px;
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
}
.shrinegallery div img{
    width:100%;
    height:100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    transition: transform 0.5s ease;
}

.shrinegallery div:hover img {
    transform: scale(1.35);
}

.shrinegallery div span{
    position:absolute;
    bottom:15px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: #ffffe9;
    color: black;
    text-align: center;
    padding: 5px 10px;
    font-size: 20px;
    opacity: 0;
    transform: translateY(100px);
    transition: transform 0.4s ease, opacity 0.5s ease;
}
.shrinegallery div:hover span {
  opacity: 1;
  transform: none;
}
.shrinegallery{
    display:flex;
    flex-wrap:wrap;
    max-width:900px;
    justify-content: center;
}

#labyrinth span{
        font-family:ChesterfieldAntique Script;
    }
#anne span{
        font-family:swirlycanalope;
        vertical-align:middle;
        font-size:22px;
        padding-top: 0;
    }
#titanic span{
        font-family:Trajan;
        font-weight:bold;
        padding-bottom: 1px;
    }
#ghibli span{
        font-family:futura;
    }

#watership span{
        font-family:garamonditalic;
    }

#anime span{
        font-family:animeace;
        font-size:14px;
    }

#ag{
        background-color: white;
}
#ag img{ object-fit: contain;
        
    }
#ag span{
        font-family:centuryoldstyle;
    }
    
#footer{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    background-color: #436E4D;
    border-radius: 10px;
    border: solid;
    border-color: #2b4631;
    margin: 0 auto;
    width:200px;
    height: 45px;
}
#footer h2{text-align:center; 
        display:inline;
    }
#footer img{
        padding:5px;
        padding-bottom: 0;
    }