body, html {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 10px; /* Space between the containers */
    padding: 5px; /* Space around the entire layout */
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    background-color: rgb(220, 220, 220);
}

.container {
    
    background-color: white;

    border-radius: 10px;
    text-align: center;

    box-sizing: border-box;
}

.top {

    display: flex;
    align-items: center;
    height: 70px;
} 

.bottom {

    display: flex;

    justify-content: center;
    align-items: center;

    height: 40px;
    flex: 0 0 auto; 

    font-size: 10px; /* Adjust the font size */
    font-weight: lighter; /* Make the font bold (optional) */
}

.middle {
    
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center; /* Center content vertically */
    text-align: center;

}

button {


    height: 100%;
    

    background-color: none;

  

    cursor: pointer;

    border: none;
}

.left-buttons {
    
  
    display: flex;
    height: 100%;
    width: 100%;

    padding-left: 5px;

    align-items: center;


   
}

.right-button {

    display: flex;
    justify-content: end;
    height: 100%;
    width: 20%;

    align-items: center;

    padding-right: 15px;

    
    
}

.contactButton {

    border-radius: 6px;

    color: white;

        
    display: flex;
    justify-content: center;
    align-items: center;

    height: 60%;
    aspect-ratio: 1.5/1;
    background-color: rgb(40, 40, 40);

    font-size: 10px;
    font-weight: lighter;

    transition: transform 0.3s ease;
    
    text-decoration: none;

}
.contactButton:hover {
    transform: scale(1.2);
}

.icon {
    

    width: 80%;
    height: 80%;

    transition: transform 0.3s ease;
}
.icon:hover {
    transform: scale(1.2);
}

.project-text-container {
    
    display: flex;
    justify-content: left;
    align-items: start;
    flex-direction: column;

}
.project-title {


    margin: 0px;

    padding-left: 40px;
    padding-top: 40px;

    color: rgb(40, 40, 40);
    text-align: left;
    font-size: 16px;
    font-weight: bolder;

}
.project-subtitle {

    
    margin: 0px;

    padding-left: 40px;
    padding-top: 10px;

    color: rgba(40, 40, 40, 0.6);
    text-align: left;
    font-size: 10px;
    font-weight: lighter;

}

.project-body-title {
    


    margin: 0px;

    padding-left: 40px;
    padding-right: 40px;



    color: rgb(40, 40, 40);
    text-align: left;
    font-size: 12px;
    font-weight: bold;

}

.project-body {



    margin: 0px;

    padding-left: 40px;
    padding-right: 40px;

    

    color: rgba(40, 40, 40, 0.6);
    text-align: left;
    font-size: 11px;
    font-weight: lighter;

}

.indent {

    margin-top: 30px;

}
.anotherIndent {
    margin-top: 10px;
}

.strong {
    color: rgba(40, 40, 40, 0.8)
}

.bottom_indent {
    margin-bottom: 50px;
}