/* GLOBAL VARIABLES */

    /* colors */
    :root {
        /* --pink-dark: #cc3366; First bright, Then Muted Fint, then bottom is old */
        
        --purple: #724a7d;
        --purple-html: #46235e;
        --purple-dark: #2d223d;
        --purple-light: #a45b84;
        --purple-darkest: #1c1324;
        --red: #d16c77;
        --orange-neon: #e87d3a;
        --orange-normal: #e08f51;   /* I don't care if it's a lot of orange get off my a$$ */
        --orange-quiet: #cc9266;
        --yellow-dark: #cca573;
        --offwhiteorange: #debfa4;
        
        --underfin: #d3c1e8;
        --orange: #ffb4a2;
        --sunkist: #e5989b;
        --maroon: #b5838d;
        --dark-brown: #6d6875;     /* so basically this colour is the EVIL colour */
        
        --pink-dark: #cc3366;
        --pink: #ff508b;
        --pink-light: #f0a8c7;
        --peach-dark: #e6aba8;
        --peach: #ffe1c7;
        --yellow-light: #ffefa0; 
        --lilac: #e69bff;
        --lilac-light: #f2bcff;
        --lavender: #7964b3;
        --lavender-mute: #9e92b8;
        --teal-darkest: #01292e;
        --teal-dark: #1e5568;
        --teal: #008489;
        --teal-light: #52b0ac;
        --teal-mute: #86cab8;
        --offwhite: #ffeedd;
  
        --newcontent: #9e68ad;


        /* images */
        --divider-image: url('Media/graphix/palm-divider.gif'); width: 100%;
    }

     
     

/* Scrollbar styles */
* {
    scrollbar-color: rgb(255, 204, 153) rgb(255, 153, 102);
}

::-webkit-scrollbar {
    background: var(--offwhite);
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: rgb(222, 179, 135);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgb(204, 147, 90);
    border-radius: 3px;
}

body{
    background-color: #35234f;
    background-image: url("bg-pool-durple.gif");
    background-repeat: repeat;
    background-size: 8%;
    
    cursor: url("Media/epic-cursors/98.gif"), auto;

    font-family: 'Prompt', sans-serif;
    height: 100%; width: 100%; margin: 0;

}


.page-container{
    background-color: var(--purple-dark);
    width: 1100px;
    height: auto;
    margin: 0 auto;
    padding: 10px 0px 10px 10px;
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: 230px 5fr auto;
    gap: 10px;
    /* The grid template areas element is nifty because by separating each row into a line it actually looks like a grid!!
    
    grid-template-areas: 
        "sidebar header header"
        "sidebar main main-right"
        "footer footer footer" ;*/
    border: ridge 7px #724a7d;
    
}

#page-container_exit{
    padding: 10px;
    grid-template-columns: 4fr 320px;
    grid-template-rows: 230px auto auto auto;
}


/* HEADER */

    #header-container{   
        grid-column: 2 / 4;
        grid-row-start: 1;
        background-color: rgb(74, 97, 125);
        background-image: url("bg-header.gif");
        background-size: cover;
        border-radius: 20px;
        box-shadow: inset 0px 0px 40px rgba(255, 192, 160, 0.8);
        border: solid 3px var(--purple);
        margin: 0px 10px 0px 0px;
    }

    .header-text{
        /* background-color: #e23e9e; */
        color: var(--yellow-light);
        font-family: 'Lilita One', cursive;
        text-shadow: 0px 0px 20px #01171f;
        text-align: center;
        font-size: 500%;
    }

    #header-text-home{
        width: 80%;
        margin-left: auto;
        transform: rotate(-3deg);
        letter-spacing: -17px;
    }
   
    .header-text span {

        position: relative;
        display: inline-block;
        animation:  headertext-wave ease-in-out 2s infinite,
                    headertext-color ease-in-out 2s infinite;
        animation-delay: calc(.1s * var(--i));
        
      } 

      .header-text #star-letter {

        position: relative;
        display: inline-block;
        animation:  headertext-spin 2s infinite,
                    headertext-color ease-in-out 2s infinite;
        animation-delay: calc(.1s * var(--i));
      }

      @keyframes headertext-wave {
        0%,100% {
          transform: translateY(0)
        }
        50% {
          transform: translateY(-40px)
        }
      }

      @keyframes headertext-color {
        0%,100% {
          color: #ff7b61;
        }
        25% {
          color: #ffd061;
        }
        25% {
            color: #7b51cf;
          }
        50% {
            color: #9254ab;
          }
      }

      @keyframes headertext-spin {
        0%,100% {
            transform: rotate(-15deg) scale(90%);
        }
        50% {
            transform: rotate(15deg) scale(90%);
        }
      }

/* SIDEBAR GENERAL */

    .sidebar-container{
        display: flex;
        flex-direction: column;
    }

    .sidebar-head{
        background-color: var(--orange-quiet);
        background-image: radial-gradient(var(--orange-neon), var(--purple-dark), var(--purple-darkest));
        box-shadow: inset 0px 0px 20px var(--purple);
        border: solid 3px var(--purple-dark);
        border-radius: 2px;
        text-shadow: 0px 3px 5px rgb(237, 78, 43);

        font-family: "Lilita One", sans-serif;
        color: var(--offwhite);
        font-weight: 400;
        font-size: xx-large;
        text-align: center;
        letter-spacing: 1px;
        
        height: 40px;
        /* oh yeah this is BIG brain time */
        
    }

    .sidebar{
        box-shadow: inset 0px 0px 20px var(--peach-dark);
        height: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        text-align: start;
    }

/* LEFT SIDEBAR */

    #left-sidebar-container{
        grid-column: 1 / 2;
        grid-row: 1 / -1;
        gap: 5px;
        max-width: 200px;
    }

    nav{
        background-color: #322345;
        background-image: linear-gradient(#542959, rgb(64, 51, 79));
        background-image: url("bg-moshed.html");
        box-shadow: inset 0px 0px 10px rgb(145, 37, 10);
        background-size: cover;
        border-radius: 5px;
        height: auto;
        width: 100%;

        font-size: x-large;

        display: flex;
        flex-direction: column;
        justify-content:  space-evenly;  
    }

    .img-button-navlink{
        position: relative;
        right: 5px;
    }

    #left-sidebar-2, #left-sidebar-3, #left-sidebar-4, #left-sidebar-5{
        background-color:  #5c3061;
        background-image: linear-gradient(0deg, #9c593a3c, #ff4d0066, #4a296b09);
    }
    
   
/* MAIN */

    #main-container{
    grid-column: 2 / 3;
    }

    section{
        background-color: var(--peach);
        background-image: url('orangegrain.png');       
        min-height: 100px;
        height: auto;
        padding: 15px;
        display: flex;
        flex-direction: column;
    }


    .grid-nested-01{
        display: grid;
        grid-template-columns: 4fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
    }

    .grid-nested-02{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 420px 270px  130px;
        width: 100%;
    }

    

/* RIGHT SIDEBAR */

    #right-sidebar-container{
        grid-column: 2 / 3;
        gap: 5px;
        min-width: 230px;
    }

    #right-sidebar-1, #right-sidebar-2, #right-sidebar-3{
        background-color: var(--orange-normal);
        background-image: linear-gradient(0deg, #e6c7a899, #aa7fb53d, #aa7fb53d);
    }


   

/* FOOTER */

    footer{
        grid-column: 1 / -1;
        background-color: var(--purple);
        background-image: url("temp");
        padding: 20px;
        border-radius: 5px;
        max-height: 5em;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap:wrap;
    }
    
    #visit-count{
        
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--orange-normal));
        box-shadow: inset 0px 0px 15px var(--peach);
        float:right;
        font-size: small;
        margin: 0px;
        border-radius: 5px;
        padding: 5px;
        position: relative;
        top: -10px;

        display: flex;
        align-items: center;
            
        }

        #btn-BTT{
            width: 200px; 
            position: relative;
            z-index: 3;
        }

        .btn-guestbook:hover{
            transform: rotate(-10deg);
        }


/* ERROR PAGE */

    #error-box-anim{
        position: relative;
     animation: bobanim 3s infinite, bordercolorshift 5s infinite;
    border: solid #ff53c0 4px;
    animation-timing-function: linear;
    }

    .error-box{
        margin: 30px 0px 30px 0px;
        padding: 20px;
        color: lightyellow;
        text-shadow: 2px 2px 2px #d03798;
        
        background-color: #117676;
        background-image: linear-gradient(
        to top left,
        rgba (0, 0, 0, 0.2),
        rgba (0, 0, 0, 0.2) 30%,
        rgba (0, 0, 0, 0.0),
        );
        box-shadow: inset 5px 5px 10px rgba(255, 255, 255, 0.6),
        inset -5px -5px 10px rgba(0, 0, 0, 0.6);
        border-radius: 10px;
    }
    

@keyframes bordercolorshift {
  0% {border-color: #ff53c0;}
  25% {border-color: purple;}
  50% {border-color: cyan;}
  75% {border-color: yellow;}
  100% {border-color: #ff53c0;}
}

@keyframes bobanim {
  0% {top: 0px;}
  50% {top: 10px;}
  100% {top: 0px;}
    }

/* ART GALLERY */
    
#gallery_container{
    background: linear-gradient(var(--pink-dark)10%, #a2375b9a 40%);
    width: 80%; min-height: 70vh;
    margin: 10% 0% 0% 0%;
    padding: 2vh;
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
}

#gallery_header{
    background-color: var(--pink-dark);
    width: 100%;
    height: 10%;
    position: relative;
    bottom: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#gallery_header::before{
    content: url("data:image/svg+xml,%3Csvg id='gallery_backdrop' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 10' preserveAspectRatio='none'%3E%3Cpath fill='%23cc3366' fill-opacity='1' d='M 0 3.64 Q 0.12 0.08 4.86 0.0788 C 14.4 0.0675 16.11 2.72 21.68 3.02 c 6.44 0 7.66 -0.72 10.2 -0.72 s 3.64 0.78 3.78 1.7 l 0.02 16 H 0 Z'%3E%3C/path%3E%3C/svg%3E");
    width: 100%;
    position: absolute;
    top: -250%;
    z-index: -10;
}

#gallerypage{
    background-color: var(--pink);
    max-width: inherit; height: 100%;
    position: relative;
    border-radius: 5vh;
    border: double 2vh var(--pink-dark);
    outline: solid 1vh var(--pink-dark);
    box-shadow: inset 0px 0px 20px;
}

.gallery-controls{
    background-color: var(--yellow-light);
    width: 10%;
    height: 90%;
    border-radius: 2vh;
    text-align: center;
}

#gallery_header-text{
    font-size: 7vh; float: left; margin: 0%; position: relative; bottom: 180%; left: -60%;
}


/* Desktop view */

@media screen and (min-device-width: 600px) {
 
    #gallery_header-logo{
        position: relative;
        bottom: 250%; left: -2%; 
        height: 30vh;
    }

    
    
}


 
/* Image formatting */

    .header-logo{
        aspect-ratio: 1 / 1;
        height: 17em; width: auto;
        position: relative;
        /* top: -20px;
        right: 80px; */
        
    }

    .img-guestbook{
        height: 120px;
        width: 100px;
        position: relative;
        left: 30px;
        top: 5px;
    }

    .img-button{
        height: 31px;
        width: 88px; 
    }

    .where2find{
        mix-blend-mode: screen; 
        height: 65px;
        width: 65px;
        position:relative;
        
    }

    .where2find:hover {
        filter: brightness(150%);
    }

    /* Mobile view */

    @media screen and (max-device-width: 950px) 
    {
        
        .billboards {
            display: none;
        }
        
    }

/* General formatting */


    /* Navbar link buttons */
        .button-navlink{
            background-image: linear-gradient(#FF5F1F, purple);
            min-height: 50px;
            height: 50px;
            margin: 5px;
            border-radius: 5px;
            border: 3px var(--orange);
            border-style: outset;

            font-size: 100%;
            text-align: end;
            font-style: italic;
            padding: 5px;

            display: inline-flex;
            align-items: flex-end;

            transition-duration: 0.4s;
            cursor: pointer;
        }

        .button-navlink a{
            color: var(--offwhiteorange);
            text-shadow: 0px 0px 5px #761457;
            font-weight: 800;
            text-decoration: none;
        }

        .button-navlink:hover {
            border: 3px var(--offwhite);
            border-style: outset;
            
        }

        .button-navlink:hover a{
            color: #ffe0c1;
        }

        .button-navlink:active {
            transition-duration: 0s;
            background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
            border: 3px var(--offwhite);
            border-style: inset;
        }

        
        #button-home{
            /* background-color: rgb(255, 0, 136); */
            box-shadow: inset 0px 0px 20px rgb(255, 0, 179);
        }
        #button-home img{
            height: 50px;
            width: 50px;
        }
        #button-art{
            /* background-color: rgb(255, 0, 0); */
            box-shadow: inset 0px 0px 20px rgb(255, 45, 45);
        }
        #button-art img{
            height: 50px;
            width: 50px;
        }
        #button-profile{
            /* background-color: rgb(255, 234, 0); */
            box-shadow: inset 0px 0px 20px rgba(255, 220, 93, 0.8);
        }
        #button-profile img{
            height: 50px;
            width: 50px;
            
        }
        #button-extras{
            /* background-color: rgb(0, 224, 153); */
            box-shadow: inset 0px 0px 20px rgba(133, 255, 133, 0.8);
        }
        #button-extras img{
            height: 50px;
            width: 50px;
            
        }
        #button-exit{
            /* background-color: blue; */
            box-shadow: inset 0px 0px 20px rgba(211, 160, 255, 0.8);
        }
        #button-exit img{
            height: 50px;
            width: 50px;
            
        }

        .link-button{
            height: 31px;
            width: 88px;
        }


        .back-button:hover {
            filter: brightness(150%);
        }

        hr {
            border: none;
            border-top: 3px dotted #724a7d;
            height: 2px;
            width: 85%;
            position: relative;
           
          }

          iframe{
            border:none;
            margin: 0px;
          }



    
    /* Text styles */

        h2, h3, h5{
            color:  var(--purple);
        }

        h4{
            color:  var(--purple-light);
            font-size: medium;
            margin: 5px;
        }

        p{
            color: black;
            font-weight: 400;
            font-size: medium;
            line-height: 16pt;
        }

        a{
            color:  var(--purple-html);
            font-style: oblique;
            font-weight: bold;
        }

        ul{
            list-style: square;
        }

        sup{
            color: var(--offwhite);
            font-weight: bold;
        }
        
        textarea{
            
            background-color: var(--offwhiteorange);
            color: var(--purple);
            border: 2px solid darkmagenta;
            border-radius: 5px;
            width: 150px;
            height: 50px;
            max-width: 150px;
            min-width: 150px;
            min-height: 50px;
            max-height: 150px;
            
        }

        


        /* "Prompt" font import */
        @import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,400;0,700;1,400;1,700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Oregano&family=Prompt:ital,wght@0,400;0,700;1,400;1,700&display=swap');