@import './colors.css';
@font-face {
    font-family: 'metropolislight';
    src: url('../fonts/metropolis-light-webfont.woff2') format('woff2'),
    url('../fonts/metropolis-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metropolismedium';
    src: url('../fonts/metropolis-medium-webfont.woff2') format('woff2'),
    url('../fonts/metropolis-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'metropolisbold';
    src: url('../fonts/metropolis-bold-webfont.woff2') format('woff2'),
    url('../fonts/metropolis-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
html {
    height: 100%;
    scroll-behavior: smooth;
}

#msg {
  
    text-align: center;
}
a {
    text-decoration: none !important;
}

ul {
    padding: 0 !important;
}

canvas {
    height: 70vh;
}
input {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    color: #fff;
    width: 50%;
    outline: none !important;
}
#social {
    padding: 0 !important;
    list-style: none;
    position: absolute;
    top:7%;
    right: 0;
    width: 100%;
    text-align: right;

}
#social::after {
    content: '';
    width: 100%;
    background: url("../img/pin.png") no-repeat right;
    position: absolute;
    bottom: -11px;
    right: 0;
    height: 11px;

}
#social::before {
    content: '';
    width: 20%;
    height: 4px;
    position: absolute;
    background: transparent linear-gradient(180deg, #83EBF3 0%, #4CF146 100%) 0% 0% no-repeat padding-box;
    bottom: -7px;
    right: 25%;
}
.btn-grad {
    background: linear-gradient( 90deg, #43A4D0 0%, #47B5CD 30%,  #27D3B8 100%);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
#social li {
    display: inline-block;
    margin: 0 5px;
}
canvas {
    width: 100%;
    object-fit: contain;
}
#subscribe {
    background-color: #413F3D;
    min-height: 75%;
    position: absolute;
    right: 0;
    top: 52%;
    transform: translateY(-50%);
    font-family: "metropolislight";
}
#soon {
    font-family: 'metropolismedium';
    font-size: 4rem;

}
#letterS {
    position: absolute;
    z-index: 0;
}
@media screen and (max-width: 1200px) {
    #subscribe {
        height: auto;
    }
    #canvas {
        height: 90vh;
        background: url("../img/bgdots.png") repeat center;
    }
    #social {
        position: relative;
        right: 5vw;
    }
    #social::before {
        content: '';
        width: 50%;
        left: 0;
    }
    #soon {

        line-height: 1;
    }
}