@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap');
@font-face {
    font-family: title;
    src: url(coolfont2.ttf);
    font-weight: bold;
}

:root {
    --darkcol: #000000;
    --midtone1: #c2c3c7;
    --midtone2: #5f574f;
    --lightcol: #FFF5E8;
    --important2: #6D2E4D;
    --important1: #FF004C;
}


/* basics */
body {
    background-color: var(--darkcol);
    color: var(--lightcol);
}
.unselect {
    -webkit-user-select: none;
    user-select: none;
}

.center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.barl {
    float: left;
    margin-left: 2%;
    margin-right: 1%;
    max-width: 25%;
    min-width: 22%;
}
.barr {
    float: right;
    margin-right: 2%;
    margin-left: 1%;
    max-width: 25%;
    min-width: 22%;
}

.barmove {
    transform: translate3d(0, calc(var(--scrollPos) * var(--progress)), 0);
}


/*text and fonts*/
a{
    color: var(--important1);
}
a, .bordabut:hover {
    cursor: url('img/mouse-point/mouse-point-frame1.gif'), pointer;
    animation: cursorpoint 1s linear infinite;
}

h1 {
    font-family: title;
    font-size: 1.5rem;
}
h2 {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1rem;
}
p {
    font-family: "Silkscreen", sans-serif;
    font-weight: 400;
    font-style: normal;
}
button {
    background-color: var(--darkcol);
    color: var(--lightcol);
}
::selection {
  color: var(--darkcol);
  background-color: var(--important1);
}


/*mouse things*/
*, body {
    cursor: url('img/mouse-normal/mouse-frame1.png'), default;
    animation: cursor 1s linear infinite;
}
@keyframes cursor {
    0% {
        cursor: url('img/mouse-normal/mouse-frame1.png'), default;
    }
    25% {
        cursor: url('img/mouse-normal/mouse-frame2.gif'), default;
    }
    50% {
        cursor: url('img/mouse-normal/mouse-frame3.gif'), default;
    }
    75% {
        cursor: url('img/mouse-normal/mouse-frame4.gif'), default;
    }
    100% {
        cursor: url('img/mouse-normal/mouse-frame5.gif'), default;
    }
}
@keyframes cursorpoint {
    0% {
        cursor: url('img/mouse-point/mouse-point-frame1.gif'), pointer;
    }
    20% {
        cursor: url('img/mouse-point/mouse-point-frame2.gif'), pointer;
    }
    40% {
        cursor: url('img/mouse-point/mouse-point-frame3.gif'), pointer;
    }
    60% {
        cursor: url('img/mouse-point/mouse-point-frame4.gif'), pointer;
    }
    80% {
        cursor: url('img/mouse-point/mouse-point-frame5.gif'), pointer;
    }
    100% {
        cursor: url('img/mouse-point/mouse-point-frame6.gif'), pointer;
    }
}


/*borders (this is going to be massive)*/
.borda1 {
    box-sizing: border-box;
    border-image: url(img/borders/bordersmall.gif);
    border-width: 15px;
    border-image-width: 50px 50px 50px 50px;
    border-image-outset: 20px 20px 20px 20px;
    border-image-repeat: stretch;
    border-image-slice: 68 69 96 85;
    margin: 20px 15px;
    background-color: var(--darkcol);
    width: auto;
}  
.borda2 {
    box-sizing: border-box;
    border-image: url(img/borders/bordermedium.gif);
    border-image-slice: 42 43 40 43;
    border-image-width: 15px 15px 15px 15px;
    border-image-outset: 20px 20px 20px 20px;
    border-image-repeat: stretch stretch;
    border-width: 20px;
    margin: 25px 20px;
    background-color: var(--darkcol);
}
.borda3 {
    box-sizing: border-box;
    border-image: url(img/borders/borderbig.gif);
    border-image-slice: 46 57 48 53;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 20px 20px 20px 20px;
    border-image-repeat: stretch;
    border-width: 25px;
    margin: 25px 20px;
    background-color: var(--darkcol);
}
.borda4 {
    box-sizing: border-box;
    border-image: url(img/borders/borderinfo.gif);
    border-image-slice: 32 35 38 35;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 20px 20px 20px 20px;
    border-image-repeat: repeat repeat;
    border-width: 15px;
    margin: 20px 15px;
}
.bordabut {
    box-sizing: border-box;
    border-image: url(img/borders/borderbutton-uns.gif);
    border-image-slice: 27 27 27 25;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch;
    border-width: 25px;
    background-color: var(--darkcol);

    padding: 0%;

    font-family: "Silkscreen", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--lightcol);

}
.bordabut:hover{
    box-sizing: border-box;
    border-image: url(img/borders/borderbutton-hov.gif);
    border-image-slice: 27 27 27 25;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch;
    border-width: 25px;
    background-color: var(--darkcol);

    color: var(--midtone1);
}
.bordabut:active{
    box-sizing: border-box;
    border-image: url(img/borders/borderbutton-sel.gif);
    border-image-slice: 27 27 27 25;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch;
    border-width: 25px;
    background-color: var(--darkcol);

    color: var(--midtone2);
}

/*accordion and stuff*/
.accordion {
    transition: 0.4;
}
.panelnormal {
    overflow: hidden;
    max-height: 0;
    transition: 0.2s ease-out;
}
.panelafter{
    transform: rotate(2160deg);
}
.imgpanelafter {
    transform: rotate(180deg);
    transition: 0.3s ease-out;
}

.panelnormal p a {
    color: var(--lightcol);
}
.panelnormal p a:hover::before {
    content: "";
    clear:both;
    height:15px;
    width:15px;
    display: table-cell;
    background-image: url(./img/star.gif);
    background-size:100%;
}
.panelnormal p a:hover {
    color: var(--midtone1);
}

/*button text*/
.butparallax::before {
    content: "deactivate "
}
.barnoparallax .butparallax::before {
    content: "activate "
}
.butnoanim::before {
    content: "activate "
}
.cloudnoanimbut::before{
    content: "deactivate "
}


/*parallax and further scroll movements deactivation*/
.barnoparallax {
    transform: translateY(0) !important;
    position: sticky !important;
    top: 14% !important;
}
.plant__noparallax {
    transform: translateY(0) !important;
    bottom: 0px !important;
}
.plantf__noparallax{
    bottom: 75px !important;
}
.moon__noparallax{
    bottom: 20% !important;
    filter: brightness(4) !important;
}
.mountain__noparallax{
    bottom: 7% !important;
}
.cloud__noparallax {
    bottom: 17% !important;
}


/*background UUUGHHHHHHH AAAHHHHHHHH*/
.plant{
    position: fixed;
    width: 200px;
}
.plant__right{
    right: 0px;
    width: 150px;
    bottom: -18%;
}
.plant__left{
    left: 0px;
    bottom: -18%;
}
.plant__center{
    left: 0;
    width: 100%;
    height: 180px;
    z-index: -1;
    object-fit: cover;
}
.mountain {
    bottom: -1%;
    z-index: -3;
}
.gradient {
    background: #000000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
    height: 37%;
    bottom: 0px;
}
.grass {
    bottom: -11%;
    z-index: -2;
}
.moon {
    left: 75%;
    z-index: -4;
    width: 100px;
    bottom: 20%;
    filter: brightness(calc(2 * var(--progress) + 1));
    position: fixed;
}
.cloudplace {
    bottom: 14%;
    z-index: -3;
}
.plant__parallax{
    transform: translate3d(0, calc(var(--objscrollpos) * var(--offset)), 0);
}

.cloud {
    width: var(--WSize);
    height: var(--HSize);
    top: var(--YPos);
    right: var(--XPos);
    position: absolute;
    filter: brightness(100);
    overflow: scroll;
}

.scrollcloud[data-animated="true"] .cloud {
    animation: scroll linear infinite;
    animation-duration: calc(10s * ((var(--speed) * 3) + 1));
    animation-delay: calc((1 + var(--index)) * 1);
    --movement: 'teste';
    --target: 'cool';
}

@keyframes scroll {
    to {
        translate: var(--target) 0;
    }
    
}


/*device changes!!11!!!1*/
@media (prefers-reduced-motion: reduce) {
    .barl {
        transform: translateY(0);
        position: sticky;
        top: 14%;
    }
    .plant__parallax {
        transform: translateY(0);
        bottom: 0px;
    }
    .plant__right, .plant__left {
        bottom: 0px;
    }
    .moon{
        bottom: 20%;
        filter: brightness(4);
    }
    .mountain{
        bottom: 7%;
    }
    .scrollcloud {
    bottom: 17%;
    }
}

@media (max-width: 768px) { 
    .plant__right {
        width: 100px;
    }
    .plant__left{
        width: 150px;
        left: -40px;
    }
    .barl, .barr {
        display: block;
        padding: 1px;
        margin: 20px 10%;
        float: none; 
        height: fit-content;
        max-width: none;
    }
    .barl {
        transform: translateY(0) !important;
        position: static !important;
    }
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(calc(20px * var(--progress)));
  -webkit-backdrop-filter: blur(calc(20px * var(--progress)));
}

/* {
    border-width: 1px;
    border-style: ridge;
    border-color: #FF004C;
}