html {
    height: 95%;
    margin: 0;
}
body {
    background-image: url('space.png');
    background-size: 15% auto;
    background-repeat: repeat;
    background-color: black;
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 5%;
    padding-bottom: 1%;
    height: 95%;
    box-sizing: border-box;
}

/*=============================
    FONTS
=============================*/

.pixle-font {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}

.cascadia-font {
  font-family: "Cascadia Code", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: white;
}

.title {
    color: white;
    text-align: right;
    margin-right: 34%;
}


/*=============================
    CURSOR
=============================*/

.blinking-cursor {
    animation: blink 2s steps(1) infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*=============================
    BOXES
    container - holds all boxes
        main-box-wrapper
            main-box
            status-box
        right-box-wrapper
            dog img
            right-box
=============================*/

.container {
    display: flex;
    width: 100%;
    height: 95%; /* Or 100% if parent has defined height */
    gap: 1%
}

.main-box-wrapper {
    height: 100%;
}

.main-box {
    width: 100%;
    height: 90%;
    color: white;
    border: 2px solid white;
    box-sizing: border-box;
    padding-left: 1%;
    padding-right: 1%;
    background-color: rgba(31, 31, 31, 0.5);
    overflow-y: auto;
}

.right-box-wrapper {
    width: 100%;
    position: relative;
    height: 100%;
}

.right-box {
    position: relative;
    color: white;
    border: 2px solid white;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-left: 2%;
    padding-right: 1%;
    background-color: rgba(31, 31, 31, 0.5);
    overflow-y: auto;
    overflow-x: hidden;
}

#dog {
    position: absolute;
    top: -4%;
    height: 5%;
    right: 10%;
    width: auto;
    z-index: 100;
}

.text-paragraph {
    line-height: 1.5;
}

/*=============================
    STATUS
=============================*/

.status-box {
    margin-top: 1%;
    height: 8.5%;
    color: white;
    border: 2px solid white;
    box-sizing: border-box;
    background-color: rgba(31, 31, 31, 0.5);

    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.status-text {
    top: 40%;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 100%;
    animation: scroll-left 25s linear infinite; /* adjust time as needed */
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.status-text:hover {
    animation-play-state: paused;
}

.status-link {
    color:rgb(226, 44, 232);
}

.status-link:hover {
    color: white;
    background-color: rgb(226, 44, 232);
}

/*=============================
    LINKS
=============================*/

.button {
    width: 5%;
    height: auto;
    display: inline-block;
    vertical-align: middle;    
    color: white;
}

.right-box a {
    color: white;
    text-decoration: none;
}

.icon-link:hover {
    color: rgb(226, 44, 232);
}

.icon-link .icon {
  display: inline-block;
  width: 5%;
  height: auto;
  vertical-align: middle;
}

.icon-link .icon.hover-img {
  display: none;
}

.icon-link:hover .icon.default-img {
  display: none;
}

.icon-link:hover .icon.hover-img {
  display: inline-block;
}

.link:hover{
    color: rgb(226, 44, 232);
}





/*.main-box img {
    width: 20%;
    height: auto;
    top: 0;
    right: 0;
    position: realtive;
    margin-left: 80%;
    border: 5px solid white;
    box-sizing: border-box;
    }
*/