/* styles.css */
body {
    background-color: white;
    margin: 0;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 16px;
}

header {
    background-color: #1c0f4f;
    padding: 3vw;
    text-align: center;
    position: relative;
}

h1 {
    color: white;
    font-size: 2.2vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

h2 {
    text-align: left;
    color: black;
    font-size: 2vw;
    margin-left: 2vw;
}

h3 {
    text-align: left;
    color: black;
    font-size: 1.7vw;
    margin-left: 2vw;
    font-weight: bold;
}

p {
    text-align: center;
    color: black;
    font-size: 1.2vw;
    margin-left: 1vw;
    margin-right: 1vw;
}

.text-box {
    margin-left: 2vw;
    margin-right: 2vw;
    margin-bottom: 1vw;
}

p2 {
    text-align: left;
    color: black;
    font-size: 1.2vw;
    margin-top: 0vw;
}

nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2.5vw;
    margin-top: 0;
}

nav a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 1.4vw;
    display: inline-block;
    margin-left: 1.5vw;
}

img[src="bigmirror.png"] {
    width: 4vw;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 1vw;
    left: 1vw;
}

img {
    display: block;
    margin: auto;
    margin-bottom: 1vw;
}

img[src="ritual.png"] {
    width: 35%;
    display: block;
    margin: auto;
}

img[src="surgeon.png"] {
    width: 25%;
    display: block;
    margin: auto;
    margin-bottom: 1vw;
}

img[src="medicman.png"] {
    width: 35%;
    display: block;
    margin: auto;
    margin-bottom: 1vw;
}

@media screen and (max-width: 1080px) {
    h1 {
        font-size: 5vw; /* Adjusted font size for smaller screens */
        left: 27%;
    }
    img[src="bigmirror.png"] {
        width: 5.5vw;
        max-width: 100%;
        height: auto;
        position: absolute;
        top: 1vw;
        left: 1vw;
    }
    header {
        padding: 4vw;
    }
    nav {
        top: 50%;
    }
    nav a {
        font-size: 2.9vw; /* Adjusted font size for smaller screens */
        margin-left: 2vw; /* Increased margin for better spacing */
    }
    p { 
        font-size: 3vw;
    }
    p2 {
        font-size: 3vw;
    }
    h2 {
        font-size: 3.5vw;
    }
    h3 {
        font-size: 3.2vw;
    }
    img {
        max-width: 100%;
    }
    img[src="surgeon.png"] {
        width: 45%;
    }
}

@media screen and (max-width: 720px) {
    h1 {
        font-size: 6vw; /* Adjusted font size for smaller screens */
        left: 34%;
    }
    img[src="bigmirror.png"] {
        width: 9vw;
        max-width: 100%;
        height: auto;
        position: absolute;
        top: 2vw;
        left: 1vw;
    }
    header {
        padding: 6.5vw;
    }
    nav {
        top: 50%;
    }
    nav a {
        font-size: 2.9vw; /* Adjusted font size for smaller screens */
        margin-left: 0.5vw; /* Increased margin for better spacing */
    }
    p { 
        font-size: 5vw;
    }
    p2 {
        font-size: 5vw;
    }
    h2 {
        font-size: 5.5vw;
    }
    h3 {
        font-size: 5.3vw;
    }
    img {
        max-width: 100%;
        width: 40%;
    }
    img[src="surgeon.png"] {
        width: 45%;
    }
}