body {
    background-color: #ACBC8A;
    margin: 0;
    
}

@font-face {                  
font-family: 'AnalogueOS';
src: url(https://humantooth.neocities.org/fonts/AnalogueOS-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'jgs7';
src: url(https://humantooth.neocities.org/fonts/jgs7.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

.header {
    font-family: 'AnalogueOS';
    font-size: 36px;
    color: #8c4646;
}

.projects {
    font-family: 'AnalogueOS';
    font-size: 20px;
}

.bodycontainer{
height: 100vh;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-content: flex-start;
margin: 5px;

}

.top {
display: flex;
width: 100vw;
height: 140px;
padding: 20px 10px;
background-color: #bcc595;
gap: 10px;
align-items: center;
}

.bubble {
gap: 0;
display: flex;
align-items: center;
}

.speech {
    height: 110px;
    border: 4px solid #a26057;
    padding: 10px 20px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    background-color: #ddd8ab;
    width: 900px;
    padding-top: 5px;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 40px solid #a26057; 
    position: relative;
}

.triangle:after {
    content: '';
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-right: 40px solid #ddd8ab; 
    position: absolute;
    left: 6px;
    top: -24px;
}

.bottom {
display: flex;
width: 100vw;
padding: 5px; 
justify-content: center;
flex-direction: column;

gap: 10px;
flex-wrap: wrap;
align-content: center;
}

.menu {
padding: 10px;
border: 4px solid #a26057;
width: 50vw;
background-color: #ddd8ab;
}
.menu:hover, a:hover {
 background-color: #a26057;
 border-color:   #ddd8ab;
 color: #ddd8ab;
}

.ray {
width: 125px;
height: 130px;
transform: translateY(-5px);
}

a {
color:#a26057;
text-decoration: none;
}