@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300&family=Fira+Sans:wght@200&family=Mukta:wght@300&family=Roboto:wght@300&family=Splash&display=swap');

a {
    color: inherit
}

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

#contact {
    position: fixed;
    display: flex;
    z-index: 10;
    bottom: 0;
    margin-bottom: 2rem;
    margin-left: 1.5rem;
}

.contact-icon {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
    transition: all 0.1s ease-in-out;
}

.contact-icon:hover {
    transform: scale(1.3);
}

body {
    margin: 0;
}
/* Canvas DIV */
#canvas-div {
    margin-top: -1rem;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

/* MAIN */
.text {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 700;
}

@keyframes textHover {
    from {
        width: 0;
    }

    to {
        width: 4rem;
    }
}


.text-div {
    border-bottom: 1px solid black;
    width: 0rem;
    position: relative;
}

#root {
    z-index: 10;
    display: none;
    width: 98vw;
    height: 95vh;
    border: solid gainsboro 1px;
    margin: 1rem;
    justify-content: space-between;
}

#option {
    margin-left: 1.5rem;
    margin-top: 2rem;
    display: flexbox;
    width: fit-content;
    height: 30%;
}

#option p {
    font-size: large;
}

#option p:hover {
    cursor: pointer;
}

/* CONTENT */

#content {
    margin-top: 3rem;
    margin-right: 2rem;
}

#about-me-content {
    display: none;
    font-family: 'Fira Sans', sans-serif;
    font-size: larger;
    font-weight: 600;
    white-space: pre-line;
    line-height: 2rem;
    animation: fadeIn 2s;
}

#about-me-content:hover {
    cursor: pointer;
}

/* SKILL */
#skill-content {
    display: none;
    font-family: 'Fira Sans', sans-serif;
    font-size: larger;
    font-weight: 600;
    white-space: pre-line;
    line-height: 2rem;
}

#skill-content:hover {
    cursor: pointer;
}

.skill-container {
    animation: fadeIn 1s;
    display: flex;
    align-items: center;
}

.skill-icon {
    width: 3rem;
    height: 3rem;
}

/* PROJECT */
#project-content {
    display: none;
    font-family: 'Fira Sans', sans-serif;
    font-size: larger;
    font-weight: 600;
    white-space: pre-line;
    line-height: 1rem;
}

#project-content {
    cursor: pointer;
}

.project-icon {
    width: 1rem;
    height: 1rem;
}

.project-container {
    animation: fadeIn 1s;
}