#rloadingbox {
    position: absolute;
    width: 200px;
    height: 240px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rspinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 83.3%;
    animation: rspin 2s linear infinite;
}
.rloadingtxt {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 30%);
    bottom: 0;
    font-size: 150%;
    font-weight: 450;
    color: aliceblue;
}
@keyframes rspin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.txt1 {
    color: rgb(123, 235, 255);
    text-align: center;
    transform: translateY(60%);
}
.txt2 {
    color: rgb(123, 235, 255);
    transform: translateY(20%);
    text-align: center;
}
.link {
    color: rgb(123, 235, 255);
    text-align: center;
    transform: translateY(-10%);
}
.a {
    position: absolute;
    width: 97%;
    height: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -53%);
}
.nft_box {
    position: absolute;
    width: 97%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
}
#NFT_image {
    position: relative;
    height: 300px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#NFT_image img {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
.info {
    position: absolute;
    width: 70%;
    padding-top: 2.05%;
    padding-bottom: 3%;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
}
.BoxForLineAndTitle {
    position: relative;
    width: 100%;
    height: 10%;
}
.vertical-line1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(0, 128, 111);
    border-radius: 5px;
    height: 30px; 
    width: 6px; 
}
.vertical-line2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(85, 33, 137);
    border-radius: 5px;
    height: 30px; 
    width: 6px; 
}
.title {
    font-size: xx-large;
    text-indent: 15px; 
    transform: translateY(-3%);
}
.fs {
    font-size: 150%;
}
.a > p {
    font-size: xx-large;
    font-weight: 500;
}
.nft_box > p {
    font-size: xx-large;
    font-weight: 500;
}
@media (max-height: 800px) {
    #NFT_image {
        height: 200px;
    }
}
@media (max-width: 1500px) {
    .fs {
        font-size: 120%;
    }
    .info {
        width: 80%;
    }
}
@media (max-width: 1000px) {
    .fs {
        font-size: 100%;
    }
    .info {
        width: 85%;
    }
}
@media (max-width: 750px) {
    .fs {
        font-size: 90%;
    }
    .info {
        width: 90%;
    }
    .a > p {
        font-size: x-large;
        font-weight: 400;
    }
    .nft_box > p {
        font-size: x-large;
        font-weight: 400;
    }
    .BoxForLineAndTitle {
        height: 7%;
    }
    .vertical-line1 {
        height: 23px; 
        width: 4px; 
    }
    .vertical-line2 {
        height: 23px; 
        width: 4px; 
    }
    .title {
        font-size: x-large;
        text-indent: 12px; 
    }
}
@media (max-width: 500px) {
    .a > p {
        font-size: larger;
        font-weight: 300;
    }
    .nft_box > p {
        font-size: larger;
        font-weight: 300;
    }
}
@media (max-width: 400px) {
    .fs {
        font-size: 80%;
    }
    .a > p {
        font-size: medium;
        font-weight: 200;
    }
    .nft_box > p {
        font-size: medium;
        font-weight: 200;
    }
    .BoxForLineAndTitle {
        height: 4%;
    }
    .vertical-line1 {
        height: 17px; 
        width: 3px; 
    }
    .vertical-line2 {
        height: 17px; 
        width: 3px; 
    }
    .title {
        font-size: larger;
        text-indent: 9px; 
    }
}
@media (max-width: 320px) {
    .a > p {
        font-size: small;
        font-weight: 150;
    }
    .nft_box > p {
        font-size: small;
        font-weight: 150;
    }
}