@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Regular.woff') format('woff');
         font-weight: 400;
         font-display: swap;
         font-style: normal;
  }
  
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: "Satoshi";
}

.main{
    height: 100vh;
    width: 100vw;
    display: flex;
    background-color:  #ff924c;
    flex-direction: column;
    position: fixed;
}

.marquee{
    height: 40vh;
    display: flex;
    align-items: center;
    rotate: -25deg;
}
.marquee-group{
    display: flex;
    overflow: hidden;
}
.marqee-inner{
    display: flex;
    flex-shrink: 0;
    /* background-color:rgb(255, 0, 76); */
}
.marquee p{
    font-size: 200px;
    color: #1c1a27;
    font-weight: 700;
}


.marquee span{
    color: royalblue;
}




.marquee2{
    height: 40vh;
    display: flex;
    align-items: center;
    transform: translateY(-10px);
    rotate: -25deg;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
}
.marquee-group2{
    display: flex;
    overflow: hidden;
    transform: translateX(-3734px);
}
.marqee-inner2{
    display: flex;
    flex-shrink: 0;
    /* background-color:rgb(255, 0, 76); */
}
.marquee2 p{
    font-size: 200px;
    color: #1c1a27;
    font-weight: 700;
}

.button{
    /* background-color: #3d1635; */
    width: 100vw;
    height: 30vh;
    display: flex;
    justify-content: center;
    z-index: 2;
}

.button a{
    text-decoration: none;
    color: #1c1a27;
}
.magnetic-button-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30vh;
    height: 100%;
    /* background-color: #ffffff24; */
    border-radius: 50px;

}
  
  .magnetic-button {
    height: 25vh;
    width: 25vh;
    font-size: 16px;
    border: 2px solid #1c1a27;
    border-radius: 50%;
    cursor: pointer;
    background-color:  transparent;
    color: #1c1a27;
    position: relative;
    z-index: 1;

}

.marquee2 span{
    color: blue;
}

@media (max-width:600px) {
    .marquee p{
        font-size: 100px;
    }
    .marquee2 p{
        font-size: 100px;
        color: #1c1a27;
        font-weight: 700;
    } 
}