/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    background-color: #0a0a14;
    color: #ffffff;
    font-family: 'Mulish', sans-serif;
    margin: 0;
    padding: 20px;
}
b, strong {
    font-weight: 700;
}

a {
    color: #8a8aff;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #ff8ac0;
}
h3 {
    color: #ff8ac0;  /*Same pink as hover*/
    font-weight: 400;
    letter-spacing: 0.5px;
    font-style: italic;
    margin-bottom: 20px;
}
.index-container {
    max-width: 860px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
}
.index-container h1 {
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
}
.index-container p {
    font-size: 1.1em;
    line-height: 1.6;
    margin: 15px 0;
    color: #cccccc;
}

.index-container a {
    line-height: 2;
}
.profile-container {
    display: flex;
    max-width: 860px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
}

.profile-image {
    width: 450px;
    min-width: 450px;
    padding: 15px;
    position: relative;
    display: flex;
    align-items: center;
}

.profile-image img {
    width: 100%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}
.profile-image::after {
    content: '';
    position: absolute;
    top: 25px;
    left: 25px;
    right: 25px;
    bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 2;
}

.profile-info {
    padding: 20px;
    flex: 1;
}

.profile-info h1 {
    color: #ffffff;
    font-size: 2em;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.profile-info p {
    font-size: 1.1em;
    line-height: 1.6;
    margin: 10px 0;
    color: #cccccc;
}

/*Profile Media Queries*/
@media screen and (max-width: 768px) {
    .profile-container {
        flex-direction: column;
        align-items: center;
    }

    .profile-image {
        width: 100%;
        min-width: unset;
        max-width: 450px;
        padding: 10px;
    }

    .profile-info {
        width: 100%;
        padding: 15px;
        text-align: center;
    }

    .profile-image::after {
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
    }
}

@media screen and (max-width: 480px) {
    .profile-image {
        max-width: 100%;
        padding: 5px;
    }

    .profile-info h1 {
        font-size: 1.5em;
    }

    .profile-info p {
        font-size: 1em;
    }
}

/*Gallery Styles*/
.gallery {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    margin: 20px auto;
    max-width: 850px;
    text-align: center;
}

.gallery p {
    max-width: 700px;
    margin: 20px auto;
    font-size: 18px;
    text-align: justify;
}
.gallery img {
    width: 800px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

.gallery .bordered-image {
    position: relative;
    border: 15px solid rgba(231, 234, 231);
    border-radius: 0px;
    display: block;
    margin: 10px auto;
}
.gallery .image-small {
    width: 550px !important;
    max-width: calc(100% - 20px);
    height: auto;
    display: block;
    margin: 20px auto;
}
.gallery h2 {
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0.5px;
}
.gallery h3 {
    color: #ff8ac0;
    max-width: 700px;
    margin: 20px auto;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-style: italic;
    text-align: center;
}
/*Footer*/
.footer {
    max-width: 860px;
    margin: 20px auto;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    color: #666;
    font-size: 0.9em;
    text-align: right;
}

/*Gallery Text Media Queries*/
@media screen and (max-width: 768px) {
    .gallery p {
        font-size: 15px;
        padding: 0 20px;
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .gallery p {
        font-size: 14px;
        line-height: 1.6;
        padding: 0 15px;
    }
}

.limited-text {
    max-width: 700px;
    margin: 20px auto;
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .limited-text {
        font-size: 15px;
        padding: 0 20px;
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .limited-text {
        font-size: 14px;
        line-height: 1.6;
        padding: 0 15px;
    }
}
@media screen and (max-width: 480px) {
    .gallery .image-small {
        max-width: calc(100% - 10px);
    }

    .gallery .bordered-image {
        border-width: 7px;
        margin: 10px auto;
    }
}
.spoiler-image {
    filter: blur(25px);
    transition: filter 0.3s ease;
    cursor: pointer;
}

.spoiler-image.revealed {
    filter: blur(0);
}