body {
    font-family: "MS PGothic", sans-serif;
    background: url("/src/assets/art/forest.JPG");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.container {
    width: 1024px;
    max-width: 1024px;
    margin: 20px auto;
    border: 9px double rgb(121, 122, 70);
    background: rgb(213, 220, 208);
    background-size: 12%;
    position: relative;
    box-shadow: 5px 7px 16px 3px rgb(121, 122, 70);
    -webkit-box-shadow: 5px 7px 16px 3px rgb(121, 122, 70);
    -moz-box-shadow: 5px 7px 16px 3px rgb(121, 122, 70);
}

.banner {
    background: url("/src/assets/art/road.jpeg") center center;
    height: 233px;
    background-size: cover;
    background-repeat: no-repeat;
    position: bottom;
}

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    z-index: -1;
}

.content {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.main-content {
    width: 100%;
    height: 700px;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 2% 4%;
    border: 3px inset rgb(121, 122, 70);
    background-color: rgb(255, 255, 242);
    box-shadow: 2px 1px 45px -12px rgb(173, 173, 146) inset;
    -webkit-box-shadow: 2px 1px 45px -12px rgb(173, 173, 146) inset;
    -moz-box-shadow: 2px 1px 45px -12px rgb(173, 173, 146) inset;
}
      
.main-content p {
    font-size: 1.em;
    color: rgb(98, 97, 97);
    line-height: 1.2em;
}
 
.main-content > img {
    width: 450px;
    display: block;
    margin: 1.5em auto;   
}

.in-line {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}
.in-line img {
    width: 200px;
}
#cd-case {
    width: 600px;
}
      
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(192, 192, 192);
    border-radius: 3px;
}

.footer {
    background-color:rgb(155, 177, 139);
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    color: rgb(121, 122, 70);
}

#back {
    padding: 10px;
}

#back-button:hover {
    color: rgb(213, 220, 208);
}

#back-button {
    color: rgb(121, 122, 70);
}

#split img {
    flex: 1 1 200px;
    max-width: 30%;
    display: block;
    height: auto;
    object-fit: contain;
}

#split {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#split img:nth-last-child(-n + 2) {
    flex: 0 1 calc(40% - 5px);
    max-width: calc(40% - 5px);
}

#graphics, #ces {
    height: 550px;
}

#ces {
    width: 40%;
}
#projects {
    text-align: center;
}