/*the main stuff */
/*targets all of 'em */
/*letter spacing: letter-spacing: 2px, etc.*/

        /* ========================================== */
            /* INDEX HTML - FIXED FOR BIG SCREENS       */
        /* ========================================== */
* {
    font-family: "Lucida Console";
}

body {
    background-image: url("https://codehs.com/uploads/8d6f5c1b54cf2732edaca01587598f21");
}

h1 {
    font-style: italic;
    font-size: 25px;
    text-align: center;
}

p {
    font-size: 15px;
    font-family: Monospace;
}

h3:hover {
    font-size: 25px;
    color: lime;
    background-color: navy;
}

h4:hover {
    color: #fffd01;
    background-color: hotpink;
    font-size: 20px;
}

/* + more */
.highlight-hover {
    background-color: transparent;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.highlight-hover:hover {
    background-color: #ffff00; 
}

span {
    font-style: italic;
    color: hotpink;
}

.uhhhhh{
    background-color: brown;
    border-radius: 2px 4px;
    text-align: center;
}

a:hover {
    background-color: green;
    color: red;
    font-size: 25px;
}

/* --- LEFT SIDE: YOUR OVERLAPPING WINDOW STACK --- */

/* "Basically..." (Top Window) */
#mydiv {
    position: absolute;
    top: 350px;
    left: 4%;            /* Anchored to the left quadrant */
    width: 480px;        /* Fixed size so it looks small on big screens */
    z-index: 10;        /* Sits cleanly on top */
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    text-align: center;
    box-shadow: 6px 12px black;
}

#mydiv:hover {
    border: 12px solid lime;
    color: red;
}

/* "Did I also mention..." (Bottom Window) */
#mydiv2 {
    position: absolute;
    top: 380px;          /* Offset slightly lower than #mydiv */
    left: 6%;            /* Offset slightly right for the stacked pill effect */
    width: 480px;       
    z-index: 5;          /* Hidden behind #mydiv until hovered */
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    text-align: center;
    box-shadow: 6px 12px black;
    transition: transform 0.2s ease, z-index 0.2s ease; 
}

/* The Flip-Forward Effect */
#mydiv2:hover {
    z-index: 15;                 /* Jumps ahead of #mydiv when hovered */
    transform: translate(15px, 15px); /* Glides out diagonally so it can be read */
    border: 12px solid lime;
    color: red;
}

/* --- RIGHT SIDE: THE SPACEHEY STYLE COMMENT SECTION --- */

#commentBox {
    position: absolute;
    top: 350px;          /* Perfectly level with the top left window */
    right: 5%;           /* Anchored to the right side of the screen */
    width: 420px;        /* Wide enough to keep text input fields organized */
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    box-shadow: 6px 12px black;
    z-index: 8;
}

#mydivheader, .comment-header {
    padding: 10px;
    font-weight: bold;
    background-color: #2196F3;
    color: #fff;
    text-align: center;
}

.comment-header {
    background-color: #ff69b4; /* SpaceHey style hot pink heading */
}

/* Input boxes layout */
.comment-form {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-input-name, .comment-input-text {
    width: 100%;
    font-family: Monospace;
    padding: 8px;
    border: 1px solid #d3d3d3;
    box-sizing: border-box; /* Keeps styling from breaking box limits */
}

.comment-input-text {
    height: 70px;
    resize: none;
}

.comment-submit {
    background-color: #2196F3;
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-family: "Lucida Console";
    font-weight: bold;
}

.comment-submit:hover {
    background-color: lime;
    color: black;
}

/* Comments Feed */
.comments-display {
    padding: 0 15px 15px 15px;
    max-height: 200px;
    overflow-y: auto;
}

.single-comment {
    border-bottom: 1px dashed black;
    padding: 8px 0;
}

.commenter-name {
    color: navy;
    font-weight: bold;
    font-size: 14px;
}

.commenter-text {
    font-size: 13px !important;
    margin: 4px 0 0 0;
}

footer {
    position: absolute;
    top: 900px;          /* Moves your footer down so it stops tangling with the boxes */
    width: 100%;
    text-align: center;
}


/*info.html~*/

#cool{
    background-image: url("https://codehs.com/uploads/eee4d41e469bc501ced125a0398acd56");
}

#introOverlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    /* Changed from 0.2s to 0.5s so it vanishes a bit slower and looks funner */
    transition: opacity 0.5s ease, visibility 0.2s ease; 
}

/* Style for the pop-up image itself */
.intro-img{
    max-width: 80%;
    height: auto;
    animation: popIn 0.4s ease-out; /* Makes the image "pop" slightly when it loads */
}

/* Optional: Subtle pop animation */
@keyframes popIn{
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* This class will be added by JavaScript to make it fade out */
#introOverlay.fade-away{
    opacity: 0;
    visibility: hidden;
}

.first{
    letter-spacing: 6.4px;
    justify-content: center;
    background-color: yellow;
    border-radius: 50px;
    padding: 30px;
    max-width: 999.5px;
}

.first:hover{
    background-color: black;
    max-width: 10006px;
}

div{
    
}

.f{
    background-color: hotpink;
}

.s{
    background-color: white;
}

.t{
    background-color: lightblue;
}

#pomni:hover{
    letter-spacing: -19.8px;
    font-family: "Lucida Console", "Courier New", monospace;
    background-color: skyblue;
    color: #880808;
    font-size: 54px;
}

/* Note the capital 'H' and single colon ':active' */
.Hovered:active{
    content: url("https://codehs.com/uploads/30ed8a2e7f4ec607d770797a669ef6b8");
}

.cutesy{
    display: inline-block;
    font-family: 'Arial Black', sans-serif;
    font-size: 2.5rem;
    color: #CFFFC4;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cutesy:hover{
  /* Scales wide, then tall to mimic a liquid bounce */
  transform: scale(1.2, 0.7);
}

.kinger{
    
}

/* other-things.html */
.special-bod{
    background-image: url("https://codehs.com/uploads/5c0b902bee87b3c9e5dca0748fc98d94");
}

.second{
    background-color: #F5FCBB;
    border-radius: 44px;
}

.second:hover{
    font-size: 17.4px;
    letter-spacing: 12.5px;
    background-color: #BBD2FC;
    color: lime;
}

.new{
    font-size: 20px;
}

.new:hover{
    font-size: 30.2px;
}

.hehe{
    height: 150px;
    width: 250px;
    border-radius: 12px 14px;
    border: white;
}


/* .eye{
    position: left;
    width:;
    height:;
} */

/* for not found page: */
.not-found{
background-image: url(https://codehs.com/uploads/24e73a64f0cf85014e2f68a5eedab2fe);
}