/* Style Configurations */

/* font setup */
@font-face {
    font-family: "Bahnschrift";
    src: url("fonts/Bahnschrift.TTF");
}
@font-face {
    font-family: "OldEnglish";
    src: url("fonts/OldEnglishFive.ttf");
}

::selection {

    background-color: var(--clrT);
    color: var(--clrL);

}

p {

    color: var(--clrT);

    font-family: "Bahnschrift";

    font-size: 1vw;

}
a {

    text-decoration: none;

    color: var(--clrT);

}

a:hover {

    color: var(--clrL);

}

b {

    color: var(--clrT);
    font-family: "OldEnglish";

}

h1 {

    color: var(--clrT);

    font-family: "Bahnschrift";

    text-align: center;

}

h2 {

    color: var(--clrT);

    font-family: "Bahnschrift";

    font-size: 1.8vw;

    text-align: center;

}

h3 {

    color: var(--clrT);

    font-family: "Bahnschrift";

    font-size: 1vw;

    text-align: center;

}

hr {

    color: var(--clrT);

}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Animations */

@keyframes scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1000px 1000px;
    }
}

@keyframes tooltip {
    0% {
        opacity: 0%;
        visibility: hidden;
    }
    90% {
        opacity: 0%;
        visibility: visible;
    }
    100% {
        opacity: 80%;
    }
}

@keyframes snap {
    0% {
        border-radius: 60px;
    }
    50% {
        border-radius: 5px;
    }
    85% {
        border-radius: 8px;
    }
    100% {
        border-radius: 10px;
    }
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Scrolling Background */

/* viewport setup */
body, html {

    margin: 0;
    padding: 0;
    height: 100%;
    overflow:hidden;
    filter: blur(0.4px);

    background-color: var(--container-bg);

}

:root {

    --body-bg-image: url(seahorses.png);

    --play-state: running; /*controls bg scrolling animation*/
    
}

.background{

    position: relative;

    height: 100vh;
    width: 100vw;

    background: var(--clrBG);

    overflow: hidden;

    transition: all 0.3s ease-in;

    z-index: -1;

}

.background::before {

    position: absolute;

    content: "";
  
    inset: 0;
    
    
    z-index: -1;
  
    background-image: var(--body-bg-image);
    background-size: 5vh;
    background-repeat: repeat;
  
    filter: blur(0.1vw); 
    opacity: 0.3;
  
    pointer-events: none;
  
    animation: scroll 127s linear infinite;
    animation-play-state: var(--play-state);

}
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Themes */

:root, 
    
    [data-selected-theme="seahorse"] {
        --clrB: #7A7A73; /*Base Color*/
        --clrL: #B2A59B; /*Link color*/
        --clrBx: #57564F; /*box border color*/
        --clrT: #57564F; /*Text color*/
        --clrA: #c0bca2; /*Accent color*/
        --clrBG: #DDDAD0; /*Background Color*/
        --clrP: #DDDAD0;/*Paper Color*/
        --main-container-bg: url(https://i.postimg.cc/yxjHYsBM/canvas.jpg);/*Main Container Background*/
        --container-bg: #57564F;/*Container Background*/
        --poster-src: url(media/seahorse.jpg);
        --txt-shadow: #7A7A73;
        --themelabel: "SEAHORSE";
        --panel-L: url(https://i.postimg.cc/yxjHYsBM/canvas.jpg);
        --panel-M: url(https://i.postimg.cc/yxjHYsBM/canvas.jpg);
    }
    [data-selected-theme="vampiresquid"] {
        --clrB: #44475A; /*Base Color*/
        --clrL: #FF5555; /*Link color*/
        --clrBx: #282A36; /*box border color*/
        --clrT: #44475A; /*Text color*/
        --clrA: #50FA7B; /*Accent color*/
        --clrBG: #282A36; /*Background Color*/
        --clrP: #6272A4;/*Paper Color*/
        --main-container-bg: #44475A;/*Main Container Background*/
        --container-bg: #44475A;/*Container Background*/
        --poster-src: url(media/vampiresquid.jpg);
        --txt-shadow: #FF5555;
        --themelabel: "VAMPIRE SQUID";
        --panel-L: ;
        --panel-M: ;
    }
    [data-selected-theme="clownfish"] {
        --clrB: #F9CB99; /*Base Color*/
        --clrL: #689B8A; /*Link color*/
        --clrBx: #280A3E; /*box border color*/
        --clrT: #280A3E; /*Text color*/
        --clrA: #689B8A; /*Accent color*/
        --clrBG: #689B8A; /*Background Color*/
        --clrP: #F2EDD1;/*Paper Color*/
        --main-container-bg: url(https://i.postimg.cc/yxjHYsBM/canvas.jpg);/*Main Container Background*/
        --container-bg: #689B8A;/*Container Background*/
        --poster-src: url(media/clownfish.jpg);
        --txt-shadow: #280A3E;
        --theme-label: "CLOWNFISH";
        --panel-L: ;
        --panel-M: ;
    }
    [data-selected-theme="pearl"] {
        --clrB: #efd3d7; /*Base Color*/
        --clrL: #f8f8f7; /*Link color*/
        --clrBx: #8e9aaf; /*box border color*/
        --clrT: #8e9aaf; /*Text color*/
        --clrA: #056084; /*Accent color*/
        --clrBG: #efd3d7; /*Background Color*/
        --clrP: #f8f8f7;/*Paper Color*/
        --main-container-bg: url(https://i.postimg.cc/yxjHYsBM/canvas.jpg);/*Main Container Background*/
        --container-bg: url(https://i.postimg.cc/yxjHYsBM/canvas.jpg);/*Container Background*/
        --poster-src: url(media/pearl.jpg);
        --txt-shadow: #cbc0d3;
        --theme-label: "PEARL";
        --panel-L: ;
        --panel-M: ;
    }
    [data-selected-theme="seafoam"] {
        --clrB: #78B9B5; /*Base Color*/
        --clrL: #EAEFEF; /*Link color*/
        --clrBx: #78B9B5; /*box border color*/
        --clrT: #7F8CAA; /*Text color*/
        --clrA: #EAEFEF; /*Accent color*/
        --clrBG: #78B9B5; /*Background Color*/
        --clrP: url(https://i.postimg.cc/yxjHYsBM/canvas.jpg);/*Paper Color*/
        --main-container-bg: url(https://i.postimg.cc/yxjHYsBM/canvas.jpg);/*Main Container Background*/
        --container-bg: #78B9B5;/*Container Background*/
        --poster-src: url(media/seafoam.jpg);
        --txt-shadow: #333446;
        --theme-label: "SEAFOAM";
        --panel-L: #78B9B5;
        --panel-M: #78B9B5;
    }
    [data-selected-theme="driftwood"] {
        --clrB: #3C3D37; /*Base Color*/
        --clrL: #D5CEA3; /*Link color*/
        --clrBx: #010304; /*box border color*/
        --clrT: #697565; /*Text color*/
        --clrA: #D5CEA3; /*Accent color*/
        --clrBG: #3C3D37; /*Background Color*/
        --clrP: #ECDFCC;/*Paper Color*/
        --main-container-bg: #3C3D37;/*Main Container Background*/
        --container-bg: #697565;/*Container Background*/
        --poster-src: url(media/driftwood.jpg);
        --txt-shadow: #181C14;
        --theme-label: "DRIFTWOOD";
        --panel-L: url(https://i.postimg.cc/tgqb0hkD/Dark-Wood-Texture-228-2048.jpg);
        --panel-M: none;
    }
    [data-selected-theme="oyster"] {
        --clrB: #415E72; /*Base Color*/
        --clrL: #17313E; /*Link color*/
        --clrBx: #040c12; /*box border color*/
        --clrT: #C5B0CD; /*Text color*/
        --clrA: #17313E; /*Accent color*/
        --clrBG: #02060a; /*Background Color*/
        --clrP: #17313E;/*Paper Color*/
        --main-container-bg: #0a1a23;/*Main Container Background*/
        --container-bg: #010304;/*Container Background*/
        --poster-src: url(media/oyster.jpg);
        --txt-shadow: #010304;
        --theme-label: "OYSTER";
        --panel-L: none;
        --panel-M: none;
    }

    [data-selected-theme="seaweed"] {
        --clrB: #3F4F44; /*Base Color*/
        --clrL: #1C352D; /*Link color*/
        --clrBx: #B6CBBD; /*box border color*/
        --clrT: #DCD7C9; /*Text color*/
        --clrA: #84887d; /*Accent color*/
        --clrBG: #3F4F44; /*Background Color*/
        --clrP: #2C3930;/*Paper Color*/
        --main-container-bg: url(https://i.postimg.cc/VNYBfV0x/96.jpg); /*Main Container Background*/
        --container-bg: #2C3930;/*Container Background*/
        --poster-src: url(media/seaweed.jpg);
        --txt-shadow: #2C3930;
        --theme-label: "SEAWEED";
        --panel-L: url(https://i.postimg.cc/VNYBfV0x/96.jpg);
        --panel-M: url(https://i.postimg.cc/VNYBfV0x/96.jpg);
    }

    [data-selected-theme="sunfish"] {
        --clrB: #7594a3; /*Base Color*/
        --clrL: #B0B08F; /*Link color*/
        --clrBx: #1e5067; /*box border color*/
        --clrT: #141e26; /*Text color*/
        --clrA: #efe99c; /*Accent color*/
        --clrBG: #1e5067;
        --clrP: linear-gradient(180deg,rgba(255, 255, 245, 1) 0%, rgba(224, 224, 222, 1) 44%, rgba(210, 210, 199, 1) 91%, rgba(196, 196, 176, 1) 98%, rgba(176, 176, 143, 1) 100%);/*Paper Color*/
        --main-container-bg:  linear-gradient(138deg,rgba(203, 216, 223, 1) 0%, rgba(175, 194, 204, 1) 5%, rgba(148, 173, 185, 1) 16%, rgba(131, 159, 173, 1) 34%, rgba(57, 101, 133, 1) 98%); /*Main Container Background*/
        --container-bg:  linear-gradient(138deg,rgba(203, 216, 223, 1) 0%, rgba(175, 194, 204, 1) 5%, rgba(148, 173, 185, 1) 16%, rgba(131, 159, 173, 1) 34%, rgba(57, 101, 133, 1) 98%);/*Container Background*/
        --poster-src: url(media/sunfish.jpg);
        --txt-shadow: #1e5067;
        --theme-label: "SUNFISH";
    }

    [data-selected-theme="coral"] {
        --clrB: #B03052; /*Base Color*/
        --clrL: #c489a0; /*Link color*/
        --clrBx: #B03052; /*box border color*/
        --clrT: #16040c; /*Text color*/
        --clrA: #c489a0; /*Accent color*/
        --clrBG: #16040c;
        --clrP: linear-gradient(180deg,rgba(237, 194, 200, 1) 8%, rgba(214, 135, 147, 1) 100%);/*Paper Color*/
        --main-container-bg:  rgba(176, 48, 82, 1); /*Main Container Background*/
        --container-bg:  #3D0301;/*Container Background*/
        --poster-src: url(media/coral.jpg);
        --txt-shadow: #6c1a2f;
        --theme-label: "CORAL";
        --panel-L: linear-gradient(180deg,rgba(215, 108, 130, 1) 8%, rgba(176, 48, 82, 1) 50%, rgba(61, 3, 1, 1) 100%);
        --panel-M: linear-gradient(180deg,rgba(215, 108, 130, 1) 8%, rgba(176, 48, 82, 1) 50%, rgba(61, 3, 1, 1) 100%);
    }

    [data-selected-theme="moonjelly"] {
        --clrB: rgba(169, 181, 223, 0.1); /*Base Color*/
        --clrL:  rgba(45, 51, 107, 0.2);/*Link color*/
        --clrBx: rgba(169, 181, 223, 0.1); /*box border color*/
        --clrT: rgba(45, 51, 107, 0.48); /*Text color*/
        --clrA: rgba(45, 51, 107, 0.6); /*Accent color*/
        --clrBG: rgba(169, 181, 223, 0.4);
        --clrP: rgba(255, 242, 242, 0.4);/*Paper Color*/
        --main-container-bg: linear-gradient(0deg,rgba(199, 199, 219, 1) 15%, rgba(169, 181, 223, 1) 40%, #6774ad 80%); /*Main Container Background*/
        --container-bg:  rgba(45, 51, 107, 0.7);/*Container Background*/
        --poster-src: url(media/moonjelly.jpg);
        --txt-shadow: none;
        --theme-label: "MOONJELLY";
        --panel-L: linear-gradient(0deg,rgba(199, 199, 219, 1) 5%, rgba(169, 181, 223, 0.6) 40%, #6774ad 80%);
        --panel-M: linear-gradient(0deg,rgba(199, 199, 219, 1) 0%, rgba(169, 181, 223, 0.6) 35%, #6774ad 80%);
    }

    [data-selected-theme="anglerfish"] {
        --clrB: rgba(169, 181, 223, 0.2); /*Base Color*/
        --clrL:  rgba(227, 228, 230, 0.5);/*Link color*/
        --clrBx: rgba(169, 181, 223, 0.1); /*box border color*/
        --clrT: rgba(227, 228, 230, 0.5); /*Text color*/
        --clrA: rgba(227, 228, 230, 0.7); /*Accent color*/
        --clrBG: rgba(16, 19, 33, 0.9);
        --clrP: rgba(16, 19, 33, 0.6);/*Paper Color*/
        --main-container-bg: linear-gradient(0deg,#101321 15%, #232634 40%, #373b48 100%); /*Main Container Background*/
        --container-bg:  #373b48;/*Container Background*/
        --poster-src: url(media/anglerfish.jpeg);
        --txt-shadow: rgba(169, 181, 223, 0.3);
        --theme-label: "ANGLERFISH";
        --panel-L: linear-gradient(0deg,#101321 5%, #232634 40%, #373b48 100%);
        --panel-M: linear-gradient(0deg,#101321 0%, #232634 35%, #373b48 100%);
    }


/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Containers */

.container {

    display: flex;
    flex-direction: column;
    align-items: center;
    
    margin: 1vw;
    
    background: none;

}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Boxes */

.box {

    margin: 1vw;
    padding: 0.2vw;

    border: double 0.4vw var(--clrBx);
    border-radius: 10px;

    background: var(--clrB) padding-box;
}


/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Panels */

.panel {
    
    display: flex;
    justify-content: space-evenly;
    
    margin: 0.4vw;
    padding: 0.4vw;

    border: double 0.6vw var(--clrBx);
    border-radius: 6px;
    box-shadow: 2px 2px 8px var(--txt-shadow);

    overflow: scroll;
    /*hides the scrollbar*/
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

}

/* hide scrollbar safari, chrome & opera */

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

.panel.top {
 
    overflow: hidden;

    width: 85vw;
    height: 5vh;

    margin-top: 0.1vh;
    margin-bottom: 1.2vh;
    padding: 1vw;
    padding-bottom: 3vh;

    border: double 0.4vw var(--clrBx);
    border-radius: 20px;

    text-align: center;
    align-content: center;
    letter-spacing: 0.4vw;

    background: var(--clrB) padding-box;

}

.panel.main {
    
    display: flex;
    justify-content: space-evenly;

    width: 90vw;
    height: 80vh;

    margin: 0vw;
    padding: 0.4vw;

    border: double 0.8vw var(--clrT);

    background: var(--main-container-bg) padding-box;

}

.panel.side {
    
    display: table-column;

    width: 22vw;

    background: var(--panel-L) padding-box;

}

.panel.middle {

    display: table-column;

    width: 40vw;

    background: var(--panel-M) padding-box;

}

.panel.scroll {

    height: 30vh;

}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Paper */

.paper {
    
    height: fit-content;

    margin: 0.8vw;
    padding: 0.4vw;
    padding-left: 1.2vw;
    padding-right: 1vw;

    border: double 0.5vw var(--clrP);
    border-radius: 10px;

    background: var(--clrP) padding-box;
    opacity: 80%;

}   

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Lines */

.linebreak {

    width: 10vw;
    height: 0;

    margin: 2vw auto;

    border: double 2px var(--clrT);
    border-radius: 10px;

    color: var(--clrT);

}

.highlight {

    height: 3.5vw;
    width: 80vw;

    border: double 2px var(--clrT);
    border-radius: 10px;

    background-color: var(--clrL);
    opacity: 80%;

    transition: all ease-in 1s;

}

.highlight:hover b {

    color: var(--clrA);
    font-size: 1.05vw;
    text-shadow: 2px 2px 1px var(--clrT);

    transition: all ease-in-out 1s;

}
.highlight:hover a {

    color: var(--clrA);
    font-size: 1.05vw;
    text-shadow: 1px 1px 1px var(--clrT);

    transition: all ease-in-out 1s;

}
.highlight:hover p {

    color: var(--clrA);
    font-size: 1.05vw;
    text-shadow: 1px 1px 1px var(--clrT);

    transition: all ease-in-out 1s;

}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Buttons */

.buttonRack {

    padding: 0.1vw;
    margin: 1vw auto;
    background: var(--clrB);

    border: 0.3vw double var(--clrBx);
    border-radius: 90px;

    width: fit-content;

    height: fit-content;

    display: flex;
    
}

.roundButton {

    border-radius: 360px;

    height: 5vw;
    width: 5vw;

    padding: 1vw;
    margin: 1vw;

    border: double 0.4em var(--clrBx);
    background: var(--clrP) padding-box;

    color: var(--clrT);

    text-shadow: none;

    transition: all ease-in 0.1s;

    position: relative;
    
}
.roundButton svg {
    padding: 0;
    margin: auto;
    align-self: center;
}
.roundButton:hover {

    cursor: pointer;

    border: solid 0.3vw var(--clrL);
    padding: 1vw;
    background: var(--clrB);
    color: var(--clrA);

    margin: 1.1vw;

    color: var(--clrA);
    font-weight: lighter;

    box-shadow: 1px 1px 3px var(--txt-shadow);

}
.roundButton:hover svg {
    margin: 0 auto;

}
.roundButton:active {

    padding: 0;
    box-shadow: none;

    width: 4.5vw;
    height: 4.5vw;

    margin: 1.2vw;

    background: var(--clrT);


    
}
.roundButton .tooltipText {

  visibility: hidden;
  width: 14vw;
  background: var(--clrP);
  color: var(--clrT);
  text-align: center;

  border: solid 0.1vw var(--clrBx);
  border-radius: 6px;

  padding: 0.1vw;
  margin-top: 4vw;
  margin-left: -7.5vw;

  opacity: 80%;

  /* Position the tooltip */
  position: absolute;
  z-index: 999;


}

.roundButton:hover .tooltipText {

   animation: tooltip 0.8s linear;
   visibility: visible;

}

/*collapsible element*/

.wrapper  {


    justify-content: center;

    padding: 1vw;
    margin: 1vw;

    border: double 0.3vw var(--clrT);
    border-radius: 5px;

    background-color: var(--clrB);

}

.collapsible {

    width: 15vw;

    padding: 1vw;
    margin: 1vw auto;

    border-radius: 5px;

    background-color: var(--clrP);

}

.collapsible input {

    display: none;

}

.collapsible label {

    position: relative;
    cursor: pointer;

    display: block;

    color: var(--clrT);
    text-align: center;

}
.collapsible label:hover {

    color: var(--clrA);

}
.collapsible label:hover b {

    color: var(--clrA);

    transition: color ease 0.4s;

}

.collapsible label:after {

    position: absolute;

    content: "";

}

.collapsibleContent {

    position: relative;

    display: flex;
    justify-content: space-evenly;

    max-height: 0.1px;
    overflow: hidden;

}
.collapsibleContent a {

    margin-top: 1vw;

    font-size: smaller;

}

.collapsible input:checked ~ .collapsibleContent {

    max-height: fit-content;

}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Unique Elements */

#clock {

    text-shadow: 1px 1px 1px var(--txt-shadow);

}

#date {

    text-shadow: 1px 1px 1px var(--txt-shadow);

}

/*Notepad*/
#notepad {

    width: 35vw;
    height: 52vh;
    
    font-size: 1.2vw;
    text-align: left;
    color: var(--clrT);
    font-family: 'Times New Roman', Times, serif;

    padding: 2vw;
    margin: 2vw;
    margin-bottom: 20px;

    border: double 0.4em var(--clrT);
    border-radius: 60px;

    background: var(--clrP);
    background: var(--clrP) padding-box;

    overflow: scroll;
    /*hides the scrollbar*/
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    resize: none;

    transition: all 0.1s ease-in;

}

#notepad::-webkit-scrollbar {
  display: none;
}

#notepad::placeholder {

    text-align: center;

}
#notepad:focus {

    border: double 8px var(--clrA);
    border-radius: 10px;

    background-color: var(--clrP);
    padding: 4vw;
    outline: none;

    animation: snap 0.15s linear;
    transition: border 0.1s ease-in;

}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/