@import url('style-blog.css');

/* Un-press the Blog button inherited from style-blog.css */
.button-container a.Blog {
    box-shadow: 4px 4px 0px #333 !important;
    transform: none !important;
    border-top: 2px solid white !important;
    border-left: 2px solid white !important;
    border-bottom: 2px solid #555 !important;
    border-right: 2px solid #555 !important;
}

.button-container a:active, .button-container a.AboutMe{
    box-shadow: 0px 0px 0px #333;
    transform: translate(4px, 4px);

    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
}

/* About Me Main Content Overrides */
.id-card {
    background-color: #0a0a12;
    border-top: 2px solid #555;
    border-left: 2px solid #555;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    padding: 20px;
    color: #b0c4de;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.id-header {
    display: flex;
    gap: 20px;
    align-items: center;
    border-bottom: 1px dashed #555;
    padding-bottom: 20px;
}

.id-avatar {
    width: 150px;
    height: 150px;
    border: 2px outset #7dbf8a;
    background: #000;
    object-fit: cover;
    flex-shrink: 0;
}

.id-stats {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.id-stats p {
    margin: 0;
    line-height: 1.5;
}

.id-stats .label {
    color: #7dbf8a;
    font-weight: bold;
    display: inline-block;
    width: 100px;
}

.id-bio {
    background: #050508;
    border: 1px inset #555;
    padding: 15px;
    line-height: 1.6;
}

.id-bio h3 {
    margin-top: 0;
    color: #d4a6b2;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}

/* Sidebar Overrides for About Me */
.status-widget {
    background: #000;
    border: 1px inset #555;
    padding: 10px;
    margin-top: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-img {
    width: 50px;
    height: 50px;
    border: 1px solid #555;
}

/* 3D Lighthouse Animation Overrides */
.id-avatar.lighthouse-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #050508;
    perspective: 500px;
}

.lighthouse-core {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 15px #7dbf8a, 0 0 30px #7dbf8a;
}

.lighthouse-beam {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(125, 191, 138, 0) 0%, rgba(125, 191, 138, 0) 60%, rgba(125, 191, 138, 0.2) 90%, rgba(125, 191, 138, 0.8) 100%);
    z-index: 2;
    animation: spin-beam 3s linear infinite;
    border: 1px solid rgba(125, 191, 138, 0.3);
}

@keyframes spin-beam {
    0% { transform: rotateX(70deg) rotateY(-10deg) rotateZ(0deg); }
    100% { transform: rotateX(70deg) rotateY(-10deg) rotateZ(360deg); }
}