/* these are the main colors and header image
       replace them with anything you want! */
    :root {
        --header-bg: url("images/header.png");
        --accent-color: #24c7ba;
        --link-color: #0ca1a5;
        --link-color2: #ffffff;
        --button-color: ##0ca1a5;
        --buttontext-color: #dee7e4;
        --bg-color: #1b1e26;
        --bg-color2: #749489;
        --text-color: #dee7e4;
        --favorite-color: #0ca1a5;
        --red-color: #c24d51;
    }
    ::selection {
        background: var(--accent-color);
        color: var(--bg-color);
    }
 #guestbook {
       text-decoration: none;
        background-color: #0ca1a5;
        font-family: "Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        padding: 0.8em;
        color: white;
        border-radius: 0.5em;
        max-width: 150px;
        /* you can change the text-align to center or right if you want it placed differently */
        text-align: center;
     place-items: center;
     display: block;   
  margin-left: auto;  
  margin-right: auto;
  width: 80%;  
border: 12px solid transparent; 
border-image: url('images/starborder.png') 57 round;
        outline-style: dashed;
        outline-color: rgba(222, 231, 228, 0.33);
        outline-width: 3px;
        outline-offset: -10px;
     border-image-outset: .4;
     
        }
    #guestbook:hover {
       

        transition: all ease 400ms;
 transform: scale(1.05) rotate(-10deg) translate(0px, -5px) skewX(0deg);
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  opacity: 1;
  filter: brightness(1);
  color: #ffffff;
  border-color: rgba(133, 252, 255, 0.83);
    }


    .hflatside {
        color: #faf6ea;
        background-color: #0ca1a5;
        font-family: "Varela Round", sans-serif;
        margin-bottom: 0;
        padding-top: 1em;
        padding-bottom: 0.7em;
        padding-left: 0.7em;
        padding-right: 0.7em;
        border-radius: 8px 8px 0 0;
        width: 170;
        text-align: left;
        min-height: 50;
    }

    #statuscafe {
        padding: 0.2em;
        background-color: #faf6ea;
        border: 5px solid #0ca1a5;
        border-top-style: none;
        border-radius: 0 0 10px 10px;
        min-height: 50;
        max-height: fit-content;
        width: 170;
        margin-top: auto;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        font-family: Verdana, sans-serif;
    }
    #statuscafe-username {
        color: #0ca1a5;
        margin-bottom: 0.5em;
        margin-top: 0.1em;
        margin-left: 0.4em;
        margin-right: 0.4em;
    }
    #statuscafe-content {
        color: #32567d;
        margin: 0 1em 0.5em 1em;
    }
    body {
        background-color: var(--bg-color2);
        background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(5) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%239be9d7ff'/><path d='M0-10C-.011-4.49-4.485.03-10 .03-4.485.03-.011 4.49 0 10 .011 4.498 4.493.001 10-.01 4.493-.02.012-4.498 0-10zm0 20c-.011 5.51-4.485 10.03-10 10.03 5.515 0 9.989 4.46 10 9.97.011-5.502 4.493-9.999 10-10.01C4.493 19.98.012 15.502 0 10zm20-20C19.989-4.49 15.515.03 10 .03c5.515 0 9.989 4.46 10 9.97.011-5.502 4.493-9.999 10-10.01-5.507-.01-9.988-4.488-10-9.99zm0 20c-.011 5.51-4.485 10.03-10 10.03 5.515 0 9.989 4.46 10 9.97.011-5.502 4.493-9.999 10-10.01-5.507-.01-9.988-4.488-10-9.99z'  stroke-width='1' stroke='none' fill='%23c6ece2ff'/><path d='M10 0C9.989 5.51 5.515 10.03 0 10.03c5.515 0 9.989 4.46 10 9.97.011-5.502 4.493-9.998 10-10.01-5.507-.01-9.988-4.488-10-9.99z'  stroke-width='1' stroke='none' fill='%237ec3bcff'/></pattern></defs><rect width='800%' height='800%' transform='translate(-60,-20)' fill='url(%23a)'/></svg>");
        margin: 10;
        font-family: Verdana, sans-serif;
        font-size: 16px;
    }
    /* i think having better line spacing helps text to be more readable, but you can remove it if you want */
    p {
        line-height: 1.5em;
        background-color: #faf6ea;
        margin: 20px;
        border-style: dashed;
        border-color: #d7e9e3;
        border-width: 5px;
        border-radius: 5px;
        padding: 10px 20px 10px 20px;
        outline-style: solid;
        outline-color: #425274;
        outline-width: 10px;
    }

    #p-side {
        text-align: left;
        color: white;
        border-style: none;
        outline-style: none;
        background-color: transparent;
    }

    header {
        background: var(--header-bg);
        background-size: 100%;
        background-position: center;
        /* change the minimum height if you want it to take up more/less space */
        max-width: 960px;
        min-height: 200;
        margin: 0 auto;
        padding: 0 1em;
        /* i have a default border-radius set, but i didn't want rounded corners on this element */
        border-radius: 2em;
    }

    /* this is your site title displayed at the top of the page */
    h1 {
        font-family: "Exo 2", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        padding: 0.5em;
        color: white;
        border-radius: 0.3em;
        max-width: 950px;
        /* you can change the text-align to center or right if you want it placed differently */
        text-align: center;
        border-style: dashed;
        border-color: rgba(215, 233, 227, 0.2);
        outline-style: dashed;
        outline-color: #dee7e4;
        outline-width: 3px;
        outline-offset: 3px;
    }
h2{
    text-align: center;
}
h3{
    text-align: center;}
    nav {
        /*padding: 1em;*/

        margin-top: 2em;
        font-weight: bold;
        @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Inter:wght@400&display=swap");
        font-family: "Exo 2", sans-serif;
    }

    nav > ul {
        background-color: rgba(32, 77, 197, 0);
        min-width: 400px;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        text-align: center;
        max-width: 1000px;
        margin: auto;
        line-height: 3rem;
        /* this stuff makes it wrap around on mobile */
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        /* this line takes away the dot in front of the list items */
        list-style-type: none;
        /* list items have default padding but we don't need it for these */
        padding-left: 0;
        /* and this spaces out the buttons so they're not touching */
        justify-content: space-evenly;
    }
    nav li {
        text-align: center;
        color: #dee7e4;
    }
    nav li > a {
        background-color: var(--button-color);
        color: #dee7e4;
        padding: 0.5em 2em;
        width: 100;
        text-align: center;
        /* this takes away the link underline */
        text-decoration: none;
        border-radius: 5em;
    }
    nav li > a:visited {
        color: #dee7e4;
    }
    nav li > a:hover {
        background-color: var(--favorite-color);
        color: var(--text-color);
    }

    a {
        color: var(--link-color);
        border-radius: 0.5em;
        font-weight: bold;
        transition:
            color 400ms ease-out,
            background-color 400ms ease-out,
            box-shadow 400ms ease-out;
    }
    a:visited {
        color: var(--text-color);
    }
    a:hover {
        color: var(--link-color);
    }

    /* you can change this to anything you want :) */
    ul {
        list-style-type: "\2726 ";
        text-align: left;
          text-indent: +4px;
    }

    li::marker {
        color: #c24d51;

    }
    #musicplayer {
        font-family: "Nunito", sans-serif;
        background: #faf6ea; /* background color of player */
        border-radius: 0.5em;
        width: 100%; /* width of the player - make it 100% if you want it to fill your container */
        padding: 10px;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .songtitle,
    .track-info,
    .now-playing {
        padding: 7px;
    }

    .controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .buttons {
        display: flex;
        justify-content: center;
        font-size: 17px !important; /* size of controls */
        width: 100%;
    }

    .buttons div {
        width: 33.3%;
    }

    .playpause-track,
    .prev-track,
    .next-track {
        cursor: pointer;
        color: #c24d51; /* color of buttons */
        font-size: 35px !important; /* size of buttons */
    }







    .playpause-track:hover {
        transform: scale(1.5);
        transform: rotate(720deg);
        transition: all ease 400ms;
    }
.prev-track:hover {
        transform: scale(1.5);
        transform: rotate(720deg);
        transition: all ease 400ms;
    }
.next-track:hover {
        transform: scale(1.5);
        transform: rotate(720deg);
        transition: all ease 400ms;
    }

    .volume-icon {
        font-size: 22px !important; /* size of volume icon */
    }

    .seeking,
    .volume {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
        color: #c24d51;
    }

    .now-playing,
    .track-info {
        color: #faf6ea;
        background-color: #0ca1a5; /* background color of top two boxes */
    }

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

    input[type="range"] {
        cursor: pointer;
        -webkit-appearance: none; /* removes default appearance of the tracks */
        width: 100%;
    }

    input[type="range"]:focus {
        cursor: pointer;
        outline: none; /* removes outline around tracks when focusing */
    }

    input[type="range"]::-webkit-slider-runnable-track {
        cursor: pointer;
        width: 100%;
        height: 4px; /* thickness of seeking track */
        background: #c24d51; /* color of seeking track */
    }

    input[type="range"]::-webkit-slider-thumb {
        cursor: pointer;
        height: 10px; /* height of seeking square */
        width: 10px; /* width of seeking square */
        border-radius: 3px; /* change to 5px if you want a circle seeker */
        background: #c24d51; /* color of seeker square */
        -webkit-appearance: none;
        margin-top: -3px; /* fixes the weird margin around the seeker square in chrome */
    }

    input[type="range"]::-moz-range-track {
        cursor: pointer;
        width: 100%;
        height: 4px; /* thickness of seeking track */
        background: #c24d51; /* color of seeking track */
    }

    input[type="range"]::-moz-range-thumb {
        cursor: pointer;
        align-items: center;
        height: 10px; /* height of seeking square */
        width: 10px; /* width of seeking square */
        border-radius: 3px; /* change to 5px if you want a circle seeker */
        background: #c24d51; /* color of seeker square */
        border: none; /* removes weird border around seeker square in firefox */
    }
    input[type="range"]:hover {
        transform: scale(1.1);
        transition: all ease 100ms;
    }

    #sidebar {
        background: var(--bg-color);
        min-width: 260px;
        margin: 2em;
        padding: 0;
        border-radius: 2em;
    }

    #avatar {
        margin: 0.5em auto;
        /* image size is 160px so i made its container a little bigger to fit the borders */
        max-width: 164px;
        max-height: 164px;
        border-radius: 8em;
    }
    #avatar img {
        background: var(--red-color);
        border: 2px solid var(--button-color);
        max-width: 160px;
        border-radius: 8em;
    }

    #bio {
        margin: 2em 1em;
        background: var(--favorite-color);
        border: 1px solid var(--button-color);
        border-radius: 1em;
    }
    #bio p {
        margin: 1em;
    }

    #content {
        display: flex;
        max-width: 1000px;
        margin: auto;
    }

    main {
        background-color: var(--bg-color);
        padding: 1em 2em;
        margin: 1em;
        border-radius: 2em;
    }

    main > h1,
    main > h2,
    main > h3 {
        background-color: var(--favorite-color);
        border-radius: 0.4em;
        padding: 0.2em 0.5em;
    }

    /* a class for centering text and images */
    .center {
        text-align: center;
    }
    /* made this a class so i can change it to be centered on mobile */
    .img-right {
        float: right;
    }

    footer {
        text-align: center;
        font-size: small;
        margin: 1em auto;
        max-width: 960px;
    }
    icon {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        border-style: none;
    }
    .image_off,
    #home:hover .image_on {
        animation: bounce 0.4s ease;
        @keyframes bounceIn {
            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
                margin-left: auto;
                margin-right: auto;
                opacity: 1;
                max-width: 100px;
            }
            40% {
                transform: translateY(-30px);
            }
            60% {
                transform: translateY(-15px);
            }
        }
        display: none;
    }
    .image_on,
    #home:hover .image_off {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100px;
    }
    /* these are the mobile styles! */
    @media only screen and (max-width: 800px) {
        #content {
            flex-wrap: wrap;
        }
        #sidebar {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        header {
            min-height: 100px;
            margin: 0 1em;
            @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Inter:wght@400&display=swap");
            font-family: "Exo 2", sans-serif;
        }
        header > h1 {
            font-size: 3em;
            margin: 0.4em;
            @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Inter:wght@400&display=swap");
            font-family: "Exo 2", sans-serif;
        }
        header > h2 {
            @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Inter:wght@400&display=swap");
            font-family: "Exo 2", sans-serif;
        }
        #avatar {
            margin: 0 1em;
        }
        #bio {
            width: 50%;
        }
        main {
            margin: 0 1em;
        }
        #sidebar ul {
            margin: 0 1em;
            display: flex;
            flex-wrap: wrap;
            line-height: 2em;
        }
        #sidebar li {
            padding-left: 0;
            margin: 0.3em 1em;
        }
        .img-right {
            float: none;

            text-align: center;
        }


        footer {
            margin: 1em;
        }
    }