site/content/assets/css/index.css

@import url(_colours.css);
@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");

header,
nav,
footer,
.md-content .md-typeset h1 {
     display: none !important;
}

article,
.md-container {
     min-height: 100vh;
     width: 100%;
     margin: 0;
     padding: 0;
}

.md-content__inner,
.md-main__inner,
.md-grid,
html,
body,
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

.md-grid {
     max-width: none;
}

/* This was creating an annoying space at the top */
article.md-content__inner.md-typeset:before,
article.md-content__inner.md-typeset:after {
     content: none;
}

body {
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: white;
     width: 100%;
}

.container {
     width: 100%;
     height: 100%;
}

.columns {
     display: flex;
     justify-content: space-between;
     width: 100%;
     height: 50vh;
}

.top-row {
     flex: 1;
     min-width: 100vw;
     height: 50vh;
     display: flex;
     flex-direction: row;
     justify-content: center;
     padding: 5em;
     font-family: 'Libre Baskerville', serif;
}

.top-row h2 {
     margin-bottom: 0.1em;
     font-size: 5vw;
     font-weight: 900;
     overflow: hidden;
     border-right: .15em solid #818589;
     white-space: nowrap;
     letter-spacing: .05em;
     animation:
          typing 5s steps(40, end) forwards 2s,
          blink-caret 0.75s step-end infinite;
}

@keyframes typing {
     from {
          width: 0
     }

     to {
          width: 100%
     }
}

@keyframes blink-caret {

     from,
     to {
          border-color: transparent;
     }

     50% {
          border-color: #818589;
     }
}

.top-row p {
     font-size: 3vw;
     color: #818589;
}

.top-row * {
     text-align: left;
}

/* Image Container Styling */
.image-container {
     width: 100%;
     height: 33.33vh;
     position: relative;
     overflow: hidden;
}

.image-container:hover {
     filter: invert(50%);
}

.image-container img {
     width: 100%;
     height: 100%;
     object-fit: contain;
}

/* Responsive Design */
@media (max-width: 768px) {
     .columns {
          flex-direction: column;
     }
}

#loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: #EFE5DC;
     display: flex !important;
     justify-content: center;
     align-items: center;
     z-index: 9998;
     transition: opacity 1s ease-out, transform 0.5s ease-out;
}

#loader.fade-out {
     opacity: 0;
     transform: scale(1.1);
}

#loader img {
     width: 50px;
     height: 50px;

}

@keyframes spin {
     from {
          transform: rotate(0deg);
     }

     to {
          transform: rotate(360deg);
     }
}

#loading-text {
     font-family: Arial, sans-serif;
     font-size: 24px;
     color: black;
     /* Change text color if needed */
     animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
     0% {
          opacity: 1;
     }

     50% {
          opacity: 0.5;
     }

     100% {
          opacity: 1;
     }
}

/* Add fade-out animation */
@keyframes fadeOut {
     from {
          opacity: 1;
          transform: scale(1);
     }

     to {
          opacity: 0;
          transform: scale(1.1);
     }
}

.fade-out {
     animation: fadeOut 1s ease-out forwards;
}