@import url(https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap);
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #303030;
    color: #fff
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
}

@font-face {
    font-family: "RainyHearts";
    src: local("RainyHearts"), url(/static/media/rainyhearts.2f088ce2.ttf) format("truetype");
    font-weight: 700
}

@font-face {
    font-family: "Bloks";
    src: local("Bloks"), url(/static/media/Blox2.45efeb9f.ttf) format("truetype");
    font-weight: 700
}

body,
html {
    margin: 0;
    overflow: hidden;
    height: 200%;
    width: 100%;
    animation: ymove 10s linear infinite;
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(/static/media/BGSOL.a7438894.gif);
    background-position: top;
    background-size: contain
}

@keyframes mymove {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 0 -100%
    }
}

.container {
    margin: auto;
    width: 80%;
    padding: 1rem;
    color: #fff;
    text-align: justify;
    text-align-last: center
}

.body {
    margin: auto;
    width: 50%;
    font-size: 18px
}

.Description,
h3 {
    font-size: 30px;
    color: #fff;
    font-family: "RainyHearts", cursive
}

.Description {
    margin: auto;
    width: 70%
}

.ColorBrown {
    color: #400
}

.Connection {
    font-family: "RainyHearts", cursive;
    color: #f7ed85;
    margin: auto;
    font-size: 35px;
    letter-spacing: 2.5px
}

.Bloks {
    font-size: 100px;
    white-space: nowrap;
    margin: 2rem 0;
    -webkit-text-stroke: 3px #fff;
    -webkit-text-fill-color: #f97316
}

.Bloks,
.BloksNormal {
    font-family: "Bloks", cursive
}

.BloksNormal {
    font-size: 50px
}

.responsive {
    width: 100%;
    max-width: 550px;
    min-width: 350px;
    height: auto
}

.button {
    width: 350px;
    font-family: "DoubleBubbleItalic";
    font-size: 60px;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #fff;
    background-color: #f97316;
    border: 3px solid #fff;
    border-radius: 50px;
    box-shadow: -3px 5px 1px #f97316;
    transition: all .3s ease 0s;
    cursor: pointer;
    outline: none
}

.button:hover {
    color: #400;
    border-radius: 50px;
    box-shadow: 0 2px 1px #f7ed85;
    transform: translateY(7px)
}

.grids {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 0 0;
    gap: 0 0;
    grid-auto-flow: row;
    grid-template-areas: "ImgLeft logo ImgRight" "ImgLeft text ImgRight" "ImgLeft mint ImgRight";
    margin: auto;
    width: 80%;
    height: 700px
}

.ImgLeft {
    grid-area: ImgLeft
}

.ImgLeft,
.ImgRight {
    justify-self: center;
    align-self: center
}

.ImgRight {
    grid-area: ImgRight
}

.logo {
    grid-area: logo
}

.logo,
.text {
    justify-self: center;
    align-self: center
}

.text {
    grid-area: text;
    text-align: center
}

.mint {
    grid-area: mint;
    justify-self: center;
    align-self: center
}

/*# sourceMappingURL=main.43872d16.chunk.css.map */