html {
    font-family: 'DM Sans', sans-serif;
    user-select: none;
    background-size: cover;
}

.dashboard {
    color: orange;
    text-align: center;
    background-color: #252525;
    width: 95vw;
    height: 95vh;
    margin: auto;
    border-radius: 30px;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

/* ------------------------------ upper half of dash board ------------------------------ */

/* ------------------------------ upperRow and various colored squares ------------------------------ */

.upperRow {
    width: 100%;
    height: 20%; /* Adjust the height as needed */
    display: flex;
    justify-content: space-between;
    gap:7px;
}

#topRowSquare1 {
    background-color: rgb(254, 108, 100);
    width: 20%;
    border-top-left-radius: 90px;
}
#topRowSquare2 {
    background-color: rgb(76, 221, 229);
    width: 10%;
    height: 75%;
}
#topRowSquare3 {
    background-color: rgb(164, 214, 216);
    width: 8%;
    height: 75%;
}
#topRowSquare4 {
    background-color: rgb(237, 240, 81);
    width: 40%;
    height: 20%;
}
#topRowSquare5 {
    background-color: rgb(76, 221, 229);
    height: 75%;
    width: 10%;
}
#topRowSquare6 {
    background-color: rgb(254, 108, 100);
    width: 5%;
    height: 75%;
}
#topRowSquare7 {
    background-color: rgb(237, 240, 81);
    width: 18%;
    border-top-right-radius: 90px;
}

/* ------------------------------ bottom half of dashboard ------------------------------ */

.bottomHalf {
    box-sizing: border-box;
    display: flex;
    height: 80%;
    width: 100%;
    justify-content: space-between;
}


/* ------------------------------ left column and buttons ------------------------------ */
.left-column {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    width: 10%;
    gap: 7px;
}

.button {
    color: #252525;
    font-size: 1.5rem;
    width: 100%;
    height: 100%;
    margin: auto;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    display: flex;
}

#overview {
    background-color: rgb(237, 240, 81);
}

#shipcontrols{
    background-color: rgb(254, 108, 100);
}

#weapons{
    background-color: rgb(164, 214, 216);

}

#power{
    background-color: rgb(240, 208, 110);

}

#weather{
    background-color: rgb(196, 164, 216);

}

#shields{
    background-color: rgb(164, 214, 216);

}

#warpCore{
    background-color: rgb(240, 208, 110);

}

#messages{
    background-color: rgb(240, 173, 110);

}

#myApps{
    background-color: rgb(196, 164, 216);
}

.appIcon {
    width: 100%;
    cursor: pointer;
}

.messagesInterface {
    width: 1000px;
    height:550px;
}

/* space book ----------------------------- */
.appsSpaceBook {
    display: none;
    background-color: rgba(0, 0, 255, 0.319);
    width: 100%;
    height: 100%;
    border: 10px solid purple;
}

.spaceBookFrontPageHeader {
    height: 20%;
    border: 3px solid red;
}

.spaceBookMusicAd {
    
}

.spaceBookNewsAd {
    
}

.spaceBookNewsAd {
    
}

.spaceBookFrontPageRightContainer {
    
}

.spaceBookAd {
    
}

.spaceBookLogIn {
    
}

.spaceBookProfiles {
    
}

.spaceBookMemes {
    
}


/* ------------------------------ middle dashboard overlay, all screens, controls, and the terminal */

.dashboardOverlay {
    border-radius: 30px;
    background-color: #252525;
    width: 100%;
    height: 112%;
    margin: 0 7px;
    position: relative;
    bottom: 95px;
}

.screens{
    height: 75%;
}

.screenOverview{
    display: block;
}

/* ------------- ship controls screen -------------  */

.screenShipcontrols{
    display: flex;
    justify-content: space-between;
}

/* ------ Ship Controls left column ------ */

.screenShipControlsLeftColumn {
    width: 10%;
    display: flex;
    flex-direction:column-reverse;
    justify-content: space-around;
    gap: 20px;
}

.warpBarDisplay {
    gap: 10px;
    height: 80%;
    display: flex;
    flex-direction:column-reverse;
    justify-content: space-around;
}

.warpBar{
    color: #252525;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #008000;
    height: 10%;
}

.bar {
    height: 10%;
    background-color: grey; /* Default color */
    margin-bottom: 2px;
    opacity: 0.3; /* Start as dimmed */
    transition: opacity 0.3s; /* Smooth transition for the lighting effect */
    align-items: center;
    justify-content: center;
    color: #252525;
    display: flex;
  }

/* Dynamic coloring using data attributes */
.bar[data-color="red"] { background-color: rgb(0, 255, 0); }
.bar[data-color="orange"] { background-color: rgb(106, 233, 43); }
.bar[data-color="yellow"] { background-color: rgb(199, 237, 73); ; }
.bar[data-color="green"] { background-color: rgb(218, 255, 83); }
.bar[data-color="blue"] { background-color: rgb(255, 243, 74); }
.bar[data-color="indigo"] { background-color: rgb(255, 210, 85); }
.bar[data-color="violet"] { background-color: rgb(241, 175, 33); }
.bar[data-color="pink"] { background-color: rgb(243, 116, 13); }
.bar[data-color="grey"] { background-color: rgb(255, 5, 5); }

/* Active class to light up the bar */
.active {
    opacity: 1;
  }
  

/* ------ Ship Controls right column ------ */

.screenShipControlsRightColumn {
    width: 90%;
    display: flex;
    flex-direction: column;
}

/* -- Ship Controls Title Tier -- */

.screenShipControlsTitle{
    border: 3px solid orange;
    width: 80%;
    height: 20%;
    display: flex;
    align-self: self-end;
    border-bottom-left-radius: 50px;
}

.screenShipControlsTitle h3 {
    text-align: right;
    margin-right: 25px;
    font-size: .8rem;
}

.screenShipControlsTitle h1 {
    text-align: left;
    margin-right: 25px;
    text-align: center;
    margin-left: 40px;
}

/* -- Ship Controls Mid Tier -- */
.screenShipControlsMidTier {
    width: 100%;
    height: 30%;
    display: flex;
}

.screenShipControlsWarpSpeed {
    width: 50%;
}

.screenShipControlsCoordinatesStatus {
    width: 50%;
    border: 3px solid orange;
}

/* -- Ship Controls Bottom Tier -- */

.screenShipControlsBottomTier {
    border: 3px solid orange;
    width: 100%;
    height: 50%;
    display: flex;
    border-radius: 5px;
}

.screenShipcontrols{
    display: none;
    height: 100%;
}

.screenShipWarpControls {
    width: 33%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.screenShipControlsCoordinatesButton {
    width: 33%;
}

.screenShipControlsCoordinatesMap {
    width: 33%;
}


.orangeGlowButton {
    color:#252525;
    font-size: 48px;
    background-color: orange;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: 30%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    transition: background-color 0.3s; /* Smooth transition for background color */
    animation: glow1 1s infinite alternate;
    margin: auto;
}  

.orangeGlowButton:active {
    background-color: rgb(251, 255, 0); /* Change background color on hover */
    animation: none; /* Disable animation on hover */
    animation: glow3 1s infinite alternate
}

.blueGlowButton {
    color:#252525;
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(164, 214, 216);
    height: 50%;
    width: 30%;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    transition: background-color 0.3s; /* Smooth transition for background color */
    animation: glow2 1s infinite alternate;
    margin: auto;
}

.blueGlowButton:active {
    background-color: rgb(251, 255, 0); /* Change background color on hover */
    animation: glow3 1s infinite alternate; /* Disable animation on hover */
}

.redGlowButton {
    transition: background-color 0.3s; /* Smooth transition for background color */
    animation: glow4 1s infinite alternate;
}  

.redGlowButton:active {
    background-color: rgb(251, 255, 0); /* Change background color on hover */
    animation: glow4 1s infinite alternate; /* Disable animation on hover */
}

  @keyframes glow1 {
    0% {
      box-shadow: 0 0 5px orange; /* Initial shadow */
    }
    100% {
      box-shadow: 0 0 5px orange, 0 0 6px orange, 0 0 10px orange; /* Glowing shadow */
    }
  }

  @keyframes glow2 {
    0% {
      box-shadow: 0 0 5px orange; /* Initial shadow */
    }
    100% {
      box-shadow: 0 0 5px rgb(164, 214, 216), 0 0 6px rgb(164, 214, 216), 0 0 10px rgb(164, 214, 216); /* Glowing shadow */
    }
  }

  @keyframes glow3 {
    0% {
      box-shadow: 0 0 5px orange; /* Initial shadow */
    }
    100% {
      box-shadow: 0 0 5px rgb(251, 255, 0), 0 0 6px rgb(251, 255, 0), 0 0 10px rgb(251, 255, 0); /* Glowing shadow */
    }
  }

  @keyframes glow4 {
    0% {
      box-shadow: 0 0 5px red; /* Initial shadow */
    }
    100% {
      box-shadow: 0 0 5px red, 0 0 6px red, 0 0 10px red; /* Glowing shadow */
    }
  }

/* ------------ Weapons screen -------------- */

.screenWeaponscontrols{
    display: none;
    height: 100%;
}

.weaponsConsolePic {
    height: 290px;
    margin: auto;
}

.upperTier {
    border: 3px solid orange;
    border-bottom-left-radius: 50px;
    width: 80%;
    display: flex;
    height: 20%;
    margin-left: auto;
}

.upperTier h1 {
    margin-left: 30px;
}

.weaponsStatus {
    border: 3px solid orange;
    width: 80%;
    font-size: .5rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    color: #00ff00;
    gap: 10px;
}

.midTier {
    border: 3px solid orange;
    height: 50%;
    width: 75%;
    margin-left: auto;
    display: flex;
    justify-content:space-between;
    align-items: center;
}

.lockOnStatus{
    width: 15%;
    height: 20%;
    border:3px solid red;
    color: red;
    position: relative;
    bottom: 120px;
    text-align: center;
}


.lowerTier {
    border: 3px solid orange;
    display: flex;
    flex-direction: row;
    height: 27%;
    width: 90%;
    margin-left: auto;
    border-top-left-radius: 50px;
    justify-content: space-between;
}

.lockOnButtonContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    border: 3px solid orange;
    height: 100%;
    border-top-left-radius: 45px;
}

.lockOnButton {
    display: flex;
    width: 70%;
    height: 70%;
    border: 1px solid red;
    background-color: red;
    border-radius: 50%;
    color: #252525;
    font-weight: bold;
    font-size: large;
    justify-content: center;
    align-items: center;
}

.fireButtonsContainer {
    display: flex;
    width: 400px;
    height: 200px;
    border: 3px solid orange;
    height: 100%;
}

.phaserButtonContainer,
.photonTorpedoButtonContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.phaserButton,
.torpedoButton
 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    background-color: red;
    border-radius: 50%;
    color: #252525;
    font-weight: bold;
    font-size: large;
}


#standby {
    color: red;
}
.standby {
    color: red;
}

/* ------------ power/energy screen -------------- */
.screenPower{
    display: none;
    flex-direction: column;
    justify-content: space-between;
}

.powerUpperTier {
    display: flex;
    height: 20%;
    width: 80%;
    margin: auto;
}

.powerUpperTier h1 {
    margin: auto;
    padding: 20px;
}

.powerMidTier {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.powerLowerTier {
    border: 3px solid orange;
    height: 200px;
    height: 200px;
    border-radius: 5px;
}

.energyButtonsContainer {
    width: 60%;
    border: 3px solid orange;
    border-radius: 5px ;
    display: flex;
    margin: 24px auto;
    padding: 20px;
}

.engineEnergyBarButton {
    height: 100px;
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shieldsEnergyBarButton {
    height: 100px;
    width: 33%;
    align-items: center;
}

.weaponsEnergyBarButton {
    height: 100px;
    width: 33%;
    margin: auto;
}


.availableEnergy {
    width: 50%;
    height: 10%;
}
.energyDistributionBarsContainer {
    height: 250px;
    width: 60%;
    display: flex;
    justify-content: space-between;
}

.engineEnergyBar {
    border: 1px solid red;
    width: 100px;
    height: 200px;
}

.shieldsEnergyBar {
    border: 1px solid red;
    width: 100px;
    height: 200px;
}

.weaponsEnergyBar {
    border: 1px solid red;
    width: 100px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.energyBar4 {
    border: 1px solid red;
    height: 25%;
    width: 80%;
    background-color:rgb(164, 214, 216)
}
.energyBar3 {
    border: 1px solid red;
    height: 25%;
    width: 80%;
    background-color:rgba(164, 214, 216, 0.884)
}
.energyBar2 {
    border: 1px solid red;
    height: 25%;
    width: 80%;
    background-color:rgba(164, 214, 216, 0.634)
}
.energyBar1 {
    border: 1px solid red;
    height: 25%;
    width: 80%;
    background-color:rgba(164, 214, 216, 0.459)
}


/* -- Ship Controls Mid Tier -- */
.screenShipControlsMidTier {
    width: 100%;
    height: 100%;
    display: flex;
}

.screenWeather{
    display: none;
}

/* Shields IMG */

.screenShieldsMidTier {
    display: flex;
    flex-direction: row;
}

.screenShields{
    display: none;
}

.shieldsImgContainer {
    border: 3px solid cyan;
    border-radius: 5px;
    height: 562px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.shieldsImgShieldsOnOff {
    border: 10px dotted cyan;
    height: 500px;
    width: 500px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

.shieldsImgLeftInnerContainer {
    height: 100%;
    width: 12.5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.shieldsImgCenterInnerContainer {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.shieldsImgRightInnerContainer {
    height: 100%;
    width: 12.5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.shieldsImgLeftInnerWingContainer{
    height: 100%;
    width: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shieldsImgRightInnerWingContainer{
    height: 100%;
    width: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shieldsImgLeftInnerWing {
    border: 3px solid cyan;
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 85px;
    border-top-left-radius: 100px;
}

.shieldsImgRightInnerWing {
    border: 3px solid cyan;
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 85px;
    border-top-right-radius: 100px;
}



.shieldsImgCommandPodContainer {

}

.commandPod {
    border: 3px solid cyan;
    height: 15%;
    width: 75%;
    border-top-right-radius: 40px;
    border-top-left-radius: 40px;
}

.commandPodWindow {
    border: 2px solid cyan;
    height: 50%;
    width: 60%;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    margin: 10% auto;
    border-bottom-color: #252525;
}


.shieldsImgWarpSledContainer {
    border: 3px solid cyan;
    height: 60%;
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10%;
}

.shieldsImgWarpSledInnerUpperPart{
    border: 2px solid cyan;
    height: 20%;
    width: 75%;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    margin: 20% auto;
    border-bottom-color: #252525;
}

.shieldsImgWarpSledInnerLowerPart{
    border: 2px solid cyan;
    height: 30%;
    width: 60%;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    margin: 70% auto;
    border-bottom-color: #252525;
    border-top-color: #252525;
}


.shieldsImgLeftWingContainer {
    border: 3px solid cyan;
    height: 57%;
    width: 100%;
}

.shieldsImgRightWingContainer {
    border: 3px solid cyan;
    height: 57%;
    width: 100%;
}

.shieldsImgUpperThruster {
    border: 3px solid red;
    background-color: red;
    height: 5%;
    width: 100%;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
}

.shieldsImgLowerThruster {
    border: 3px solid red;
    background-color: red;
    height: 5%;
    width: 100%;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}


.shieldsImgLeftInfoContainer{
    margin-right: 100px;
}

.shieldsImgRightInfoContainer {
    margin-left: 100px;
}
.shieldsImgLeftInfoContainer,
.shieldsImgRightInfoContainer
{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 75px;
}

.shieldsImgInfo {
    border: 1px solid orange;
    padding: 10px;
    border-radius: 5px;
}

/* shield info lines */

.line1 {
    border: 1px solid orange;
    position: relative;
    width: 155px;
    z-index: 1;
    left: 35px;
    margin-top: 10px;
}

.line2 {
    border: 1px solid orange;
    position: relative;
    width: 175px;
    z-index: 1;
    left: 165px;
    top: 50px;
    margin-top: 10px;
    transform: rotate(45deg);
}

.line3 {
    border: 1px solid orange;
    position: relative;
    width: 155px;
    z-index: 1;
    left: 35px;
    margin-top: 10px;
}

.line4 {
    border: 1px solid orange;
    position: relative;
    width: 175px;
    z-index: 1;
    left: 165px;
    transform: rotate(45deg);
    top: 60px;
}

/* lines 5-8 are for the warp sled */

.line5 {
    border: 1px solid orange;
    position: relative;
    width: 155px;
    z-index: 1;
    left: 325px;
    top: 30px;
}
.line6 {
    border: 1px solid orange;
    position: relative;
    width: 33px;
    z-index: 1;
    left: 295px;
    top: 15px;
    transform: rotate(45deg);
}
.line7 {
    border: 1px solid orange;
    position: relative;
    width: 150px;
    z-index: 1;
    left: 35px;
}
.line8 {
    border: 1px solid orange;
    position: relative;
    width: 114px;
    z-index: 1;
    bottom: 2px;
    left: 185px;
}


/* lines 9-11 are for the command pod */
.line9 {
    border: 1px solid orange;
    position: relative;
    width: 155px;
    z-index: 1;
    margin-top: 10px;
    right: 15px;
}
.line10 {
    border: 1px solid orange;
    position: relative;
    width: 155px;
    z-index: 1;
    right: 170px;
    bottom: 2px;
}

.line11 {
    border: 1px solid orange;
    position: relative;
    width: 1230x;
    z-index: 1;
    right: 300px;
    bottom: 4px;
}

.shieldsShiftUp1 {
    margin-bottom: 20px;
}

/* lines 12-13 are for the left wing */

.line12 {
    border: 1px solid orange;
    position: relative;
    width: 155px;
    z-index: 1;
    margin-top: 10px;
    right: 15px;
}

.line13 {
    border: 1px solid orange;
    position: relative;
    width: 170px;
    z-index: 1;
    right: 185px;
    bottom: 2px;
}

/* lines 13-16 are for right thruster */

.line14 {
    border: 1px solid orange;
    position: relative;
    width: 155px;
    z-index: 1;
    margin-top: 10px;
    right: 15px;
}
.line15 {
    border: 1px solid orange;
    position: relative;
    width: 145px;
    z-index: 1;
    right: 130px;
    bottom: 2px;
}



.shieldsImgEnergyButtons {
    width: 10%;
    height: 50%;
    display: flex;
    flex-direction: column;
    margin-left: 30px;
}

.energyButtonsContainerStretch {
    width: 100%;
}


.screenWarpCore{
    display: none;
    flex-direction: column;
    height: 75%;
}

#currentWarpLevel {
    color: orange;
}

.screenWarpCoreLowerArea {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.screenWarpCoreLeftContainer,
.screenWarpCoreCenterontainer,
.screenWarpCoreRightContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.ejectContainer{
    border: 3px solid orange;
    border-radius: 5px;
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}

.ejectButton {
    border: 1px solid red;
    background-color: red;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    color: #252525;
    display: flex;
    text-align: center;
    align-items: center;
}

.screenWarpCoreInfoContainer {
    border: 3px solid orange;
    border-radius: 5px;

    width: 90%;
    height: 90%;
}

.screenWarpCoreLeftContainer {
    width: 25%;
    height: 100%
}

.screenWarpCoreCenterContainer{
    width: 16%;
    display: flex;
    flex-direction: column;
}

.screenWarpCoreRightContainer{
    width: 25%;
    height: 100%;
}

.warpCoreHole {
    width: 75px;
    height: 75px;
    border: 1px solid cyan;
    border-radius: 50%;
}

.warpCoreChamber{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 250px;
    border: 1px solid cyan;
    border-radius: 50%;
    border-top-color: #252525;
    border-bottom-color: #252525;
}

.warpCoreCenter{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.warpCoreCenterTube {
    width: 250px;
    height: 25px;
    border: 1px solid cyan;
    border-radius: 90px;
}

.warpCoreLeftSide,
.warpCoreRightSide {
    width: 150px;
    height: 100%;
    display: flex;
    align-items: center;
}

.warpCoreBelt{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
}
.warpCoreLeftBlock {
    border: 1px solid cyan;
    width: 30px;
    height: 80%;
}

#pulsatingWarpCoreCenter {
    background-color: none; /* Initial background color */
    animation: pulsate 3s infinite alternate; /* Animation properties */
}

#pulsatingWarpCoreCenterTube1 {
    background-color: none; /* Initial background color */
    animation: pulsate 7s infinite alternate; /* Animation properties */
    width: 50%;
    margin-top: 10px;
}

#pulsatingWarpCoreCenterTube2 {
    background-color: none; /* Initial background color */
    animation: pulsate 10s infinite alternate; /* Animation properties */
    width: 75%;
    margin-top: 10px;
}

#pulsatingWarpCoreCenterTube3 {
    background-color: none; /* Initial background color */
    animation: pulsate 13s infinite alternate; /* Animation properties */
}

#pulsatingWarpCoreCenterTube4 {
    background-color: none; /* Initial background color */
    animation: pulsate 7s infinite alternate; /* Animation properties */
    width: 50%;
    margin-bottom: 10px;
}

#pulsatingWarpCoreCenterTube5 {
    background-color: none; /* Initial background color */
    animation: pulsate 10s infinite alternate; /* Animation properties */
    width: 75%;
    margin-bottom: 10px;
}

#pulsatingWarpCoreCenterTube6 {
    background-color: none; /* Initial background color */
    animation: pulsate 13s infinite alternate; /* Animation properties */
}

#pulsatingWarpCoreLeftBlock1{
    background-color: none; /* Initial background color */
    animation: pulsate 7s infinite alternate; /* Animation properties */
}

#pulsatingWarpCoreLeftBlock2{
    background-color: none; /* Initial background color */
    animation: pulsate 10s infinite alternate; /* Animation properties */
}

#pulsatingWarpCoreLeftBlock3{
    background-color: none; /* Initial background color */
    animation: pulsate 13s infinite alternate; /* Animation properties */
}

#pulsatingWarpCoreRightBlock4{
    background-color: none; /* Initial background color */
    animation: pulsate 7s infinite alternate; /* Animation properties */
}

#pulsatingWarpCoreRightBlock5{
    background-color: none; /* Initial background color */
    animation: pulsate 10s infinite alternate; /* Animation properties */
}

#pulsatingWarpCoreRightBlock6{
    background-color: none; /* Initial background color */
    animation: pulsate 13s infinite alternate; /* Animation properties */
}
  
  @keyframes pulsate {
    0% {
      background-color: none; /* Start with red */
    }
    50% {
      background-color: blue; /* Change to blue at 50% of animation */
    }
    75%{
      background-color: rgb(0, 208, 255);
    }
    100% {
      background-color: cyan; /* Back to red at the end of animation */
    }
  }


.screenMessages{
    display: none;
}

.screenMyApps{
    display: none;
}

.myAppsContainer {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    margin-left: 30px;
}

.SpaceWebAppIcon {
    width: 150px;
    height: 150px;
    border: 2px solid blue;
    border-radius: 30px;
}

.terminal {
    border:5px solid orange;
    height: 21%;
    text-align: left;
    border-radius: 15px;
    top: 6px;
    position: relative;
}

.terminalTitle {
    font-weight: bold;
    margin-left: 10px;
    margin-top: 10px;
}

.terminalText {
    margin-top: 5px;
    margin-left: 10px;
}

/* ------------------------------ right row ------------------------------ */

.rightRow {
    width: 3%;
    background-color: rgb(76, 221, 229);
}

.planetaryInfoContainer {
    margin: auto;
    border: 2px solid orange;
    border-radius: 5px;
}

.planetaryInfoContainer img {
    height: 500px;
    background-size: cover;
}