/*********************************** 
base first ever theme colours wow

30/mar/2026 - creation of file, set up basic layout of index, trying different colour schemes
31/mar/2026 - added music player bullshit fuck ouch
1/apr/2026 - music player is collapsable and is ontop of everything else. Hud time.
**********************************/

/*
Colours ---
background: #09080c
foreground: #33b333

animation ---
animation-name: wavy;
animation-duration: 1.3s;
animation-timing-function: ease;
animation-iteration-count: infinite;
position: relative;
top: 0;
left: 0;


*/

body {
    background-color: #09080c;
    color: #a3eba3;
    display: flex;
    font-family: system-ui, monospace;
    padding-top: 40px;
    line-height: 1.3;

    /*border-style: solid;
    border-radius: 10px;
    border-color: #33b333;
    padding: 10px;
    box-sizing: border-box; */

    justify-content: center;
}
a {
    color: orange;

}
a:hover {
    color: red;
    text-decoration: dashed;
    text-decoration-color: red;
    
}
/* a:visited {
    color: magenta;
} */

h1, h2, h3
{
    align-self: center;
    color: #b18700;
}
h6{
    align-self: center;
    color: magenta;
}


.navBar > a {
    color: magenta !important;
    text-decoration: none;
}

.title {
    position: absolute;
    transform: translate(10px, -53px);
    color: #22f322;
    background-color: #09080c;
    /* border puzzle
    border-style: inset;
    border-color: #33b333;
    */
    padding: 5px;
    padding-top: 15px;
}

.layout-column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width: 75%;
}
.layout-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
}
.main, .nav, .links, .log, #music-player {
    border-style: solid;
    border-radius: 0px;
    border-color: #378637;
    padding: 10px;
    box-sizing: border-box;
    margin: -1px;
}
.main {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: larger;
    padding-left: 40pt;
    
}
.nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 175px;

}
.links, .log {
    display: flex;
    
    /*height: 100px;*/
    flex-shrink: 0;

}

.bpost {
    border-style: solid;
    border-radius: 5px;
    border-color: #378637;
    padding: 20px;
    margin-top: 20px;
}
.bpost:hover {
    background-color: #201c2c;
    cursor: pointer;
}
.quiet-link {
    text-decoration: none;
}
.quiet-link h1 {
    color: #b18700;
}
.quiet-link p {
    color: #a3eba3;
}

.links {
    flex-direction: row;
}
.link-buttons {
    display: flex;
    flex-direction: row;
    padding: 20px;
    flex: 1;
    order: 2;
    border-left: 2px solid #378637;
    border-right: 2px solid #378637;
    justify-content: center;
    flex-wrap: wrap;
}
.link-contact img {
  vertical-align: middle;
}
.link-buttons-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 10px;
}
.button-img {
    padding: 5px;
    vertical-align: middle;
}
.button-img:hover {
    transform: scale(1.3);
}
.webrings {
   display: flex;
   padding: 20px;
   flex-direction: column;
   align-items: center;
   order: 1;
}
.webrings a{
    text-decoration: none;
     color: magenta;  
}
.contact {
    display: flex;
    padding: 20px;
    flex-direction: column;
    order: 3;
}
.button-img:hover {
    transform: scale(1.3);
}
.log {
    flex-direction: column;
    overflow: auto; 
    height: 600px;
}
.wavy{
    animation-name: wavy;
    animation-duration: 1.3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    position: relative;
    top: 0;
    left: 0;
}
.wavy_fast{
    animation-name: wavy;
    animation-duration: 0.2s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    position: relative;
    top: 0;
    left: 0;
}
@keyframes wavy {
  0% {
    top: 0px;
  }
  50% {
    top: -8px;
  }
  100% {
    top: 0px;
  }
}

/* music player */
#music-player {
    display: flex;
    padding: 10px;
    /* position: fixed;
    bottom: 0;
    right: 0; */
    flex-direction: column;
    align-items: center;
    max-width: 250pt; 
    max-height: 150pt;
    background-color: #09080c;
}
input[type=range] {
    --thumb-h: 20px;

    padding: 1pt;
    margin-top: 10pt;
    height: 2pt;
    /* width: 320px; */
    background-color: #378637;
    overflow: hidden;
}
input[type=range]::-moz-range-thumb, input[type="range"]::-webkit-slider-thumb {
    height: var(--thumb-h);
    width: 5pt;
    background-color: #22f322;
    cursor: pointer;
}
#duration-slider::-moz-range-progress {
  background-color: #22f322;
  height: var(--thumb-h);
}
#duration-slider {
    cursor: pointer;
}

.player-control-buttons img {
   height: 20px;
   width: 20px;
   cursor: pointer;
   margin-top: 3px;
}
#prev-button:hover, #play-button:hover, #next-button:hover {
    outline: 1pt solid #22f322;
}
#prev-button {
    transform: scaleX(-1);
}

#volume {
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 80%);
    height: 10pt;
}
#volume::-moz-range-progress {
  background-color: #22f322;
  height: var(--thumb-h);
}

.title-wrap {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    max-width: 250pt;
} 
.title-wrap span{
    animation-name: scroll;
    animation-duration: 10s;
    animation-delay: -2.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 100%;
}
@keyframes scroll {
  0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* player collapse */
.collapse-player{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    right: 0;
}
#collapse-button{
    display: flex;
    border: 3px solid #378637;
    background-color: #09080c;
    width: 25px;
    height: 145pt;
    position: relative;
    bottom: 1px;
    cursor: pointer;
}
#collapse-button:hover{
    background-color: #201c2c;
}
#collapse-word{
    position: absolute;
    top: 50%;
    right: -95%;
    text-align: center;
    rotate: -90deg;
    color: #22f322;
}

@media only screen and (max-width: 800px){
    .collapse-player {
        display: none;
    }
    .nav {
        flex: 1;
        padding-bottom: 30px;
    }

}