*{
    margin: 0;
    padding: 0;
    transition: 0.2s;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

p,h1,h2,h3{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;        
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}


body {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-feature-settings: "liga" 1, "calt" 1;
  background-color: #573cf9;
}

section{
    padding: 30px 5%;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-direction: column;
}

img{
    width: 100%;
    pointer-events: none;
}

.width-container{
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

.width-container-1000{
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}

.width-container-700{
    max-width: 700px;
    width: 90%;
    margin: 0 auto;
}

.row{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.row-pc, .row-pc-reverse{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.column, .column-pc-reverse{
    display: flex;
    flex-direction: column;
}


.font-bold{
    font-weight: bold;
}

.font-normal{
    font-weight: normal;
}

.text-yellow{
    color: #ffbc27;
}

.text-white{
    color: white;
}

.text-black{
    color: #000000;
}


.text-purple{
    color: #573cf9;
}

.text-purple-light{
    color: #bfc3ff;
}

.border-purple{
    border: solid 2px #573cf9;;
}

.background-yellow{
    background-color: #ffbc27;
}

.background-white{
    background-color: white;
}

.background-purple{
    background-color: #573cf9 ;
}

.background-purple-lightish{
    background-color: #8875f3 ;
}

.background-purple-dark{
    background-color: #2f2375 ;
}

.background-purple-light{
    background-color: #bfc3ff;
}

.background-grey-light{
    background-color: rgb(233, 233, 233);
}

.round{
    border-radius: 25px;
}

.round-s{
    border-radius: 10px;
}

.pad{
    padding: 15px;
}

.pad-s{
    padding: 7px 15px;
}

.gap{
    gap: 15px;
}

.gap-30{
    gap: 30px;
}

.gap-50{
    gap: 50px;
}

.margin-top-30{
    margin-top: 30px;
}

.margin-top-50{
    margin-top: 50px;
}

.margin-top-100{
    margin-top: 100px;
}

.margin-bottom-30{
    margin-bottom: 30px;
}

.margin-bottom-50{
    margin-bottom: 50px;
}

.margin-bottom-100{
    margin-bottom: 100px;
}

.shadow-black{
     box-shadow: 0 10px 20px #000000;
}

.shadow-purple-dark{
    box-shadow: 0 10px 20px #2d1f7a ;
}

.shadow-purple-light{
     box-shadow: 0 6px 6px #bfc3ff;
}

a{
    text-decoration: none;
    color: white;
}

.center{
    text-align: center;
    margin: 0 auto;
}

.wrap{
    flex-wrap: wrap;
}

.wrap-no{
    flex-wrap: nowrap;
}

.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
opacity: 1;
transform: translateY(0);
}

.selectable, .selectable *{
    user-select: all;
    pointer-events: all;
}

@media (min-width: 768px) { 

    *{
        box-sizing: border-box; /* Include padding/border in width */
    }

    .row-pc{
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
    }

    .hide-mobile{
        visibility: visible;
    }

    .hide-pc{
        visibility: collapse;
    }

    .column-pc-reverse{
        flex-direction: column-reverse;
        gap: 50px;
    }

    .row-pc-reverse{
        flex-direction: row-reverse;
    }

    .mobile-only{
         display: none; 
    }
}

@media (max-width: 767px) {
    .desktop-only  {
         display: none; 
    }
}