body{
    color:#000000;
    background: url(../pangya/media/bg.png);
    background-size: cover;
    background-attachment: fixed;
    font-family: "ms pgothic";
    font-size: 1em;
    letter-spacing: 0.01em;
    line-height: 1.2em;
    @media screen and (width >= 1920px){
    font-size: 1.4em;
    }
  
    @media screen and (width >= 2560px){
    font-size: 1.6em;
    } 
}

#container{
    width: 70%;
    display:flex;
    margin:auto;
    flex-wrap: wrap;
    gap: 1.5em;
    @media screen and (width <= 800px){
        width: 100%;
    }
}

.box{
    background: linear-gradient(white, white 95%, #dddddd 99%);
    border-radius: 0.6em;
    border: #575757 1px solid;
    box-shadow: 0em 0em 0.3em rgba(0, 0, 0, 0.432);
    display:flex;
    flex-wrap: wrap;
    max-width: 100%;
}

p{
    margin: 0.3em 0;
    padding:0.7em;
}

h1{
    font-family: "century gothic";
    margin: 0 0;
    font-weight: bold;
    color:white;
    font-size:0.9em;
    @media screen and (width >= 1920px){
    font-size: 1.3em;
    }
  
    @media screen and (width >= 2560px){
    font-size: 1.5em;
    }
}

.header{
    background: linear-gradient(#57a2d8 0%, #4095d2 49%, #3790cf 50%, #bcd4e6 100%);
    border-radius: 0.6em 0.6em 0 0;
    width:100%;
    text-align: left;
    max-height:1.5em;
    padding: 0.3em;
    border: 1px #4396d388 solid;
    border-bottom:#c5c5c5 1px solid;
}

#gallery img{
    border:1px solid #000; 
    max-width:100%;
    height: auto;
    margin:auto;
}

img{
    max-width:100%;
}

#gallery{
    display:flex;
    flex-wrap: wrap;
    gap: 0.3em;
    padding: 0.6em;
    align-items: center;
    justify-content: space-between;
}

.pagedoll{
    position: fixed;
    bottom: 0;
    left: 0;
    @media screen and (width <= 800px){
        display:none;
    } 
}