header {
    font-size: 40px;
}
body, html{
    margin:0;
    padding:0;
    font-family: Arial;
    overflow-x: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.scoller {
    overflow: scroll;
    scroll-snap-type: y mandatory;
}

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.U {
    color: #dfa4ec;
    margin-top: 40vh;
    font-size: 300px;
    margin-left: 40vw;
    text-shadow: 4px 4px 5px rgba(236, 167, 225, .7);
    transition: all 0.3s;
    width: 0vw;
    cursor: pointer;
    
}

/* .star{
    position: absolute;
}

.star:first-child{
    margin-left: 35vw;
    color: #9eecb7;
    margin-top: 15vh;
}
.star:nth-of-type(2){
    margin-left: 50vw;
    color: #eee7b3;
    margin-top: 0vh;
}
.star:nth-of-type(3){
    margin-left: 40vw;
    color: #cbb9ef;
    margin-top: -5vh;
}
.star:nth-of-type(4){
    margin-left: 53vw;
    color: #eec6b3;
    margin-top: 20vh;
}
.star:nth-of-type(5){
    margin-left: 36vw;
    color: #b3edee;
    margin-top: 10vh;
}
.star:nth-of-type(6){
    margin-left: 37vw;
    color: #efb9c3;
    margin-top: 20vh;
}
.star:nth-of-type(7){
    margin-left: 50vw;
    color: #baefd5;
    margin-top: 25vh;
} */

.U:hover{
    color: white;
    -webkit-text-stroke-width: 4px;
    -webkit-text-stroke-color: #e86f9d;
}

#can{
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    font-size: 30px;
    cursor: pointer;
}


.fade-in {
    margin-left: -400px;
}

.appear{
    margin-left: 100px;
    transition: 0.5s;
}

.card{
    margin-top: 100px;
    border-radius: 20px;
    border: 2px solid;
    width: 500px;
    height: 300px;
    padding: 30px;
}

.card:first-child {
    color: #e86f9d;
    box-shadow: 4px 5px 5px rgba(232, 111, 157, 0.3);
    border-color: rgba(232,111,157, 1);

}

.card-title{
    font-size: 40px;
}

.card-text{
    font-size: 20px;
}

#canvas1 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    background: white;
}
section {
    font-family: Josefin Sans;
    color: white;
    background: #202731;
    position: relative;
    align-items: center;
    min-height: 400px;
    padding: 100px 20vw;
    scroll-snap-align: start;
}

.pink {
    background-color: #dfa4ec;
}


.red {
    background-color: #e86f9d;
    fill: #e86f9d;
}

.green {
    background-color: rgb(72, 209, 204);
    fill: rgb(72, 209, 204);
}

.orange {
    background-color: rgb(247, 161, 2);
    fill: rgb(247, 161, 2);
}

.black {
    background-color: #202731;
    fill: #202731;
}

.darkpink {
    background-color: rgb(255, 72, 0);
    fill: rgb(255, 72, 0);
}

.darkred {
    background-color: rgb(32, 31, 34);
    fill: rgb(32, 31, 34);
}

.darkorange {
    background-color: rgb(255, 0, 85);
    fill: rgb(255, 0, 85);
}

.darkblack {
    background-color: rgb(68, 59, 82);
}

.darkgreen {
    background-color: rgb(139, 60, 81);
}

/* .wavepink {
    fill: #dfa4ec;
}


.wavered {
    fill: #e86f9d;
}

.wavegreen {
    fill: rgb(72, 209, 204);
}

.waveorange {
    fill: rgb(247, 161, 2);
}

.waveblack {
    fill: #202731;
}

.darkwavepink {
    fill: rgb(255, 72, 0);
}

.darkwavered {
    fill: rgb(32, 31, 34);
}

.darkwaveorange {
    fill: rgb(255, 0, 85);
}

.darkwaveblack {
    fill: rgb(68, 59, 82);
}

.darkwavegreen {
    fill: rgb(139, 60, 81);
} */

.wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 158px;
}

.wave :nth-child(2){
    animation: kaboom 5s ease infinite;
}

.wave :first-child{
    animation: kaboom 7s ease infinite;
}

/* .wavepink :first-child{
    animation: kaboom 1s ease infinite;
}  */


@keyframes kaboom {
    0% {
        transform: scale(1);
      }
    50% {
        transform: scale(1.05);
    }
  }


footer {
    background-color: black;
    height: 30vh;
    font-family: Josefin Sans;
    color: white;
    position: relative;
    padding-top: 20vw;
    padding-left: 10vw;
}

/* .themebutton{
    transition: .5s;
    font-size: 15px;
    margin-left: 100px;
    margin-top: 30px;
    position: absolute;
    background-image: linear-gradient(45deg, rgb(150, 150, 150) 0%, rgb(200, 200, 200) 100%);
    border: 1px solid;
    border-radius: 20px;
    
}

.themebutton:hover {
    transform: scale(1.3);
    box-shadow: 4px 4px 5px rgba(236, 167, 225, .7);
    background-image: linear-gradient(45deg, rgb(192, 19, 226) 0%, rgb(117, 15, 185) 100%);
} */

.heart {
    background-color: red;
    position: relative;
    display: inline-block;
    height: 30px;
    margin: 0 10px;
    top: 0;
    transform: rotate(-45deg);
    width: 30px;
    margin-left: 30vw;
}

.heart:before,
.heart:after {
    content: "";
    background-color: red;
    border-radius: 50%;
    height: 30px;
    position: absolute;
    width: 30px;
}

.heart:before {
    top: -15px;
    left: 0;
}

.heart:after{
    left: 15px;
    top: 0;
}

.heart {
    cursor: pointer;
    animation: pulse 1s ease infinite;
}



@keyframes pulse {
    0% {
        transform: scale(1) rotate(-45deg);
      }
    25% {
        transform: scale(1.7) rotate(-45deg);
    }
    50% {
        transform: scale(2) rotate(-45deg);
    }
  }

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background-image: linear-gradient(45deg, rgb(255, 115, 0) 0%, rgb(255, 0, 0) 100%);
    border-radius: 20px;    
}

::-webkit-scrollbar-thumb:hover {
    background-color: black;
    background-image: none;
    border-radius: 20px;    
}

.downloader {
    background-color: black;
    font-size: 30px;
    color: white;
    border-radius: 20px;
    padding: 10px;
}