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

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700');

:root {
    --body-font: 'Lora', serif;

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

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

        ::selection {
            text-shadow: 0 0 2px #cec1bb;
            color: #cec1bb
        }

        ::-moz-selection {
            text-shadow: 0 0 2px #cec1bb;
            color: #cec1bb
        }

        width: 100%;
        height: 100%;
        overflow: hidden;
        background-image: url('img/bg.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #f2efed;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        font-family: 'Lora', serif;
        line-height: 1.4;
        letter-spacing: 0.6px;
        text-align: justify;
        color: #9e8d8d;
    }

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

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

	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;
	}  

    .container {
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    .top-decorations {
        position: absolute;
        width: 70%;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -130%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 0;
        pointer-events: none;
    }

    .top-left,
    .top-right {
        width: 35%;
        height: auto;
        object-fit: contain;
    }

    .logo-container {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo {
        width: 80%;
        height: auto;
        object-fit: contain;
        z-index: 1;
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    .logo:hover {
        transform: scale(1.01);
    }

    .bear {
        position: absolute;
        width: 15%;
        height: auto;
        z-index: 2;
        top: 50%;
        left: 55%;
        transform: translate(-50%, -50%);
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    
    .bear:hover{
        transform: scale(1.02) translate(-50%, -55%);
    }

    .nav-links {
        position: absolute;
        width: 45%;
        top: 48%;
        left: 50%;
        transform: translate(-50%, 65%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 0;
    }

    .nav-item {
        width: 30%;
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    .nav-item img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .nav-item:hover {
        transform: scale(1.03);
    }

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

    .about-logo {
        width: 280%;
        top: 0;
        transform: translate(-50%, -50%) scale(0.6);
        z-index: 15;
    }

    
    .nav-links-about {
        position: absolute;
        width: 90%;
        margin-top: -28%;
        left: 50%;
        transform: translate(-50%, 65%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 0;
    }

    .about-center-wrapper {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10vh;
        width: 60vh;
        max-width: 80vw;
        z-index: 10;
    }

    .about-content-box {
        margin-top: 5vh;
        width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        scrollbar-color: #e2d5d0 transparent;
        border: 60px solid transparent;
        border-image-source: url('img/borders.png');
        border-image-slice: 21.5% fill;
        border-image-repeat: round;
        background-image: url('img/repeat.png');
        background-repeat: repeat;
        background-size: cover;
        background-color: #f2efed;
        background-clip: padding-box;
        padding: 10%;
        font-size: 1rem;
        font-family: 'Lora', serif;
        line-height: 1;
        letter-spacing: 0.6px;
        text-align: left;
    }

    .about-side-left {
        position: absolute;
        right: 110%;
        margin-right: 3vw;
        top: 50%;
        transform: translateY(-50%);
        width: 25%;
    }

    .about-side-right {
        position: absolute;
        left: 110%;
        margin-left: 3vw;
        top: 50%;
        transform: translateY(-50%);
        width: 25%;
    }

    .about-content-box::-webkit-scrollbar {
        width: 10px;
    }

    .about-content-box::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 10px;
    }

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

    .about-content-box::-webkit-scrollbar-thumb:hover {
        background-color: #e2d5d0;
    }

    .text-project {
            width: 80%;
    }

    @media (max-width: 768px) {

    .container.index-layout {
        top: -10vh;
    }

    .logo {
        width: 100%;
    }

    .bear {
        width: 20%;
        top: 50%;
        left: 57%;
    }

    .nav-links {
        width: 85%;
        top: 45%;
    }
    
    .top-decorations {
        width: 90%;
        top: 42%;
    }
    
        .about-side-left {
        display: none;
    }

    .about-side-right {
        display: none;
    }

    .about-logo {
        width: 180%;
        top: 0;
        transform: translate(-50%, -50%) scale(0.6);
        z-index: 15;
    }

        .about-center-wrapper {
            top: 15%;
        }

        .about-content-box {
            margin-top: 2vh;
            font-size: 13px !important;
            border: 30px solid transparent;
            border-image-source: url('img/borders.png');
            border-image-slice: 21.5% fill;
            border-image-repeat: round;
        }
        
        .text-project {
            width: 100%;
        }
    }