/*
  Copyright 2024, 2025 Infi-power

  This program is free software: you can redistribute it and/or modify it under the terms of the
  GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the Affero GNU General Public License for more details.

  You should have received a copy of the GNU Affero General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
*/

/*
  Seems like you're looking at the depths of my website. Advice: If you want get the source code and the content of this website,
  go check out "https://codeberg.org/Infi-power/neocities-website".

  Happy hacking!
*/

/* custom stylesheet for the webpage */

/* external style files */
@import "fonts.css";
@import "frames.css";
@import "buttons.css";
@import "bars.css";
@import "icons.css";

/* animation keyframes */
@keyframes squishyZoomIn {
    from {
        scale: 400% 0;
    }

    to {
        scale: 100% 100%;
    }
}

@keyframes squishyZoomOut {
    from {
        scale: 100% 100%;
    }

    to {
        scale: 400% 0;
    }
}

/* styling */
html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    background-image: url("/ui/background-1920x1080.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: azeriSans;
}

main {
    width: 100%;
    height: 100%;
}

h1 {
    transition-property: color, text-shadow;
    transition-duration: 250ms;
    text-align: center;
    color: aliceblue;
    text-shadow: 1px 1px gray, 2px 2px gray;
    font-weight: bold;
    font-style: italic;
}

button {
    font-family: azeriSans;
}

h2, h3, h4, h5, h6, a, p, button, ul, ol, span:not(a span) {
    transition-property: color, text-shadow;
    transition-duration: 250ms;
    color: aliceblue;

    &.shadow {
        text-shadow: 1px 1px gray, 2px 2px gray;
    }
}

figcaption > p {
    text-align: center;
}

a {
    font-style: oblique 10deg;
}


a::before {
    content: "";
    background: url("/ui/icons.png") -80px -51px no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

/* custom classes */

a.noDecoration {
    text-decoration: none;
}

a.noDecoration::before {
    content: unset;
}

.greenHoverAnim:hover, a:hover {
    color: lawngreen;

    &.shadow {
        text-shadow: 1px 1px forestgreen, 2px 2px forestgreen;
    }
}

.redTile, .greenTile, button.greenTile, .blueTile, .yellowTile, .purpleTile {
    background-size: auto;
    background-repeat: repeat;
    background-clip: padding-box;
    background-position: center;
}

.redTile {
    background-image: url("/ui/tile-red-96px.png");
}

.greenTile {
    background-image: url("/ui/tile-green-96px.png");
}

button.greenTile {
    background-image: url("/ui/lighttiles06.png");
}

button.greenTile:active, button.greenTile.active {
    background-image: url("/ui/lighttiles-light06.png");
}

.blueTile {
    background-image: url("/ui/tile-blue-96px.png");
}

button.blueTile {
    background-image: url("/ui/lighttiles05.png");
}

button.blueTile:active, button.blueTile.active {
    background-image: url("/ui/lighttiles-light05.png");
}

.yellowTile {
    background-image: url("/ui/tile-yellow-96px.png");
}

button.yellowTile {
    background-image: url("/ui/lighttiles09.png");
}

button.yellowTile:active, button.yellowTile.active {
    background-image: url("/ui/lighttiles-light09.png");
}

.purpleTile {
    background-image: url("/ui/tile-purple-96px.png");
}

button.purpleTile {
    background-image: url("/ui/lighttiles12.png");
}

button.purpleTile:active, button.purpleTile.active {
    background-image: url("/ui/lighttiles-light12.png");
}

.mainPageButton {
    position: fixed;
    transform: translate(-50%, -50%);
    width: 10vw;
    height: auto;
    padding: 8px;
    text-align: center;
    text-anchor: middle;
    font-family: azeriSans;
    font-size: 1.5rem;
}

.mainPageGreetingBox {
    width: 25%;
    height: 12%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.categoryBox {
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translate(0, -50%);
    width: 16vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 8px;
}

.categoryBoxTopButton {
    width: 100%;
    text-align: left;
}

.navigatorBox {
    position: fixed;
    top: 50%;
    left: 16px;
    transform: translate(0, -50%);
    width: 16vw;
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.zoomInAnim {
    animation-name: squishyZoomIn;
    animation-duration: 450ms;
}

.zoomOutAnim {
    animation-name: squishyZoomOut;
    animation-duration: 450ms;
}