html {
    background-color: rgb(150, 202, 206);
    display: flex;
    justify-content: center;
    flex-direction: column;
}

body {
    background-color: black;
    flex: 1 1 1500px;
    margin: 20px;
    display: flex;
    flex-direction: column;
    border: black solid thin;
}

.header {
    background-color: black;
    flex: 0.05;
    color: rgb(185, 211, 212);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px;
    padding: 0px 5%;
}

.header > * {
    gap: 10px 15px;
    white-space: nowrap;
}

.navbar {
    display: flex;
    flex-direction: row;
    padding: 5px 10px;
}

a {
    text-decoration: none;
    color: inherit;
}

.site-name {
    font-weight: bold;
    padding: 10px 200px 10px 10px;
    display: flex;
    align-items: center;
}

.item {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.2px;
    align-self: center;
}

.intro {
    background-color: rgb(203, 238, 240);
    display: flex;
    flex-direction: column;
    flex: none;
    height: 500px;
    position: relative;
    padding: 0px 20px;
    --gear-size: 250px;
    align-items: center;
}

.intro-hook {
    font-family: 'ibm_plex_sansbold', sans-serif;
    font-size: 72px;
    text-wrap: wrap;
    font-weight: 600;
    line-height: 1.1;
    width: 700px;
}

.intro-content {
    font-size: 22px;
    width: 700px;
}

@media only screen and (max-width: 1110px) {
    .item {
        font-size: 10px;
    }
    .site-name {
        padding: 0px 200px 0x 10px;
    }
    .intro {
        height: 400px;
        --gear-size: 100px;
    }
    .intro-hook {
        font-size: 38px;
        width: auto;        
    }
    .intro-content {
        font-size: 16px;
        width: auto;        
    }
}

.projects {
    background-color: black;
    flex: 1;
}



.gear-container {
    width: var(--gear-size); /* Restricts visible area */
    height: var(--gear-size);
    overflow: hidden; /* Ensures anything outside the container is hidden */
    position: absolute;
    margin: 0px;
    padding: 0px;
}

.gear-left-container {
    bottom: 0px;
    left: 0px;
}

.gear-right-container {
    bottom: 0px;
    right: 0px;
}

.gear {
    width: var(--gear-size);
    height: var(--gear-size);
    background: url("./images/gear-right.png") no-repeat;
    position:absolute;
    z-index: 1;
    background-size: contain;
    opacity: 45%;
    mix-blend-mode: darken;
    overflow: hidden;
}

.gear-left {
    animation:spin 45s linear infinite;
    bottom: -120px;
    left: -120px;
}

.gear-right {
    animation: reverse-spin 45s linear infinite;
    bottom: -120px;
    right: -120px;
}

@media only screen and (max-width: 1110px) {
    .gear-left {
        bottom: -50px;
        left: -50px;
    }
    .gear-right {
        bottom: -50px;
        right: -50px;
    }
}

@keyframes spin { 
    100% { 
        transform:rotate(360deg); 
    } 
}

@keyframes reverse-spin {
    0% {
        transform: rotate(360deg);
    }
}