html {
    scrollbar-color: #5444b6 #110e2b;
    scrollbar-width: auto;
        }

/* variables */

:root {
/* Main Colors */
--beige: #fbd7c1;
--pink: #ed5182;
--pink2: #c251ac;
--peach: #ffacaf;
--orange: #ff9067;
    
--lime: #bbff89;
--lavender: #a991df;
--light-purple: #5444b6;
--dark-purple: #110e2b;

/* Default mode (Dark) */

    /* Track */
::-webkit-scrollbar-track {
  background: var(--dark-purple);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--light-purple);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--light-purple);
}

    
    --header-text: var(--orange);
    --text-color: var(--beige);
    --link: var(--peach);
    --link-hover: var(--pink);
    --mark: var(--lime); 
    
    --bg: var(--dark-purple) url(bg1.png) repeat center;
    --content-bg: var(--dark-purple);
    
    --li-icon: var(--shell-li-icon);

    /* Light Mode */  
@media (prefers-color-scheme: light) {
    
        /* Track */
::-webkit-scrollbar-track {
  background: var(--lavender);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--light-purple);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--light-purple);
}
    
    --header-text: var(--light-purple);
    --text-color: var(--dark-purple);
    --link: var(--pink);
    --link-hover: var(--pink2);
    --mark: var(--light-purple); 
    
    --bg: var(--lavender) url(/bg1-light.png) repeat center;
    --content-bg: var(--beige);
    
    --li-icon: var(--starfish-li-icon);
    
    #home, #prev, #next {
    height: 30px;
    width: 30px;
    filter: hue-rotate(247deg) saturate(60) brightness(50%);
}
    
    #lightcontrast, .extra {
        filter:drop-shadow(2px 6px var(--lavender));
    }
    
    a {
        font-weight: 900;
    }
    
    }
    
}

body {
  font-family: Verdana;
  margin: 0;
background: var(--bg);
color: var(--text-color);
overflow: hidden;
}

p {
		margin: 10px;
    font-size: 1.2em;
}

h1, h2, h3, h4 {
    color: var(--header-text);
}


hr, #divider {
    border: 0px;
	border-top: 2px dotted var(--light-purple);
}

#divider {
	width: 50%;
}

a:link, a:visited {
  color: var(--link);
  text-decoration: none;
}

a:hover, a:active {
  color: var(--link-hover);
  text-decoration: none;
}

mark {
	color: var(--mark);
	background-color: transparent;
	margin: 1px;
}

/* Images */

#logo {
    width: 50%;
}

#fizzy
{
    position: absolute;
    top: 65%;
    left: 60%;
    width: 40%;
    max-width: 500px;
}

/* Divisions */

.flex {
  display: flex;  
height: inherit;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.flexbubble {
  display: flex;  
height: inherit;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 15%;
    width: 50%;
}

.center {
  text-align: center;
    width: 100%;
    height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

content {  
display: block;
background: var(--content-bg);
border: 2em transparent solid;
border-image: url("border.png") round 94;
    background-clip: padding-box;
  text-align: center;
    padding: 1em;
  width: 80%;
    max-width: 900px;
}

.speechbubble {
background: var(--light-purple);
color: var(--beige);
border: 2px solid transparent;
box-sizing: border-box;
margin: 1em 0; 
padding: 1em;
position: relative;
width: 60%;
}

.speechbubbletail {
    height: 2px;
border: 8px solid transparent;
border-left:8px solid var(--light-purple);
content: '';
}

.speechbubble::after{
margin-top:-3px
}

.speechbubble p {
        margin: 0;
        color: var(--beige);
    }

@media (max-width: 600px) {
    #logo {
        width: 80%;
    }
    #fizzy {
        width: 65%;
    }
    #fizzy, .flexbubble {
        position: static;
        left: auto;
    }
    .flex {
        position: static;
        left:auto;
        width: 100%;
    }
}