body {
    padding: 0;
    margin: 0;
    background-image: url('../bg/ffxiv_05092026_022737_832.png');
    background-size: cover;
}

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

.left {
    width: 18%;
    /* border: 2px solid red; */
    height: 90%;
}

.box {
    border: 2px outset #947d5a;
    border-radius: 10px;
    background: #313131;
    box-shadow: 1px 1px 0px 0px black;;
}

.box>.head {
    color: #cccccc;
    text-align: left;
    border-radius: 10px;
    height: 30px;
    padding: 5px 10px;
    width: calc(100% - 20px);
    background: linear-gradient(180deg,rgba(96, 94, 96, 1) 0%, rgba(49, 49, 49, 0) 60%);
    position: relative;
    font-family: 'NeumaticGothic';
}

.head span {
    font-size: 1.75em;
}

.head::after {
    content: '';
    width: 89%;
    height: 3px;
    position: absolute;
    bottom: -0px;
    right: 8px;
    background: linear-gradient(180deg,rgba(22, 22, 22, 1) 0%, rgba(49, 48, 49, 1) 50%, rgba(86, 85, 86, 1) 100%);
}

.fav {
    height: 45%;
    margin-bottom: 5em;
}

.ships {
    height: 45%;
}

.aww {
    height: 86%;
    overflow: auto;
    scrollbar-width: none;
    margin-top: 1em;
}

.aww img {
    width: 90%;
}



.advplate {
    background-image: url('../bg/ff.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 75%;
    width: 69%;
    margin-left: -4em;
    margin-right: -4em;
    filter: drop-shadow(5px 3px 5px rgba(255, 165, 207, 0.59));
    position: relative;
    /* border: 1px solid red; */
}

.name {
    width: 31%;
    position: absolute;
    left: 22.5%;
    top: 19.75%;
    /* border: 1px solid white; */
    color: white;
    text-align: left;
}

.name>.one {
    font-size: 2.75em;
    margin: 0;
    font-family: 'BILLO';
}

.name>.two {
    font-size: 1em;
    margin: 0;
    margin-top: -1em;
    font-family: 'Tetsubin';
}

.info {
    position: absolute;
    left: 22%;
    bottom: 22%;
    /* border: 1px solid white; */
    width: 32.5%;
    height: 47%;
}

.info>.main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 90%;
    height: 5em;
    color: white;
    gap: 7px;
    margin-bottom: 1em;
}

.main p {
    margin: .25em 0;
}

.others {
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    width: 80%;
    margin-left: .75em;
}

.job img {
    width: 30px;
    display: block;
}

.job p {
    color: white;
    margin: 0;
    font-size: .875em;
}

.craftgather {
    display: flex;
    align-items: center;
    gap: .5em;
    flex-wrap: wrap;
}

.portrait {
    height: 56.5%;
    width: 20.25em;
    border: 1px solid #880358;
    position: absolute;
    right: 23.5em;
    top: 11.5em;
    border-radius: 7px;
    /* opacity: .5; */
}

#logo {
    position: absolute;
    bottom: -3.9em;
    right: -10em;
    z-index: 2;
}


.portrait::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('../img/ffxiv/deco.png');
    background-size: cover;
    z-index: 1;
    border-radius: 7px;
    box-shadow: inset 0px 0px 2px 5px #3a2020;
}

.portrait::after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('../img/ffxiv/mizuki.png');
    background-size: cover;
    border-radius: 7px;
}

.right {
    width: 18%;
    /* border: 2px solid red; */
    height: 80%;
}

.pics {
    height: 100%;
}

.yay {
    margin-top: 1em;
    color: #e1e1e1;
    height: 92%;
    scrollbar-width: none;
    overflow: auto;
}

.yay img {
    width: 85%;
}

.yay p {
    margin: .5em;
    margin-bottom: 1.5em;
    font-size: .875em;
}

@font-face {
  font-family: 'NeumaticGothic';
  src: url('../font/NeumaticGothic-Light.ttf');
}

@media screen and (max-width: 1920px) {

    .aww {
    height: 81%;
}

    .advplate {
    height: 85%;
    width: 73%;
}

.name {
    top: 18.5%;
}

.name>.one {
    font-size: 2.25em;
}

.info {
    bottom: 26%;
}

    .portrait {
    height: 54%;
    width: 16em;
    right: 18em;
    top: 9em;
    opacity: 1;
}

#logo {
    position: absolute;
    bottom: -4.75em;
    right: -8.5em;
    z-index: 2;
}

.others {
    width: 100%;
}

.yay {
    height: 90%;
}

}