.container {
    height: 600px;
    width: 1150px;
    margin: auto;
    margin-top: 150px;
    font-family: MS Gothic;
}

body{
    background-image: url(https://file.garden/ZmJp8yOgiFXI9cMA/Neocities/sakura.gif);
    background-position: contain;
    background-size: cover;
}

.flexbox{
    display: flex;
    flex: 1;
    height: 100%;
}

.nav{
    width: 25%;
    border: #DA406C dotted 2px;
    border-radius: 10px 0px 0px 10px;
    background-color: #FFDDC980;
}

.nav p{
    color: #7c103f;
    margin: 10px;
}

.nav hr{
    border: dotted 2px #DA406C;
    margin: 0;
}

.nav ul{
    list-style: url(https://file.garden/ZmJp8yOgiFXI9cMA/Neocities/pin.png);
    line-height: normal;
    padding-left: 20px;
    margin: 10px;
    color: #7c103f;
}

.nav li{
    display: list-item;
    margin: 5px;
}

.shrines{
    width: 75%;
    border: #DA406C ridge 10px;
    border-left: none;
    border-radius: 0px 30px 30px 0px;
    background-image: linear-gradient(to bottom, #FFDDC980, #FA969680);
}

h2{
    margin: 10px;
    margin-left: 0;
    padding: 10px;
    background-image: linear-gradient(to right, #FA9696, #FFDDC9, #FFF7C9);
    border: dotted 2px #7C103F;
    border-left: none;
    border-radius: 0px 20px 120px 0px;
    text-shadow: #B8255D 1px 1px 3px;
    color: white;
}

h2 img{
    margin-left: 10px;
    height: 15px;
}

.bookmarks{
    border: dotted 2px #7C103F;
    height: 340px;
    margin: 10px;
    background-color: #FFFCEF;
    padding: 10px;
}

.bookmarks h3{
    margin: 0px;
    background-color: #FA9696;
    padding: 6px;
    color: white;
    text-shadow: #B8255D 1px 1px 3px;
    
}

.extrainfo{
    border: dotted 2px #7C103F;
    height: 130px;
    margin: 10px;
    background-color: #FFFCEF;
    padding: 5px;
}

.scroll{
    background-color: #FFFCEF;
    height: 470px;
    margin: 30px;
    overflow: scroll;
    overflow-x: hidden;
    border: dotted 2px #DA406C;
    padding: 25px
}

h1{
    margin: 10px;
    background-color: #FFDDC9;
    padding: 10px;
    color: white;
    text-shadow: #7c103f 2px 2px 3px;
}

.content{
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    margin: 10px;
}

.scroll h3{
    margin: 5px;
}

.scroll a{
    color: #7c103f;
    transition: transform 0.5s ease;
}

.scroll a:hover{
    color: #DA406C;
    text-decoration-style: wavy;
     transform: scale(1.03);
}

.scroll a img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
    border: ridge 5px #7c103f;
}

.scroll a img:hover{
    border: ridge 5px #DA406C;
}

.scroll hr{
    border: 2px dotted #DA406C;
}

.scroll p{
    margin: 10px;
    color: #FA9696;
}

.shrineflex{
    display: flex;
    text-align: center;
    justify-content: center;
    margin: 10px;
    
}

ul a{
    color: #7c103f;
}

ul a:hover{
    color: #DA406C;
    font-weight: bold;
}

button{ 
    margin: 10px;
    align-content: center;
    justify-content: center;
    height: 28px;
    width: 150px;
}