*{
    box-sizing: border-box;
	max-width: 100vw;
	margin: 0;
	padding: 0;
  }

.main {
        width: 100%;
        height: 100vh;
        overflow-y: hidden;
        background: rgb(255, 255, 255);
        
        /* background: blue; */
        
        display: flex;
        flex-direction: row;
        padding-top: 75px;
        padding-bottom: 25px;
}

.leftpanel {
    width: 25vw;
    min-width: 300px;
    height: auto;
    background: rgb(255, 255, 255);
    padding: 0px 10px 0px 20px;
        h1, p, ul {
            color: rgb(255, 255, 255);
        }
}

.middlepanel {
        width: 50vw;
        height: 100vh;
        background: rgb(255, 255, 255);

        display: flex;
        flex-direction: column;

        overflow: auto;
        row-gap: 25px;
}

.rightpanel {
        width: 25vw;
        height: 100vh;
        background: rgb(255, 255, 255);
        padding: 0px 10px 0px 20px;

        display: flex;
        flex-direction: column;
        
        overflow: auto;
}

#name, #contact, #bio, #left, #right, #title, #task {
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: 1.2;
    color: rgb(0, 0, 0);
}

.project {
        width: 100%;
        height: auto;
        /* border: 1px solid rgb(0, 0, 0); */
        
        display: flex;
        flex-direction: column;
}

.image {
    width: 100%;
    height: 100%;
    /* background: rgb(179, 65, 17); */
    padding-left: 20px;
    padding-right: 20px;
}

.carousel {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        white-space: nowrap;
}

.container {
    display: flex; /* Sets the container as a flex container */
  }
  
.left-column {
    flex: 1; /* Allows the left column to grow and occupy space */
    padding: 10px; /* Add some spacing */
}
  
.right-column {
    flex: 1; /* Allows the right column to grow and occupy space */
    padding: 10px; /* Add some spacing */
}

#left {
    padding-left: 20px;
}

#right {
    padding-right: 20px;
}

hr {
    border: none;
    height: 1px;
    background-color: rgb(0, 0, 0);
}

.right-container {
        display: flex; /* Sets the container as a flex container */
        flex-direction: column;
}

.title-column {
    flex: 1; /* Allows the left column to grow and occupy space */
    padding: 10px; /* Add some spacing */
}

.task-column {
    flex: 2; /* Allows the right column to grow and occupy space */
    padding: 10px; /* Add some spacing */
}

.entry {
        display: flex;
        flex-direction: column;
}

@media screen and (max-width: 600px) {
    .main {
        display: flex;
        flex-direction: column;
    }

    .leftpanel {
        padding-bottom: 30px;
    }

    .middlepanel {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: auto;
        overflow-y: scroll;
    }

    .rightpanel {
        display: none;
    }
}