@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,500;0,700;1,500&family=Alegreya:ital,wght@0,500;0,700;1,500&display=swap');
:root{
    --white:#F7EBF7;
    --pink:#FBC9FF;
    --black:#47324A;
    --purple:#935ADB;
    --purpler:#804ebd;
    --warmpink:#FFB5DA;
    --accent:#BA6E99;
    --sans: "Alegreya Sans", sans-serif;
    --serif: "Alegreya", sans-serif;
}
html{
    height:100%;
    width:100%;
    font-size:18px;
}
body:before{
    background-attachment: scroll;
    content: '';
    display: block;
    position: fixed;
    pointer-events: none;
    width:100vw;
    height:100vh;
    left:0;
    top:0;
    transform: scale(1);
    z-index: -700;
    background-image: url("/v1/images/heartubeatu.svg"), 
    linear-gradient(230deg, var(--accent) 0%, #6D4794 60%);
    background-size: cover, auto;
    background-position: center, 0% 0%;
    background-repeat: no-repeat, repeat;
}
body{
    font-family: var(--sans);
    color: var(--black);
    font-size:1rem;
    line-height:normal;
    font-weight:500;
}
body, html {
    scrollbar-width: auto;
    scrollbar-color: var(--warmpink) var(--white);
}
::selection {
    background: var(--purple);
    color: var(--white);
}
@viewport {
    width: device-width ;
    zoom: 1.0 ;
  } 

@-ms-viewport {
    width: device-width ;
  }
/*Alright. Can we keep it simple this time? Maybe, oh, idk, NOT make it so complicated it's uneditable? 😭*/
#container{
    max-width:70vw;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    line-height:normal;
}
.mainpink{
    width:100%;
    background-color: var(--pink);
    color:var(--black);
    margin: 10px 0px 0px;
    border-radius: 10px;
    border:2px solid var(--black);
    font-weight:600;
    padding:10px
}
.mainwhite{
    width:100%;
    background-color: var(--white);
    color:var(--black);
    margin: 10px 0px 0px;
    border-radius: 10px;
    border:2px solid var(--black);
    font-weight:600;
    padding:10px
}
.maintransparent{
    display:flex;
    width:100%;
    background-color: #FBC9FF7C;
    color:var(--black);
    margin: 10px 0px 0px;
    border-radius: 10px;
    border:2px solid var(--black);
    font-weight:600;
    padding:10px
}

/*PLACES EVERYONE*/
.left{
    float:left;
    text-align: start;
    padding:25px
}
.right{
    float:right;
    text-align: start;
    max-width: 50%;
}
.center{
    display:table;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    width: 65vw;
}
.centerleft{
    display:flex;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    max-width: 65vw;
}
.inner{
    height:20rem;
    width:45vw;
    margin-left:auto;
    margin-right:auto;
    overflow-y:auto
    }
/*text*/
p, h1, h2, h3, h4{
    text-align: start;
}
p{
    font-size: 1.1rem;
    font-weight: 600;
}
h1, h2, h3, h4{
    font-family: var(--serif);
}
textarea{
    background-color: var(--white);
    color: var(--black);
    border: dashed 3px var(--black);
    font-family: var(--sans);
    font-size:0.75rem;
    padding: 5px;
}
#footertext{
    text-align: center;
    color:var(--white);
    font-size:1rem;
    font-weight: 500;
}
/*buttons!!*/
button{
    border:none;
    border-radius:700px;
    color: var(--white);
    background-color: var(--purple);
    font-family: var(--sans);
    font-size:1.15rem;
    font-weight:600;
    padding: 15px 25px;
    margin:0  0.45rem 0.7rem;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px 5px #C9BFC9;
}
button:hover, #headerimage:hover {
    transition: all .2s ease-out;
    transform: scale(1.05); 
    }
.dual{
    max-width:21vw;
    width:100%
}
/*The little pieces*/
hr{
    background-color:var(--black);
    border:none;
    border-radius:5px;
    height:0.15rem;
}
hr.transparent{
    background-color:#47324A69;
    border:none;
    border-radius:5px;
    height:0.15rem;
}
hr.invisible{
    display:none;
    background-color:var(--black);
    border:none;
    border-radius:5px;
    height:0.15rem;
}
img, iframe{
    border-radius: 10px;
}
a{
    text-align: inherit;
    text-decoration: inherit;
    color:inherit
}
#color, #color02{
    text-align: inherit;
    text-decoration: underline;
    color:inherit;
}
.fa-brands:hover, #color:hover{
    color: var(--warmpink);
    transition: 0.6s ease;
    -webkit-transition: 0.6s ease
}
#color02:hover{
    color:#BA6E99;
    transition:0.6s ease;
    -webkit-transition: 0.6s ease
}
svg{
    min-width: 16px;
    width: 1.25rem;
    margin: -67px 0;
    fill:var(--white)
}
.fa-brands{
    font-size:1.15rem;
    margin:2px 2px 10px;
    color: var(--white)
}
#headerimage{
    width: inherit;
}
#preloader {
    align-items: center;
    justify-content: center;
    width: 100%;
    display: flex;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    background: var(--accent)
      url("images/oval.svg")
      no-repeat center;
    z-index: 9999;
  }
footer{
    padding:0.8rem;
}
/*the dreaded sizing*/
@media (max-width: 1024px){
    #container{
        max-width: 85vw;
    }
    .left, .right{
        float:none;
        text-align:center;
        max-width: inherit;
        padding:inherit;
    }
    .centerleft{
        display:table
    }
    hr.invisible{
        display:flex;
    }
    .dual{
        max-width:27vw;
        width:100%
    }
    .lyrics{
        width:60vw;
        font-size: 0.95rem
    }
    p, h1, h2, h3{
        text-align: center;
    }  
    br.invisi{
        display:none
    }
}
@media (max-width: 768px){
    html{
        font-size:18px
    }
    #container{
        max-width: 75vw;
    }
    .img, iframe{
        width:90%;
    }
    .even, .dual{
        max-width:65vw;
        width:100%
    }
    .inner{
        width: 60vw;
    }
}