:root {
    --background: #d5e0e3;
    --original: #d5e0e3;
    --text: #595959;
    --footer-text: #0c313c;
    --accent: #8bc34a;
    --nav-text-light: #f1efef;
    --nav-text-dark: #0b323cb0;
}

html {
    background-color: var(--original);
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--background)!important;
}
.bg-original {
    background-color: var(--original);
}

.bg-accent {
    background-color: var(--accent);
}
h1 {
    color: var(--text);
    padding: 20px;
}

.nav-text-light {
    color: var(--nav-text-light) !important;
}
.nav-text-dark {
    color: var(--nav-text-dark) !important;
}



span {
    transform: scale(0.9);
    display: inline-block;
}

.content {
    /*opacity: 0.65;*/
    text-align: justify;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    background-color: rgba(255,255,255,0.5);
    color: var(--text);
    font-family: 'Open Sans',sans-serif;
}
.content::after {
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.border-bottom {
    border-bottom: 1px solid #595959;
    padding-bottom: 10px;
}

footer {
    background-color: var(--original);
    color: var(--footer-text);
    padding: 5px;
    text-align: center;
    font-size: 16px;
    bottom: 0;
    width: 100%;
    position: relative;
    height: 30px;
}

.fish {
    width: 150px;
    height: 100px;
    animation: swim 3s infinite;
    display: none;
    position: absolute;
}
.nameTag {
    font-size: 11px;
    position: absolute;
    display: block;
}
.initialFish {
    width: 50px;
    height: 50px;
}

.flipped {
    transform: scaleX(-1);
}
.block {
    padding: 0 20px 30px 20px;
}
.block > h1 {
    padding-left: 5px;
}
.block > h2 {
    border-left: 7px solid var(--original);
    padding-left: 5px;
}
.block > h5 {
    border-left: 5px solid var(--original);
    padding-left: 5px;
}
.block > h6 {
    border-left: 3px solid var(--original);
    padding-left: 5px;
}
.articleDate {
    float: right;
}

.link:link, .link:visited, link:hover, link:active {
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;

}
#nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
}
#footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 100;
}
.navbar {
    width: 100%;
}
.active {
    font-weight: 800!important;
    border-bottom: 1px solid var(--nav-text-dark);
    color: #0c313c!important;


}
.virtualAquariumContainer {
    margin-top: 30px;
    margin-bottom: 70px;
}
#aquariumContainer {
    height: 370px;
    position: relative;

}
.aquarium {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 20px solid black;
    border-top: 20px solid black;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-image: linear-gradient(to bottom right, rgba(169, 200, 241,0.5), rgba(0, 210, 225,0.5));
    overflow-x: hidden;
}
#aquariumFrontGlass {
    width: 100%;
    height: 330px;
    position: absolute;
    top: 20px;
    left: 0;
    opacity: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-image: linear-gradient(to bottom right, rgba(245, 216, 179, 1), rgba(87, 48, 0, 1));
    overflow-x: hidden;
    z-index: 9;
}

.colorPickerPlaceholder {
    background-color: black;
    padding: 0 0 0 0;
    width: 33px;
    height: 33px;
    border-radius: 50%;
}
.inline {
    display: inline-block;
}

.newFishForm {
    margin-left: auto;
    margin-right: auto;
    width: 294px
}
.aquariumAction {
    width: 40px;
    height: 40px;
}
path {
    stroke: #ff0000;
    stroke-width: 1px;
    stroke-dasharray: 2,2;
    stroke-linejoin: round;
}
.fishContainer {
    width: 50px;
}
.fishNameInputContainer {
    width: 122px;
}
.colorPickerContainer {
    width: 33px;
}
.addFishButtonContainer {
    width: 113px;
}

.fishContainer input {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.codeContainer {
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    width: 294px;
    bottom: -16px;
}
.fishCodeContainer {
    width: 318px;
    margin-left: -15px;
    margin-bottom: -10px;
}
.snippet {
    border-radius: 0.375rem;
    padding-right: 5px;
    border: solid;
    height: 2rem;
    height: 40px;
    white-space: nowrap;
}
.codeWrapper {
    overflow-y: auto;
    padding-right: 10px;
    padding-top: 5px;
    height: 40px;
}
.bigWrapper {
    padding-right: 30px;
}
.copy {
    display: block;
    float: right;
    margin-top: -36px;
}
.line {
    margin-left: -10px;
}
.codeLabel {
    bottom: 14px;
    position: relative;
}
.food {
    position: absolute;
    background-color: #c7a004;
    border-radius: 50%;
}
.bubble {
    position: absolute;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    border: 1px dotted #ffffff;
}
.disableScroll {
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
}

.image-container {
    position: relative;
    margin: 10px 0 10px 0;
    height: 200px;
    background-size: cover; /* Ensure the entire background image fits within the container */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent background image from repeating */
}
.borac {
    background-image: url("../assets/borac.jpg");
}
.tank1 {
    background-image: url("../assets/tank1.jpg");
}
.tank2 {
    background-image: url("../assets/tank2.jpg");
}
.marine {
    background-image: url("../assets/marine.jpg");
}
.skalar {
    background-image: url("../assets/skalar.jpg");
}
.shrimp1 {
    background-image: url("../assets/shrimp1.jpg");
}
.fish1 {
    background-image: url("../assets/fish1.jpg");
}
.fish2 {
    background-image: url("../assets/fish2.jpg");
}
.snail1 {
    background-image: url("../assets/snail1.jpg");
}

.logo {
    display: inline-block;
    position: relative;
    width: auto;
    height: 35px;
}