:root {
    --primary-colour: #FFFFFA;
    --second-colour: #bbbbbb;
    --background-colour: #101314;
    --third-colour: #a5a5a5;
    --user-count-colour: #FFF;
    --project-icon-size: 64px;
    --side-padding: 10%;
    --margin-top-subheading-padding: 20px;
    --default-padding: 1rem;
	font-family: 'Inter';
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--background-colour);
    scroll-behavior: smooth;
}

.container {
    text-align: center;
    justify-content: center;
    margin: auto;
    padding-bottom: 10vh;
    padding-top: 10vh;
    max-width: 600px;
    z-index: 1;
    /* background-color: rgba(255, 0, 0, 0.164); */
}

.title {
    font-size: 48px;
    font-weight: bold;
    font-family: 'Beth Ellen';
    color: var(--primary-colour);
}

.project-title {
    font-size: 48px;
    font-weight: bold;
    font-family: 'Geologica';
    color: var(--primary-colour);
}

.subtitle {
    display: block;
    font-size: 24px;
    color: var(--second-colour);
    margin: var(--default-padding);
}

.projects {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow items to wrap around */
    margin: var(--default-padding);
}

.project-item {
    margin: 10px;
    cursor: pointer;
}

.project-item img {
    width: var(--project-icon-size);
    border-radius: 15%;
}

.project-icon {
    width: calc(var(--project-icon-size) * 2);
    border-radius: 15%;
    -webkit-animation: action 1.5s ease-in-out infinite;
    animation: action 1.5s ease-in-out infinite;
}

.go-back-button {
    top: 0;
    left: 0;
    margin: 10px;
    position: absolute;
    text-decoration: underline;
    color: white;
    font-weight: 500;
}

.about-us-heading {
    font-size: 24px;
    font-weight: bold;
    margin-top: var(--margin-top-subheading-padding);
    color: var(--second-colour);
}

.introduction {
    font-size: 14px;
    color: var(--third-colour);
}

.stats {
    font-size: 24px;
    font-weight: bolder;
    margin: 10px;
    color: var(--user-count-colour);
}

.contact-heading {
    font-size: 24px;
    font-weight: bold;
    margin-top: var(--margin-top-subheading-padding);
    color: var(--second-colour);
}

.email {
    font-size: 18px;
    color: var(--third-colour);
}

.email a {
    text-decoration: underline;
    color: var(--third-colour);
}


/* Inspired by https://yuukun.dev */
.starmap {
    width: 100%;
    height: calc(100lvh + 50px);
    mask: linear-gradient(black 35%, transparent 100%);
    position: absolute;
    z-index: 0;
    top: -50px;
    left: 0;
    mix-blend-mode: lighten;
    filter: brightness(75%)
}

.background-image {
    z-index: -100;
    position: absolute;
    inset: 0px;
    box-sizing: border-box;
    padding: 0px;
    border: medium;
    margin: auto;
    display: block;
    width: 0px;
    height: 0px;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
    z-index: -1;
    mask: linear-gradient(black 35%, transparent 100%);
    filter: brightness(40%)
}

.text-effect-green {
    color: rgb(28, 212, 28);
}

.fire-gradient-text {
    background-image: linear-gradient(60deg, #E21143, #FFB03A);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.aqua-gradient-text {
    background-image: linear-gradient(60deg, #3711e2, #9ef2ff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* Styles for the tooltip */
.tooltip {
    opacity: 0;
    position: absolute;
    padding: 5px;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1;
    transition: opacity 0.3s; /* Add a smooth transition effect */
    top:50%;
    left:50%;
    transform :translate(-50%,-50%);
}

/* Show the tooltip on hover */
.project-item:hover .tooltip {
    opacity: 1;
}

.float:hover {
    -webkit-animation: action 1.5s ease-in-out infinite;
    animation: action 1.5s ease-in-out infinite;
}

@-webkit-keyframes action {
	0% { transform: translatey(0px); }
	50% { transform: translatey(-10px); }
	100% { transform: translatey(0px); }
}

@keyframes action {
	0% { transform: translatey(0px); }
	50% { transform: translatey(-10px); }
	100% { transform: translatey(0px); }
}

.dotmatrix {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 0);
    background-size: 3px 3px;
}

@media(max-width:600px) {
    .title {
        font-size: 30px;
        padding: 0px;
        margin: 0px;
    }
}