.main {
    margin: auto;
    border-left: solid 1px var(--red);
    border-right: solid 1px var(--red);
    height: 100vh;

    max-width: 1100px;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 4fr;
    grid-template-areas:
        "head"
        "projects";
    height: 100%;
}

.head {

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: solid 1px var(--red);
}

.head-text,
.meet-text {
    color: var(--dark-blue);
    font-size: 1.45rem;
    grid-area: "head";
    font-family: 'astrid', Helvetica, sans-serif;
    font-weight: 500;
}

.head-text {
    max-width: 650px;
    margin: auto;
}

.meet-text {
    color: var(--white);
}

.round-btn:hover {
    color: var(--white);
    background-color: var(--red);
}


.round-btn a {
    color: var(--red);
    text-decoration: none;
    cursor: url('cursors/pointer.png') 16 16, pointer;
}

.round-btn a:hover {
    color: var(--white);
    text-decoration: none;
    cursor: url('cursors/pointer.png') 16 16, pointer;
}

.round-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 75px;
    height: 75px;
    border-radius: 51% 48% 53% 50%;
    border: solid 1px var(--red);
    margin: 10px;
    color: var(--red);
    font-size: 1.1rem;
    cursor: url('cursors/pointer.png') 16 16, pointer;
}

.round-btn2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 60px;
    height: 60px;
    border-radius: 51% 48% 53% 50%;
    border: solid 1px white;
    margin: auto;
    color: var(--white);
    font-size: 1.1rem;
    cursor: url('cursors/pointer.png') 16 16, pointer;
    font-family: 'astrid', Helvetica, sans-serif;
    color: var(--red);
    border: solid 1px var(--red);
    transition: all 0.25s;
}

.round-btn2:hover {
    /* border-radius: 0%; */
    background-color: var(--red);
    color: var(--white);
}



.projects {
    grid-area: "projects";
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
}

.project {
    margin: 0.5rem 0 0.5rem 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 50%;
    min-width: 400px;
    height: 300px;
}

.project-left,
.project-right {
    width: 50%;
    padding-top: 1.25rem;
}

.project-left {
    /* padding-top: 1rem; */
}

.project-img {
    cursor: url('cursors/pointer.png'), pointer;
    margin: auto;
    padding-top: 2rem;
    width: 200px;
    height: 200px;
    background-size: 175%;
    /* background-image: url(https://i.stack.imgur.com/oImMD.png); */
    background-repeat: no-repeat;
    border-radius: 50%;
    background-position: center;
    border: solid 1px var(--white);
    box-shadow: 5px 5px 5px var(--red);
}

.circular-text,
div.circular-text p {

    cursor: url('cursors/pointer.png') 16 16, pointer;
}




.project-right {
    color: var(--red);
    height: 100%;
    display: flex;
    /* flex-wrap: wrap; */
    flex-direction: column;
}

.project-title {
    font-size: 1.85rem;
    font-family: 'cantata', Helvetica, sans-serif;
    word-break: normal;
}

.project-title a {
    color: var(--red);
    cursor: url('cursors/pointer.png') 16 16, pointer;
    text-decoration: none;
}

.project-title a:visited {
    color: var(--red);
}

.project-subtitle {
    font-size: 1.15rem;
    padding: 5px 0 5px 0;
    font-family: 'astrid', Helvetica, sans-serif;
    font-weight: 300;
}

.project-text,
.about-text {
    color: var(--dark-blue);
    font-size: 0.75rem;
    font-family: 'cantata', 'Times New Roman', Times, serif;
    width: 100%;
    padding: 1.5rem;
    /* overflow-y: scroll; */
}

.title {
    font-size: 1.5rem;
}

.title h1,
.title h2,
.title h3 {
    margin: 0px;
}

.meet {
    z-index: 9999999999999999999999;
    visibility: hidden;
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* align-content: space-between; */
    padding: 1rem;
    gap: 75px 10px;
    background-color: var(--red);
    width: 33%;
    height: 100vh;
    top: 0;
    right: 0px;
}

.meet-left-align {
    align-self: flex-start;
}


.big-title {

    font-size: 3.5rem;
    font-family: 'cantata', Helvetica, sans-serif;
    color: var(--white);
}

.white-underline {
    border-bottom: solid 1px white;
}

.red-underline {
    border-bottom: solid 1px var(--red);
}

.close {

    cursor: url('cursors/pointer.png') 16 16, pointer;
}

.about {
    visibility: hidden;
    z-index: 9999999999999999999;
    position: fixed;
    width: 65%;
    top: 50%;
    left: 50%;
    /* padding: 1.5rem; */
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    background-color: var(--white);
    border-radius: 3px;
    box-shadow: 5px 5px 5px var(--red);
    border: solid 2px var(--red);
    color: var(--red);

    height: 75%;

}

.about-btns {
    width: 100%;
    padding: 1.5rem;
    align-self: flex-start;
}

.about-text {

    /* border-top: solid 1px var(--red); */
    /* height: 250px; */
    /* max-height: 450px; */
    /* overflow-y: scroll; */
}

.border {
    border-bottom: solid 1px var(--red);
}



.about-text h3 {
    color: var(--red);
    margin: 0px;
}

.block-text {
    display: block;
    height: 100%;
}

/* .about-right,
.about-right {
    max-width: 85%;
} */


/* .text-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    max-height: 550px;
    gap: 2rem;
} */


.text-content {
    height: 100%;
    overflow-y: scroll;

    border-right: solid 1px var(--red);
}

.contact-img {
    /* https://www.digitalocean.com/community/tutorials/css-cropping-images-object-fit */
    margin: auto;
    border: solid 1px var(--red);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    max-width: 200px;
    object-fit: contain;
}

#about {
    font-size: .85rem;
    margin: 2rem;
    transform: rotate(-90deg);
    transition: all 0.25s ease-in-out;
}

#about:hover {
    transform: rotate(0deg);
}

/* When the browser is at least 600px and above */
@media screen and (max-width: 1000px) {


    .project {
        width: 100%;
        flex-direction: column-reverse;
        align-items: center;
        min-width: unset;
        height: min-content;

        border-bottom: solid 1px var(--red);
    }

    .project-left {
        /* padding-bottom: 2.5rem; */
        width: 100%;
        height: 300px;
    }

    .project-right {
        width: 75%;
        max-height: 250px;
        padding-bottom: 0;
    }

    .about {
        /* display: block; */
        flex-direction: column;
        width: 90%;
        max-height: 350px;
        /* overflow-y: scroll; */
    }

    .about-btns {
        padding: 0.25rem;
        align-self: center;
        border-top: solid 1px var(--red);
    }

    .title h1,
    .title h2,
    .title h3 {
        font-size: 1.25rem;
    }

    .about-text {
        max-height: none;
        overflow-y: unset;
    }

    .text-content {
        border-right: none;
    }

}

@media screen and (max-width: 550px) {
    .head div {
        font-size: 0.65rem;
    }
}