@font-face {
    font-family: Comfortaa;
    src: url("Comfortaa-Regular.ttf");
}
@font-face {
    font-family: Comfortaa;
    font-weight: bold;
    src: url("Comfortaa-Bold.ttf");
}

html{
    scroll-behavior: smooth;
}
body{
    font-family: Comfortaa, serif !important;
    overflow-x: hidden;
    width:100vw;
}
body {
    width:calc(100vw - (100vw - 100%));
    width:-webkit-calc(100vw - (100vw - 100%));
    width:-moz-calc(100vw - (100vw - 100%));
}

.css-full-height{
    height:100vh;
    margin-bottom:-50px;
    padding-bottom:50px;
}

/*region circle*/
.css-circle-container{
    position:relative;
    overflow:hidden;
    height:100%;
    width:100%;
}
.css-circle-parent{
    position: absolute;
}
.css-circle{
    position: relative;
    border-radius: 50%;
    border-style: solid;
    border-width: 0;
    border-color: transparent;
}
.css-circle:hover{
    filter: brightness(103%);
}

.css-center {
    margin: auto;
    text-align: center;
}
.css-rounded{
    border-radius: 50%;
}
/*endregion circle*/

/*region animations*/
/*
@-webkit-keyframes
@-moz-keyframes
*/
@-webkit-keyframes bubble-animation {
    0% {top:0}
    100% {top:20px;}
}
@-moz-keyframes bubble-animation {
    0% {top:0}
    100% {top:20px;}
}
@keyframes bubble-animation {
    0% {top:0}
    100% {top:20px;}
}
.bubble-anim{
    animation: bubble-animation 1.5s ease-in-out 0s infinite alternate;
}
/*region animations*/

.css-box{
    padding: 16px;
}
.css-divider {
    margin: -1px 0;
    height: 4px;
    background: #333333
}
img.css-link:hover{
    filter: brightness(110%);
}
.headline{
    margin-top: 2vw;
}

.css-flex{
    display: flex;
    align-items:center;
    justify-content:center;
}
.css-flex-sm{
    align-items:center;
    justify-content:center;
}
.css-flex-md{
    align-items:center;
    justify-content:center;
}

a.anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}


/* Extra small devices (phones, 600px and down) */

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    #headline-circle-1-parent{
        top: 1vmax !important;
    }
    #headline-circle-2-parent{
        bottom: -40vmin !important;
    }
    #headline-text{
        font-size:12vw !important;
        margin-top: -11vw !important;
    }

    #product-img{
        width:45vmax !important;
        height:45vmax !important;
    }

    .css-flex-sm{
        display:flex;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .col-sm-right{
        float:right;
    }

    #product-img{
        width:35vmax !important;
        height:35vmax !important;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .css-flex-md{
        display:flex;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}