@import url('https://fonts.googleapis.com/css2?family=Fjord+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stalemate&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body{
    background-color:white;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    letter-spacing:1px;
    text-align:justify;
    font-size:13px;
    line-height:20px;
    font-family:'Fjord One', sans-serif;
    margin:0 auto;
    color:black;
    animation: pulse 5s infinite alternate;
    transition: background-color 5s;
}

html{
    overflow:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

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

@keyframes pulse {
    0% {
        background-color:white;
    }
    100% {
        background-color:#fcebf9;
    }
}

#main{
    position:relative;
    width:800px;
    margin:90px auto;
}

.fixed-positions{
    width:auto;
    height:auto;
    display:flex;
    justify-content:space-evenly;
}

.isolde {
    height:650px;
    width:600px;
    background-color:white;
    border: 34px solid transparent;
    border-image: url('https://files.catbox.moe/vh64v6.png') 38 34 38 34 round;
    background-clip: padding-box;
    background-image:url('https://files.catbox.moe/8lz42k.png');
    background-position:center;
    background-size:cover;
    position:sticky;
    display:flex;
}

.actualmaincontent{
    height:auto;
    width:auto;
    display:flex;
    padding:16px;
    flex-direction:column;
}

.bigassheader{
    width:500px;
    height:auto;
    font-family:'Stalemate', cursive;
    font-size:78px;
}

.bigassmainbox {
    background-color:rgb(225, 209, 250);
    width:475px;
    height:auto;
    border-radius:10px;
    padding:10px;
    box-shadow: 4px 4px 4px 3px rgb(0, 0, 0, 20%);
    display:flex;
    margin-bottom:10px;
    position:relative;
    flex-direction:column;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.bigassmainbox::-webkit-scrollbar{
    display:none;
}

.menu{
    display:flex;
    justify-content:center;
    align-items:center;
    height:25px;
    width:500px;
    text-align:center;
    background-color:rgb(205, 194, 229);
    border-radius:10px;
    margin-top:15px;
    margin-bottom:10px;
}

a{
    color:rgb(148, 148, 214);
    text-decoration:none;
    transition: letter-spacing 0.3s ease;
}

a:hover {
    letter-spacing: 5px;
}

.isoldesaysbox{
    height:auto;
    width:auto;
    position:relative;
}

.quotationbox{
    background-color:white;
    position:relative;
    height:auto;
    width:425px;
    max-width:425px;
    border-radius:10px;
    padding:5px;
}

.quotationbox::after{
    content:'';
    position:absolute;
    bottom:17px;
    left:435px;
    border-width:10px;
    border-style:solid;
    border-color:white transparent transparent transparent;
    transform:rotate(-90deg);
}

.isolde2{
    height:auto;
    width:auto;
    left:430px;
    top:-50px;
    position:absolute;
    transform:rotate(15deg);
}

@keyframes isoldeBounce{
    0% { transform:rotate(-15deg) translateY(0); }
    30% { transform:rotate(-15deg) translateY(-20px); }
    60% { transform:rotate(-15deg) translateY(10px); }
    100% { transform:rotate(-15deg) translateY(0); }
}

.isoldeBounce{
    animation:isoldeBounce 0.7s ease-out;
}

.maininfo{
    height:auto;
    width:100%;
    background-color:rgb(220, 185, 252);
    border-radius:10px;
    margin-top:10px;
}

.infoheader{
    height:auto;
    width:465px;
    padding:5px;
    background-color:rgb(208, 126, 255);
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    font-family:'Montserrat', sans-serif;
    font-size:18px;
}

.text{
    margin:8px;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.text::-webkit-scrollbar{
    display:none;
}

.openbar{
    display:flex;
    height:auto;
    width:100%;
    justify-content:space-between;
    align-items:center;
    border-bottom:rgb(193, 142, 250) dashed 2px;
}

.thingytohide{
    height:auto;
    width:475px;
    margin-top:8px;
    overflow:hidden;
    top:65px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
}

.startsdownanduppyarrow{
    height:20px; 
    width:20px; 
    transition:transform 0.5s ease;
    transform-origin:center;
}

.startsdownanduppyarrow.open{
    transform:rotate(180deg);
}

.cbox {
    height:400px;
    width:200px;
    position:fixed;
    left:10vw;
    top:94vh;
    display:flex;
    flex-direction:column;
    background-color:white;
    align-items:center;
    border:rgb(172, 172, 255) double 4px;
    border-radius:10px;
    padding:5px;
    cursor:pointer;
    transform: translateY(0);
    transition: transform 1s ease-in-out;
}

.cbox:hover{
    transform:translateY(-75%);
}