style_grid.css

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    /* overflow-y: hidden; */
}

html {
    /* font-family: "Poppins"; */
    font-family: 'Satoshi', sans-serif;
    font-style: normal; /* is it necessary??? */
    font-size: 24px;
    /* background-color:cadetblue ; */
    overflow-x: hidden;

    /* height: 100%; */
}

/* body {
    min-height: 100%;
} */

#myheader {
    margin: 50px 64px 0;
    /* border: 1px solid black; */
    position: relative;
}

#myheader img {
    vertical-align: middle;
}

#myheader nav {
    position: absolute;
    right: 0;
    bottom: 50%;
    transform: translateY(50%);
}

#myheader nav ul {
    display: flex;  
}

#myheader nav li {
    list-style: none;
    padding-left: 24px;
    font-size: 16px;
    font-weight: 500;
}

#myheader nav li:nth-child(3) {
    font-weight: 900;
}

a {
    text-decoration: none;
    color: #000000;
}

.bubble1 {
    position: absolute;
    width: 2000px;
    height: 1190px;
    left: 2000px;
    top: 1251px;
    z-index: -2;
    background: radial-gradient(34.29% 36.81% at 50% 46.13%, rgba(58, 192, 252, 0.964792) 0%, rgba(173, 145, 255, 0.981469) 45.31%, rgba(255, 255, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

}

.bubble2 {
    position: absolute;
    width: 1966px; /*1466*/
    height: 1818px; /*1218*/
    left: -718px; /*-571*/
    top: -404px; /*-174*/
    z-index: -2;
    background: radial-gradient(28.85% 36% at 53.89% 50%, rgba(189, 0, 255, 0.482396) 0%, rgba(220, 0, 134, 0.490735) 30.21%, rgba(255, 0, 0, 0.5) 59.38%, rgba(255, 255, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

}

.bubble3 {
    position: absolute;
    width: 1415px; /*1232*/
    height: 1140px; /*1024*/
    left: -425px; /*-425*/
    top: 2439px; /*2670*/
    z-index: -2;

    background: radial-gradient(34.29% 36.81% at 50% 46.13%, rgba(255, 226, 121, 0.964792) 0%, rgba(255, 145, 231, 0.981469) 40.97%, rgba(255, 255, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;   
} 

/* GRID CONTAINER */

.grid-container {
    display: grid;
    margin: 64px 64px 0;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
}


/* .grid-container > * {
    border: 2px solid orange;
} */

.grid-container video {
    display: block;
    width: 100%;
}

.grid-container .first-ad {
    background-color: white;
    /* height: 100%; */
    padding: 40px 56px 0;
    /* margin-bottom: 64px; */
    color: #1F1F1F;
    font-weight: 700;
    font-size: 4.45vw; /* 64px; */
    line-height: 76px;  
}

.grid-container .first-ad-text {
    margin-bottom: 64px;        /*..because margin-top in button does not work..*/
}

.grid-container .button {
    display: inline;
    padding: 1rem 1.67rem;
    /* padding: 24px 40px; */
    /* margin-top: 64px; */
    background-color: #1F1F1F;
    border-radius: 30px;
    color: white;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    cursor: pointer;
}

.button:hover{
    background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
    animation: slidebg 5s linear infinite;
}

@keyframes slidebg {
    to {
        background-position:20vw;
    }
}

#scrolling {
    display: flex;
    width: 100%;
    /* overflow-x: scroll; */
    /* overflow: hidden; */
    scroll-snap-type: x mandatory;
    margin: 0 64px;
    perspective: 1000;

}
.scroller {
    display: flex;
    /* flex-direction: column; */
    
    /* scroll-snap-align: start; */
    width: calc(calc(100% / 3) - 16px);
}

.scrolling-wrapper {
    grid-column: span 12;
    overflow-x: scroll;
    /* overflow-y: hidden; */
    /* white-space: nowrap; */
    padding: 80px 0;
    /* margin: 0 -50px 0 -50px;  */
            /* PROBLEMATICCC  xxxx */
    /* overflow: hidden; */

    display: grid;
    column-gap: 32px;
    grid-auto-columns:  calc(50% - 16px);
    grid-auto-flow: column;

    scroll-snap-type: x mandatory;

    /* transition-property: transform;
    transition: transform 1s; */
    transform: translate(0);
    /* animation: scrolly 3s linear; */
} 
.scrolling-wrapper > * {
    border-radius: 30px;
}
.scrolling-wrapper > .tracks-grid {
    scroll-snap-align: end;
    scroll-snap-stop: always;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrolling-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrolling-wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

@keyframes scrolly {
    0%   { transform: translateX(0px); }
    50%  { transform: translateX(200px); }
    100% { transform: translateX(200px); }
  }


.second-banner {
    /* width: 300px; */
    position: relative;
    overflow: hidden;    /*so that border-radius of div acts on image*/
}

.second-banner-img {
    display: block;
    width: 100%; /* ....maybe not, but the image shrinks correctly*/
    /* height: 100vh; */
}

.img-emotion {
    border-radius: 120px;
    background-color: white;
    position: absolute;
    left: 32px;
    bottom: 32px;
}

.img-emotion img {
    vertical-align: middle;
    padding: 16px 16px 16px 32px;
}

.img-emotion span {
    vertical-align: middle;
    padding-right: 32px;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}

.square {
    grid-column: span 6;
    border-radius: 30px;
    box-shadow: 0px 4px 104px rgba(0, 0, 0, 0.05);
}

.white-space {
    grid-column: span 7;
}


/* My swipper is called ticker */
/* .swipper {
    grid-column: span 12;

    font-weight: 900;
    font-size: 88px;
    line-height: 95px;
    color: #313131;
    white-space: nowrap;
    overflow: hidden;
    
    padding: 80px 0;
    display: flex;
}
@keyframes swip {
    0% { transform: translate3d(100%, 0, 0); }
    100% { transform: translate3d(-200%, 0, 0); }
}
.swipper-item { 
    animation: swip linear 30s infinite;
} */

.ticker-wrap {
    grid-column: span 12;
    /* width: 100%; */
    padding: 80px 0;
    margin: 0 -100px 0 -100px; /* PROBLEMATICCC  xxxx*/
    overflow: hidden;
    white-space: nowrap;
}
.ticker {
    display: inline-block;
    /* margin-top: 5px; */
    animation: marquee 60s linear infinite;
}
.item-collection-1 {
    position: relative;
    left: 0%;
    animation: swap 60s linear infinite;
}

.item {
    display: inline-block;
    padding: 0 1rem;

    font-weight: 900;
    font-size: 88px;
    line-height: 95px;
    color: #313131;
}

/* Transition */
@keyframes marquee {
    0% {
    transform: translateX(0)
    }
    100% {
    transform: translateX(-100%)
    }
}

@keyframes swap {
    0%, 50% {
    left: 0%;
    }
    50.01%,
    100% {
    left: 100%;
    }
}

.trans {
    color: transparent;
}
.fade {
    opacity: 0.3;
}

.plain {
    grid-column: span 5;

    font-weight: 700;
    font-size: 40px;
    line-height: 50px;
    /* margin: 0 64px 112px; */
    margin-bottom: 80px; 
}

.card {
    grid-column: span 4;
    border-radius: 30px;
    box-shadow: 0px 4px 104px rgba(0, 0, 0, 0.05);
    background-color: white;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;

}

.card img {
    margin: auto 0;
}

.card p {
    font-weight: bold;
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 56px;
    text-align: center;
}

.tracks-grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    background-color: white;
    box-shadow: 0px 4px 104px rgba(0, 0, 0, 0.05);
    padding-left: 48px;
    padding-right: 56px;
}

.tracks-grid > *:not(:last-child) {
    border-bottom: 2px solid #f4f4f4;
}

.track {
    display: flex;
    align-items: center;
}

.track img {
    /* max-width: 98px; */
    width: 98px;
    border-radius: 50%;
}

.track p {
    padding-left: 32px;
    font-weight: 700;
    font-size: 32px;
    line-height: 43px;
}
/* 
h1 {
    height: 200px;
    font-size: 20px;
} */
/* #scrolling {
    margin:0 64px;
} */


#play-pause {
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: relative;
    /* top: 50%;
    left: 50%; */
    background-image: url(img/play.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.play {
    background-image: url(img/play.svg);
}

.pause {
    background-image: url(img/pause.svg)!important;
}

.circular-progress, .circular-progress2, .circular-progress3, .circular-progress4, .circular-progress5, .circular-progress6, .circular-progress7, .circular-progress8, .circular-progress9 {
    float: right;
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: conic-gradient(#1ED760 0deg, #cecece 0deg);
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.circular-progress::before, .circular-progress2::before, .circular-progress3::before, .circular-progress4::before, .circular-progress5::before, .circular-progress6::before, .circular-progress7::before, .circular-progress8::before, .circular-progress9::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: white;
}

.stores {
    grid-column: span 12;
    /* width: 80%; */
    margin: 0 20%;
    display: flex;
    justify-content: space-evenly;
}
.stores img:hover{
    box-shadow: 20px 60px 106px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    cursor: pointer;
}

footer {
    grid-column: span 12;
    position: relative;
    margin-top: 455px;
}

.surprised-footer {
    position: absolute;
    left: 50%;
    /* bottom: 280px; */
    top: -280px;
    z-index: -1;
    transform: translate(-50%);
}

.footer-grid {
    background-color: black;
    padding: 58px 64px 42px 64px;

    border-radius: 30px;
    margin-bottom: 76px;

    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    /* gap: 10px; */
}

.footer-grid p {
    margin: 0;

    font-weight: 700;
    font-size: 20px;
    line-height: 27px;

    color: #FFFFFF;
}
.footer-grid .mid-row {
    grid-column: span 6;
    height: 185px;
}

.footer-grid .left{
    grid-column: span 2;
    /* margin-left: 62px; */
}

/* .footer-grid .top {
    padding-top: 57px;
}

.footer-grid .bot {
    margin-bottom: 42px; 
} */


/* DOT ELASTIC */

.dot-elastic {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dot-elastic 1s infinite linear;
  }
.dot-elastic::before, .dot-elastic::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
}
.dot-elastic::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dot-elastic-before 1s infinite linear;
}
.dot-elastic::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dot-elastic-after 1s infinite linear;
}

@keyframes dot-elastic-before {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1.5);
    }
    50% {
        transform: scale(1, 0.67);
    }
    75% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}
@keyframes dot-elastic {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 1.5);
    }
    75% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}
@keyframes dot-elastic-after {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 0.67);
    }
    75% {
        transform: scale(1, 1.5);
    }
    100% {
        transform: scale(1, 1);
    }
}

/* .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 25px;
    cursor: pointer;
}

.hidden {
    visibility: hidden;
} */


/* CIRCULAR PROGRESS BAR*/

/* .progress-bar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid #333;
    overflow: hidden;
  }
  
  .progress-bar-inner {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #333;
    transform: rotate(0deg);
    animation: progress-bar-rotate 2s linear infinite;
  } */

  /* .progress-bar {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid #333;
    background: linear-gradient(to right, #0091ff 0%, #0091ff 20%, transparent 20%, transparent 100%);
  }
  
  .progress-bar-inner {
    width: 20%;
    height: 100%;
    border-radius: 50%;
    background: #0091ff;
    animation: progress-bar-rotate 10s linear infinite;
  }
  
  @keyframes progress-bar-rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  } */



/* /////// SCREENSSS ////////////   */

@media (max-width: 1290px) {
    .first-ad br {
        content: "";
    }
    .first-ad br:after {
        content: " ";
    }



    .grid-container .first-ad-text {
        margin-bottom: 32px;        /*..because margin-top in button does not work..*/
    }

    .plain, .white-space {
        grid-column: span 6;
    }

    
}

@media (max-width: 1120px) {
    .footer-grid .left {
        grid-column: span 6;
    }
    .footer-grid .mid-row {
        height: 64px;
    }
    .footer-grid .white-space-footer {
        display: none;
    }

    .footer-grid .top, .footer-grid .bot {
        grid-column: span 2;
        margin-top: 32px;
    }

    /* .stores {
        height: 65px;
        margin: 0 10%;
    } */
}

@media (max-width: 1080px) {
    /* sthing with the second banner */
    .track p {
        font-size: 24px;
        line-height: 35px;
    }
}

@media (max-width: 1050px) {
    .first-ad .first-ad-text {
        line-height: 56px;
    }

    html {
        font-size: 16px;
    }
    .grid-container .button {
        font-size: 1.3rem;
        border-radius: 25px;
    }

    .grid-container .first-ad-text {
        margin-bottom: 24px;        /*..because margin-top in button does not work..*/
    }

    .tracks-grid {
        padding-left: 30px;
        padding-right: 35px;
    }

    .track p {
        font-size: 20px;
        line-height: 30px;
    }
    .track > div {
        width: 50px;
        height: 50px;
    }
    .track img {
        width: 72px;
    }
    #play-pause {
        background-size: 15px;
    }
}

@media (max-width: 810px) {
    .scrolling-wrapper {
        grid-auto-columns: 100%;
    }
    .scrolling-wrapper > .second-banner {
        scroll-snap-align: start; /* this was end... but dont know why *-* */
        scroll-snap-stop: always;
    }
}

@media (max-width: 768px) {
    #myheader nav {
        display: none;
    }
}

@media (max-width: 530px) {  /* just for testing - all code will be on the 480; */

    .square, .card, .plain {
        grid-column: span 12;
    }

    .first-ad-text {
        font-size: 40px;
    }

    .scrolling-wrapper {
        grid-auto-columns: 100%;
    }
    .scrolling-wrapper > .second-banner {
        scroll-snap-align: start; /* this was end... but dont know why *-* */
        scroll-snap-stop: always;
    }

    .plain {
        text-align: center;
    }

    .white-space, .white-space-footer, .mid-row { /* ???????????????????????? */
        display: none;
    }

    .stores {
        width: 100%;
        margin: 0;
        flex-direction: column;
        gap: 50px;
    }

    .stores img {
        width: 300px;
        margin: 0 auto;
    }

    .footer-grid > * {
        grid-column: span 12;
    }

}

@media (max-width: 480px) {
    .square, .card {
        grid-column: span 12;
    }
}

/* #canvas-container {
    width: 100%;
    height: 4540px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
} */

canvas {
    position: absolute;
    top: 0;
    right: 0;
   
    z-index: -3;
   
    overflow: hidden;
    /* overflow: clip;
    overflow-clip-margin: content-box;  */
    /* hihihi ....from the highloft ->> did not work ΄:( */
    /* overflow: hidden; */
}