@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
    font-size: 14px;
    --padding: 1rem;
}

* {
    box-sizing: border-box;
    letter-spacing: -2px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 600;
}

/*INTRO*/
.intro {
    background-color: black;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    z-index: 999;
}

@keyframes introSpeech1 {
    0% {top: 5vh; opacity: 0%;}
    100% {top: 15vh; opacity: 100%;}
}

@keyframes introSpeech2 {
    0% {top: 20vh; opacity: 0%;}
    100% {top: 35vh; opacity: 100%;}
}

@keyframes introSpeech3 {
    0% {top: 40vh; opacity: 0%;}
    100% {top: 55vh; opacity: 100%;}
}

@keyframes playNow {
    0% {opacity: 0%;}
    100% {opacity: 100%;}
}

.speech_other {
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 30px;
    font-size: 1.75vw;
    border: 5px solid greenyellow;
    color: white;
    padding: 10px;
    height: auto;
    width: 30vw;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0%;
}

.pfp {
    display: flex;
    align-items: center;
    position: absolute;
    height: auto;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0%;
}

.speech1 {
    left: 25vw;
    animation-name: introSpeech1;
}

.speech1_pfp {
    left: 16.5vw;
    animation-name: introSpeech1;
}

.speech2_pfp {
    left: 81vw;
    animation-name: introSpeech2;
    animation-delay: 2s;
}

.speech3_pfp {
    left: 16.5vw;
    animation-name: introSpeech3;
    animation-delay: 4s;
}

.speech2 {
    left:50vw;
    animation-name: introSpeech2;
    animation-delay: 2s;
}

.speech3 {
    left: 25vw;
    animation-name: introSpeech3;
    animation-delay: 4s;
}

.this_pfp {
    aspect-ratio: 1;
    height: auto;
    max-width: 7.5vw;
}

.this_pfp img {
    height: auto;
    width: 100%;
    object-fit: contain;
    border: 5px solid yellowgreen;
    border-radius: 100%;
}

.play_button {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0%;
    cursor: pointer;
    position: absolute;
    height: 8vw;
    width: 20vw;
    left: 40vw;
    top: 76vh;
    font-size: 3.5vw;
    background-color: yellowgreen;
    color: black;
    border: 3px solid yellowgreen;
    border-radius: 30px;
    animation-name: playNow;
    animation-delay: 6s;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}

.play_button:hover {
    background-color: greenyellow;
    border: 3px solid greenyellow;
}

.start_over {
    opacity: 0%;
    z-index: -1;
}

/*END CUTSCENE*/

@keyframes ending {
    0% {opacity: 0%;}
    100% {opacity: 100%;}
}

.outro {
    background-color: black;
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 999;
    animation-name: ending;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes outro_speech1 {
    0% {top: 5vh; opacity: 0%;}
    100% {top: 15vh; opacity: 100%;}
}

@keyframes outro_speech2 {
    0% {top: 20vh; opacity: 0%;}
    100% {top: 35vh; opacity: 100%;}
}

@keyframes outro_speech3 {
    0% {top: 40vh; opacity: 0%;}
    100% {top: 55vh; opacity: 100%;}
}

.speech4 {
    left: 25vw;
    animation-name: outro_speech1;
    animation-delay: 5.5s;
}

.speech4_pfp {
    left: 16.5vw;
    animation-name: outro_speech1;
    animation-delay: 5.5s;
}

.speech5 {
    left:50vw;
    animation-name: outro_speech2;
    animation-delay: 7.5s;
}

.speech5_pfp {
    left: 81vw;
    animation-name: outro_speech2;
    animation-delay: 7.5s;
}

.speech6 {
    left: 25vw;
    animation-name: outro_speech3;
    animation-delay: 9.5s;
}

.speech6_pfp {
    left: 16.5vw;
    animation-name: outro_speech3;
    animation-delay: 9.5s;
}

.play_button_outro {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0%;
    cursor: pointer;
    position: absolute;
    height: 8vw;
    width: 20vw;
    left: 40vw;
    top: 76vh;
    font-size: 3.5vw;
    background-color: yellowgreen;
    color: black;
    border: 3px solid yellowgreen;
    border-radius: 30px;
    animation-name: playNow;
    animation-delay: 11.5s;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}

.play_button_outro:hover {
    background-color: greenyellow;
    border: 3px solid greenyellow;
}

/*HEADER*/
.topBar {
    height: 5%;
    width: auto;
    background-color: black;
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.link {
    height: 100%;
    font-size: 1.5vw;
    font-weight: 900;
    display: flex;
    align-items: center;
    margin-left: 0.7vw;
    margin-right: 0.7vw;
}

.link p {
    margin: 0;
}

.setting {
    display:flex;
    margin-left: auto;
}

.setting button {
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setting button img {
    width: 2.5vw;
    height: auto;
    cursor: pointer;
    aspect-ratio: 1;
    object-fit: contain;
}

.setting button.clicked {
    background-color: greenyellow;
    color: white;
}

.settings-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    opacity: 1;
    left: 15vw;
    top: 10vh;
    height: auto;
    width: 70vw;
    background-color: greenyellow;
    border:5px solid green;
    transition: opacity 0.15s;
    z-index: 90;
    padding-left: 10px;
    padding-top: 5px;
    border-radius: 30px;
}

.button-side {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    height: 100%;
    max-width: 10vw;
    width: 100%;
    margin-left: 5%;
}

.button-desc-side {
    display: flex;
    flex-direction: column;
    max-width: 25vw;
    width: 100%;
}

.thanks-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 30vw;
    width: 100%;
}

.thank {
    font-size: 2vw;
    color: black;
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 3px solid black;
    text-align: center;
    padding: 5px;
}

#thank-bottom {
    border-bottom: none;
}

.thank-title {
    text-align: center;
    font-weight: bold;
    font-size: 3vw;
}

.thank-desc {
    text-align: center;
    font-weight: 400;
    font-style: italic;
    font-size: 1.5vw;
}

#bold {
    font-weight: bold;
}

.button-desc {
    display: flex;
    align-items: center;
    height: 33%;
    align-items: center;
    font-size: 2vw;
}

.settings-button {
    height: 9vw;
    width: 9vw;
    border-radius: 50%;
    cursor: pointer;
    margin-bottom: 1vw;
    background-color: green;
    border: 5px solid black;
    color: white;
    font-size: 1.5vw;
}

.settings-button:hover {
    background-color: yellowgreen;
}


.settings-body {
    display: flex;
    flex-direction: row;
}

.settings-titles {
    height: 100%;
    max-height: 100px;
    display: flex;
    flex-direction: row;
}
.settings-title {
    font-size: 5vw;
    font-weight: bold;
    text-align: center;
    align-items: center;
    width: 55%;
    margin-left: 5px;
}

.thanks-title {
    font-size: 5vw;
    font-weight: bold;
    text-align: center;
    align-items: center;
    width: 45%;
    margin-right: 5px;
}

.hidden {
    opacity: 0;
    z-index: 0;
}

.link a {
    color: rgb(101, 188, 14);
}

.link p {
    color: greenyellow;
}

.link a:hover {
    color: greenyellow;
}

/*BODY*/
body {
    background-color: black;
    border: 4px solid greenyellow;
    position: fixed;
    height: 100dvh;
    width: 100dvw;
    top: 0;
    left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.mainGame {
    display: flex;
    border: 4px solid greenyellow;
    height: 95%;
}

/*CLICKER*/

.clicker {
    width: 40%;
    text-align: center;
    display: flex;
    flex-direction: column;
    background-color: black;
    z-index: 10;
}

.clicker img {
    height: auto;
    width: 16vw;
    cursor: pointer;
    z-index: 9;
}

@keyframes clicker_hover {
    0% {width: 16vw;}
    50% {width: 16.5vw;}
    100% {width: 16vw;}
}

@keyframes clicker_click {
    0% {width: 16vw;}
    50% {width: 15vw;}
    100% {width: 16vw;}
}

#click-box.clicked, #click-box.clicked:hover {
    animation-name: clicker_click;
    animation-duration: 0.15s;
    animation-timing-function: ease-out;
}

#click-box:hover{
    animation-name: clicker_hover;
    animation-duration: .3s;
}

.clicking-square {
    padding: 30px;
    background-image: url(https://wallpaper-house.com/data/out/7/wallpaper2you_205177.gif);
    border-radius: 30px;
    z-index: 7;
    margin: 15px;
    height: 85vh;
}

.clicking-square-solid {
    padding: 20px;
    background-image: url("assets/solid_bg.png");
    border-radius: 30px;
    z-index: 7;
    aspect-ratio: 1;
    width: auto;
    height: 100vh;
}

.score {
    display: inline-block;
    font-size: clamp(2vw, 3vw, 3.5vw);
    color: greenyellow;
    font-weight: 900;
    height: 40%;
    width: 100%;
    margin-bottom: 5vh;
}

.highlight {
    background: rgba(0, 0, 0, 0.7);
}

.score-alt {
    display: inline-block;
    font-size: 3vw;
    font-weight: 700;
    color: greenyellow;
}

.bps {
    font-size: 1.5vw;
    color: greenyellow;
    font-style: italic;
    font-weight: 700;
    margin-top: 5vh;
}

.star {
    position: absolute;
    left: 2vw;
    top: 73vh;
    width: 6vw;
    height: auto;
    fill: yellowgreen;

}

.star:hover {
    fill: greenyellow
}

.invisible {
    visibility: hidden;
}

.game-bottom {
    min-height: 7vh;
    display: flex;
    z-index: 8;
    flex-direction: row;
}

.bottom-instructions {
    width: 60%;
    height: 100%;
    background-color: black;
    color: greenyellow;
    font-weight: 600;
    font-size: 1vw;
    z-index: 10;
    margin-bottom: 1vw;
}

.import_export_title {
    font-weight: 900;
    font-size: 1.2vw;
    padding: 3px;
    white-space: nowrap;
}

#import-btn {
    cursor: pointer;
    height: 100%;
    width: 5vw;
    font-size: 1vw;
    background-color: greenyellow;
    border: 3px solid black;
    justify-content: left;
}

#export {
    cursor: pointer;
    height: 100%;
    width: 6vw;
    font-size: 1vw;
    background-color: yellowgreen;
    border: 3px solid black

}

input[type="file"] {
    display: none;
}

.import-label {
    background-color: greenyellow;
    display: flex;
    font-size: 1vw;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 3px solid black;
    width: 6vw;
}

#import {
    background-color: greenyellow;
    border: 3px solid black;
}

/*UPGRADES*/

.upgrades {
    display: flex;
    text-align: center;
    flex-direction: column;
    flex: 1.5;
    margin: 0px;
}

.upgrade-button {
    display: flex;
    background-color: black;
    color: greenyellow;
    border: 2.5px solid greenyellow;
    position: relative;
    cursor: pointer;
    flex-direction: column;
    flex: 1;
    height: 10%;
    z-index: 10;
}

.upgrade-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 65%;
}

.upgrade-title {
    display: flex;
    flex-wrap: wrap;
    font-size: 2vw;
    justify-content: flex-start;
}

.upgrade-count {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
}

.upgrade-below {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 30%;
    margin-bottom: 5px;
}

.upgrade-below-rest {
    justify-content: flex-end;
    width: 70%;
    display: flex;
}

.upgrade-below-img {
    height: 3.5vh;
    width: 2vw;
    aspect-ratio: 1;
    margin-right: -3px;
}

.upgrade-below-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.upgrade-price {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    font-size: 1vw;
    overflow: hidden;
    margin-right: .1vw;
    padding-right: 3px;
}

.red_price {
    color: red;
}

#upgr7title {
    font-size: 1.85vw;
}


/*UPGRADE TREE*/

.upgrade_tree {
    display: flex;
    flex-direction: column;
    border: 3px solid greenyellow;
    background-color:black;
    flex: 1.5;
    z-index: 8;
}

.upgrade_row {
    display: flex;
    width: 100%;
    height: 14%;
}

.upgrade_item {
    margin-left: 5px;
    margin-right: 5px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    aspect-ratio: 1;
    background-color: greenyellow;
    color: black;
    position: relative;
    z-index: 9;
    font-size: 1.5vw;
    width: 7vw;
}

.upgrade_item_locked {
    margin-left: 5px;
    margin-right: 5px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 100%;
    aspect-ratio: 1;
    background-color: green;
    color: white;
    font-size: 1.5vw;
    width: 7vw;
}

#row1 {
    justify-content: center;
    margin-top: 7px;
}

#row2 {
    justify-content: space-between;
}

#row3 {
    justify-content: center;
}

#row4 {
    justify-content: flex-start;
}

#row5 {
    justify-content: center;
}

#row6 {
    justify-content: space-between;
}

#row7 {
    justify-content: center;
}


/*MANAGERS*/

.managers {
    text-align: center;
    flex: 2.5;
    display: flex;
    flex-direction: column;
}

.manage-button {
    display: flex;
    flex: 1;
    position: relative;
    color: greenyellow;
    background-color: black;
    border: 3px solid greenyellow;
    cursor: pointer;
    height: 10%;
    align-items: center;
}

.mgr-img {
    height: 100%;
    border: 4px solid white;
    aspect-ratio: 1;
}

.mgr-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#manager2btn .mgr-img img{
    content: url("assets/question_mark.jpg")
}

#manager2btn.unlocked .mgr-img img {
    content: url("assets/baby.png")
}

#manager3btn .mgr-img img{
    content: url("assets/question_mark.jpg")
}

#manager3btn.unlocked .mgr-img img {
    content: url("assets/monkey.png")
}

#manager4btn .mgr-img img{
    content: url("assets/question_mark.jpg")
}

#manager4btn.unlocked .mgr-img img {
    content: url("assets/hacker.png")
}

#manager5btn .mgr-img img{
    content: url("assets/question_mark.jpg")
}

#manager5btn.unlocked .mgr-img img {
    content: url("assets/startup.jpg")
}

#manager6btn .mgr-img img{
    content: url("assets/question_mark.jpg")
}

#manager6btn.unlocked .mgr-img img {
    content: url("assets/tech_firm.png")
}

#manager7btn .mgr-img img{
    content: url("assets/question_mark.jpg")
}

#manager7btn.unlocked .mgr-img img {
    content: url("assets/bitgpt.png")
}

.mgr-rest {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.mgr-top {
    height: 70%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mgr-bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.manager_title {
    padding-left: 5px;
    display: flex;
    font-size: 3.3vw;
    max-width: 80%;
    align-items: center;
    justify-content: center;
}

#manager6_title {
    font-size: 2.6vw;
}
.manage-count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: right;
    font-size: 3vw;
    width: auto;
}

.manage-price {
    display: flex;
    align-items: center;
    font-size: 1.2vw;
    text-align: right;
    overflow: hidden;
    flex-direction: row;
    margin-right: .1vw;
    padding-right: 3px;
}

.manage-price-img {
    height: 3.8vh;
    width: 2vw;
    aspect-ratio: 1;
}

.manage-price-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.mgr-price-rest {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

/*HOVERING BOXES*/
.upgrade-hover-textbox {
    color: black;
    display:flex;
    flex-direction: column;
    font-style: italic;
    background-color: greenyellow;
    border: 5px solid black;
    position: absolute;
    opacity: 0;
    z-index: -99;
    transition: opacity 0.25s;
    padding: 5px;
    width: 20vw;
    right: 106%;
    top: -10px;
    border-radius: 5px;
    cursor: default;
    pointer-events: none;
}

.upgrade-hover-textbox :first-child {
    margin: 0;
    margin-top: 5px;
    font-size: 1.2vw;
    padding: 0;
    line-height: 1.2;
}

.upgrade-hover-textbox p {
    font-size: 1vw;
}

.upgrade-button:hover .upgrade-hover-textbox {
    opacity: 1;
}

.manager-hover-textbox {
    color: black;
    display:flex;
    flex-direction: column;
    font-style: italic;
    background-color: greenyellow;
    border: 5px solid black;
    position: absolute;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.25s;
    padding: 5px;
    width: 20vw;
    height: auto;
    right: 103%;
    top: -5px;
    border-radius: 5px;
    pointer-events: none;
}

.manager-hover-textbox :first-child {
    margin: 0;
    margin-top: 5px;
    font-size: 1vw;
    padding: 0;
    line-height: 1.2;
}

.manager-hover-textbox p {
    font-size: .9vw;
}

.manage-button:hover .manager-hover-textbox {
    z-index: 20;
    opacity: 1;
}

.manager-hover-textbox-locked {
    color: white;
    display:flex;
    flex-direction: column;
    font-style: italic;
    background-color: black;
    border: 3px solid greenyellow;
    position: absolute;
    opacity: 0;
    transition: opacity 0.25s;
    padding: 5px;
    width: 300px;
    right: 106%;
    top: -10px;
    border-radius: 5px;
    z-index: 10;
}


/*ABOUT*/

.head {
    position: absolute;
    width: 300px;
    border: 5px solid lavender;
    right: 200px;
}