/* CSS Styling for Notebook page - using this as a testing ground */

 html, body {
    background-color: #f4f4f4;
    position: relative;
    z-index: 2;
    width: 100%;
    /* overflow:hidden; */
}

.home-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    background: url('https://static.igem.wiki/teams/4893/wiki/bg-igemhome.png') center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    overflow: hidden;
}

.home-header h2 {
    font-size: 80px;
    letter-spacing: 0.2rem;
    color: #fff;
    background-color: rgb(127 139 141 / 78%);
    padding: 20px;
    text-align: center;
    position: absolute;
}

main {
    margin-top: 0vh;
    background-color: #ffffff;
    position: relative;
    width: 100%;
    overflow:hidden;
}

.bg-lightblue {
    background-color: #f4fbffd0;
    padding: 40px;
}

.bg-lightyellow {
    background-color: #fffff680;
    padding: 40px;
}

/* Font Styles */
h3 {
    font-size:30px;
    color:#3b5f96;
    letter-spacing: 0.03rem;
    line-height: 50px;
}

h4 {
    font-size:20px;
    color:#3b5f96;
    letter-spacing: 0.03rem;
    line-height: 50px;
}

p {
    color:#243e63;
}


/* Light Blue Callouts */
.lightblue-callout {
    padding: 20px;
    position:absolute;
    background-color: #cae6ee;
    z-index: 3;
    display:flex;
    justify-content: center;
    text-align: center;
}

.lightblue-callout h2 {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0.2rem;
    color: #3b5f96;
    background-color: #ffffff81;
    padding: 20px;
    top:0;
    left:0;
    text-align: left;
    position: relative;
}

/* Light Yellow Callouts */
.lightyellow-callout {
    padding: 20px;
    position:absolute;
    background-color: #f4f3c1;
    z-index: 3;
    display:flex;
    justify-content: center;
    text-align: center;
}

.lightyellow-callout h3 {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0.2rem;
    color: #55481b;
    background-color: #ffffff81;
    padding: 20px;
    top:0;
    text-align: left;
    position: relative;
}

.darkyellow-callout {
    padding: 10px;
    position: relative;
    background-color: #f6e767;
    z-index: 4;
    width: 25%;
    justify-content: center;
    text-align: center;
}

.darkyellow-callout h3 {
    font-size:35px;
    font-weight: bold;
    letter-spacing: 0.2rem;
    color: #55481b;
    background-color: #ffffff81;
    padding: 15px;
    top:0;
    text-align: center;
    position: relative;
}

.secondaryyel-callout {
    padding: 10px;
    position: relative;
    background-color: #f9f0a0;
    z-index: 4;
    width: 25%;
    justify-content: center;
    text-align: center;
}

.secondaryyel-callout h3 {
    font-size:35px;
    font-weight: bold;
    letter-spacing: 0.2rem;
    color: #524823;
    background-color: #ffffff81;
    padding: 15px;
    top:0;
    text-align: center;
    position: relative;
}

/* Column sizes */
.column50 {
    float: left;
    width: 50%;
}

.column60 {
    float: left;
    width: 60%;
}

.column40 {
    float: left;
    width: 40%;
}

.column30 {
    float: left;
    width: 30%;
}

.column70 {
    float: left;
    width: 70%;
}



.yellow-block {
    padding: 10px;
    position: relative;
    background-color: #f6e767;
    z-index: 4;
    width: 20%;
    justify-content: center;
    text-align: center;
}


.text_block {
    padding: 20px;
    background-color: #f4f4f4;
    white-space: nowrap;
    position: absolute;
    z-index: 0;
}

.content-1 {
    background: url('https://static.igem.wiki/teams/4893/wiki/notebook/oldwell.jpg') center center/cover;
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0;
    left:0;
    z-index: 1;
}

.content-1 h2 {
    margin-top: 50vh;
    font-size: 80px;
    letter-spacing: 0.2rem;
    color: #fff;
    background-color: rgb(127 139 141 / 78%);
    padding: 20px;
    top:0;
    left:0;
    text-align: center;
    position: relative;
    z-index:1;
}

.fixed-image {
    background: url('https://static.igem.wiki/teams/4893/wiki/notebook/oldwell.jpg') center center/cover;
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0; /* Set the lowest z-index to keep it behind everything */
 }

 /* Animations ? */

.tag {
    opacity: 0%;
    transform: translate(0, 5vh);
    transition: all 1s;
}

.tag-alt {
    opacity: 0%;
    transform: translate(0, 3vh);
    transition: all 1.5s;
}

.tag.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.tag-alt.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.sidetag {
    opacity: 0;
    transform: translate(0, 5vh);
    transition: all 1s;
}

.sidetag.visible {
    opacity: 1;
    transform: translate(0, 0)
}

#fadein {
    text-align: center;
    animation: fadein 1s; 
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

/* Image styling */
.bandage_image {
    z-index: 1;

}

#loading-screen {
    position: fixed;
    top: 0vh;
    left: 0vw;
    width: 100%;
    height: 100%;
    background-color: #ffffff; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeOut 3s ease-in-out forwards;
    opacity: 1; 
    animation-delay: 2s; /* Delay the anim for 1 sec */
}

@keyframes fadeOut {
0% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}

.button {
    position: relative;
    padding: 20px 40px;
    background-color: #4f73a8;
    color: #fff;
    border: 2px solid #3b5f96;
    border-radius: 10px;
    font-size: 24px;
    text-align: center;
    box-shadow: 3px 3px 5px 0px rgba(18, 37, 47, 0.43);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
}

.image-container {
    width: 100%; /* Set the desired width for the container */
    overflow: hidden; /* Hide any content that exceeds the container */
    position: absolute; /* Needed for absolute positioning within */
    max-width: 100vw; /* Ensure it doesn't extend beyond the viewport width */
    z-index: 99; /* Place the container on top of other content */
  }