* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
        cursor: url(img/cursor.png), progress;

        a:hover {
            cursor: url(img/cursorh.png), progress;
        }

        ::selection {
            background-color: #e8e4e3;
        }

        ::-moz-selection {
            background-color: #e8e4e3;
        }

        width: 600px;
        height: 100%;
        margin: 0px auto;
        scrollbar-color: #e2d8d5 transparent;
        background-image: url('img/bg.png');
        background-repeat: repeat;
        background-color: #f2efed;
        font-size: 15px;
        font-family: "Inconsolata", monospace;
        font-optical-sizing: auto;
        font-weight: 600;
        line-height: 1.4em; 
        letter-spacing: 0.8px;
        text-align: left;
        color: #9e8d8d;
}

    img {
        filter: drop-shadow(0.9px 0.9px #9e8d8d);
        -webkit-filter: drop-shadow(0.9px 0.9px #9e8d8d);
    }

    i {
        text-decoration: none;
        color: #C0ADA9;
        text-shadow: 0 0 2px #cec1bb;
    }

    a {  
text-decoration: underline solid #d9d2d2 2px; 
color: #C0ADA9;
text-underline-offset: 4px;
	}

	a:hover { 
color: #d9cccc;
text-shadow: 0 0 2px #e8e1e1;

	}  

    .link {  
text-decoration: none;
color: #C0ADA9;
text-shadow: 0 0 2px #cec1bb;
transition: 1s;
	}

	.link:hover { 
color: #d9cccc;
text-shadow: 0 0 2px #e8e1e1;
filter: blur(1px);
transition: 1s;
	}  

body:has(.about-layout) {
    overflow-y: auto;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #e2d5d0;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #e2d5d0;
}

@media (max-width: 768px) {
    .about-center-wrapper {
        top: 15%;
    }
    .about-content-box {
        width: 100%;
        height: 60vh;
        margin-top: 2vh;
        border: 40px solid transparent;
        border-image-source: url('img/border.png');
        border-image-slice: 20% fill;
        border-image-repeat: round;
        padding: 5%;
        padding-top: 20%;
    }
    .about-logo {
        top: 3%;
        transform: translate(-50%, -50%);
        z-index: 15;
    }
        .fence {
        margin-top: -38%;
        transform: translate(-50%, 65%) scale(0.7);
    }
}