@font-face {
    font-family: Gluten;
    src: url(../../assets/fonts/static/Gluten-Regular.ttf) format('truetype');
}

@font-face {
    font-family: Comic;
    src: url(../../assets/fonts/Comic-Sans-MS.ttf) format('truetype');
}

body,
html {
    max-width: 100vw;
    scroll-behavior: smooth;
    overflow-x: hidden;
    box-sizing: border-box
}

.basic-setup {
    margin: 0;
    padding: 0;
    border-style: none;
}

.main-section {
    background-color: #3861FB;
    background: #3861FB;
    color: rgb(255, 255, 255);
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

@media (min-width:576px) {
    .main-section {
        padding: 36px;
    }
}

@media (max-width:575px) {
    .main-section {
        padding: 8px;
    }
}

.soundObj {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: min(40px, calc(10vw)) !important;
    max-height: min(40px, calc(10vw)) !important;
}

.big-coin {
    max-width: min(200px, calc(25vw - 72px)) !important;
    max-height: min(200px, calc(25vh - 72px)) !important;
    padding: 8px;
}

.big-pig {
    max-width: min(1068px, calc(75vw - 72px)) !important;
    max-height: min(768px, calc(75vh - 72px)) !important;
}

.small-pig {
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vw - 32px) !important;
    min-width: calc(100vw - 32px) !important;
    min-height: calc(100vw - 32px) !important;
}

.small-trough {
    max-width: calc(100vw - 64px) !important;
    max-height: calc((100vw - 64px) * 3) !important;
    min-width: calc(100vw - 64px) !important;
    min-height: calc((100vw - 64px) * 3) !important;
}

.fill-div {
    max-width: 100% !important;
    max-height: 100% !important;
}

@media (min-width:576px) {
    .mobile-only {
        display: none;
    }
}

@media (max-width:575px) {
    .desktop-only {
        display: none;
    }
}

.relative {
    position: relative;
}

.hidden {
    visibility: hidden;
}

.small-coin-1 {
    position: absolute;
    top: 24px;
    left: calc(50% - ((calc(100vw - 72px))/2));
    max-width: calc(100vw - 72px) !important;
    max-height: calc(100vw - 72px) !important;
    min-width: calc(100vw - 72px) !important;
    min-height: calc(100vw - 72px) !important;
    padding: 8px;
}

.small-coin-2 {
    position: absolute;
    left: calc(50% - ((calc(100vw - 72px))/2));
    top: calc(50% - ((calc(100vw - 72px))/2));
    text-align: center;
    max-width: calc(100vw - 72px) !important;
    max-height: calc(100vw - 72px) !important;
    min-width: calc(100vw - 72px) !important;
    min-height: calc(100vw - 72px) !important;
    padding: 8px;
}

.small-coin-3 {
    position: absolute;
    bottom: 24px;
    left: calc(50% - ((calc(100vw - 72px))/2));
    max-width: calc(100vw - 72px) !important;
    max-height: calc(100vw - 72px) !important;
    min-width: calc(100vw - 72px) !important;
    min-height: calc(100vw - 72px) !important;
    padding: 8px;
}

.center {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
}

.topleft {
    position: absolute;
    top: 0px;
    left: 0px;
}

.topright {
    position: absolute;
    top: 0px;
    right: 0px;
}

.bottomleft {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.bottomright {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.pop-up {
    display: none;
    z-index: 10;
    color: black;
    background-color: transparent;
    min-width: calc(75vw - 72px) !important;
    /* min-height: calc(75vh - 72px) !important; */
    font-family: Comic;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.pop-back {
    min-width: 100% !important;
}

.pop-front {
    background-color: #D9D9D9;
    border-radius: 25px;
}

.pop-coin {
    padding: 8px;
}

.pop-link {
    padding: 8px;
}

.pop-copy {
    padding: 8px;
}

.pop-copy-area {
    padding: 8px;
}

.pop-sec-1 {
    /* min-height: calc(50vw + 16px) !important; */
    max-height: 33vh !important;
}

.pop-sec-2 {
    max-height: 33vh !important;
}

.pop-sec-3 {
    max-height: 33vh !important;
}

.close-button {
    position: absolute;
    top: 8px;
    right: 16px;
    max-width: 32px !important;
    max-height: 32px !important;
}

#maddress {
    font-size: 3.3vw;
}

#daddress {
    font-size: 1.5vw;
}

@media (min-width:576px) {
    .pop-up {
        min-width: calc(75vw - 72px) !important;
        /* min-height: calc(75vh - 72px) !important; */
    }
    .pop-coin {
        max-width: min(200px, calc(25vw - 72px)) !important;
        max-height: min(200px, calc(25vh - 72px)) !important;
    }
    .pop-link {
        max-width: min(96px, calc(25vw - 72px)) !important;
        max-height: min(96px, calc(25vh - 72px)) !important;
    }
    .pop-copy {
        max-width: min(48px, calc(25vw - 72px)) !important;
        max-height: min(48px, calc(25vh - 72px)) !important;
    }
    .pop-copy-area {
        max-width: min(1068px, calc(75vw - 72px)) !important;
    }
}

@media (max-width:575px) {
    .pop-up {
        min-width: 100vw !important;
        min-height: 100vh !important;
        position: fixed;
    }
    .pop-front {
        min-width: calc(100vw - 8px) !important;
        min-height: 100vh !important;
    }
    .pop-coin {
        max-width: 50vw !important;
        max-height: 33vh !important;
        min-width: 50vw !important;
        min-height: 50vw !important;
    }
    .pop-link {
        min-width: 15vw !important;
        min-height: 15vw !important;
        max-width: max(32px, 20vw) !important;
        max-height: max(32px, 20vw) !important;
    }
    .pop-copy {
        min-width: 10vw !important;
        min-height: 10vw !important;
        max-width: max(32px, 10vw) !important;
        max-height: max(32px, 10vw) !important;
    }
    .pop-copy-area {
        max-width: 100% !important;
    }
    .close-button {
        right: 24px;
    }
}

.social-section {
    background-color: #3861FB;
    background: #3861FB;
    color: rgb(255, 255, 255);
    padding: 36px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.social-image {
    padding: 0px;
    width: calc(100vw / 12);
    height: calc(100vw / 12);
    max-width: min(100px, calc(100vw / 12)) !important;
    max-height: min(100px, calc(100vw / 12)) !important;
    min-width: 64px !important;
    min-height: 64px !important;
}

.header-font {
    font-family: Gluten;
    color: rgb(236, 0, 140);
    text-shadow: 0px 0px 7px white;
    font-weight: 400;
}

@media (min-width:576px) {
    .header-font {
        font-size: 60px;
    }
    .about-section {
        padding: 36px;
        font-size: 28px;
    }
    .tokenomics-section {
        padding: 36px 36px 72px 36px;
        font-size: 28px;
    }
}

@media (max-width:575px) {
    .header-font {
        font-size: 32px;
    }
    .about-section {
        padding: 32px;
        font-size: 18px;
    }
    .tokenomics-section {
        padding: 32px 32px 64px 32px;
        font-size: 18px;
    }
}

.about-section {
    background-color: #3861FB;
    background: #3861FB;
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: Comic;
}

.tokenomics-section {
    background-color: #3861FB;
    background: #3861FB;
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: Comic;
}

.footer-section {
    background-color: #2246CE;
    background: #2246CE;
    color: rgb(255, 255, 255);
    padding: 36px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.footer-hidden {
    color: #2246CF;
    font-weight:100;
    font-size: 6px;
}

.tooltip {
    position: relative;
    display: inline-block;
    z-index: 20;
    opacity: 1;
}

.tooltip .tooltiptext {
    visibility: hidden;
    min-width: 140px;
    max-width: min(1068px, calc(75vw - 72px)) !important;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 20;
    bottom: 100%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
    z-index: 20;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 20;
}

@media (min-width:576px) {
    .tooltip .tooltiptext {
        min-width: 140px;
        max-width: min(1068px, calc(75vw - 72px)) !important;
        bottom: 100%;
        left: 50%;
        margin-left: -75px;
    }
}

@media (max-width:575px) {
    .tooltip .tooltiptext {
        visibility: hidden;
    }
    .tooltip:hover .tooltiptext {
        visibility: hidden;
        opacity: 0;
    }
}