/* START - General styles for the top banner */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #fffcd8;
}
.Top-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    background-color: rgba(123, 194, 249, 0.6) ;
    border-radius: 2rem;
    border-top:1px solid black;
    border-right:1px solid black;
    border-left:1px solid black;
    border-bottom: 5px solid rgba(255, 0, 0, 0.2);
    transition: border-bottom 0.1s ease;
}

.Top-banner:hover {
    border-bottom: 0px solid rgba(255, 0, 0, 0.1);
}

.logo img{
    width: 12vw;
    height: auto;
    border-radius: 2rem;
    border-bottom: 5px solid rgba(255, 0, 0, 0.2);
    transition: border-top 0.2s ease, border-bottom 0.1s ease, transform 0.1s ease;
}

.logo img:hover {
    transform: scale(1.05);
    border-bottom: 0px solid rgba(255, 0, 0, 0.1);
    border-right: 1px solid rgba(255, 0, 0, 0.1);
    border-left: 1px solid rgba(255, 0, 0, 0.1);
    border-top: 5px solid rgba(255, 0, 0, 0.1);
}


.site-name {
    padding: 0rem 0rem;
    flex:1;
    text-align: center;
    font: 2rem "Courier New", "serif";
    transition: font;
}

.site-name h1 {
    display: inline-block;           /* Ensures only the text is affected */
    overflow: hidden;
    white-space: nowrap;
    font-size: 4vw;
    border-right: 2px solid black;   /* optional blinking cursor */
    width: 0ch;                      /* Start width */
    animation-delay: 1s;
    animation: game 2s steps(25) forwards, blink 0.2s step-start 10 , hide-cursor 0s 2.5s forwards  ;
}


@keyframes game {
    from { width: 0ch; }
    to { width: 13ch;
     }  /* Number of characters in your string */
}

@keyframes blink {
    0%, 100% { border-color: rgb(255, 5, 5); }
    50% { border-color: black; }
}

/* Hides fake cursor after 3s */
@keyframes hide-cursor {
    to { border-right: none; }
  }
  

.nav-links a {
    margin-left: 0.8rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 1.2rem;
    background-color: rgba(254, 209, 158, 0.5);
    padding: 2rem 0.1rem 2rem 0.1rem;
    display: inline-block;
    border-radius: 1rem;
    border-bottom: 2px solid black;
    text-decoration: none;
    color: #68aeff;
    font-weight: bolder;
    text-shadow:
    -1px -1px 0 rgba(0, 0, 0,0.6),
     1px -1px 0 rgba(0, 0, 0,0.6),
    -1px  1px 0 rgba(0, 0, 0,0.6),
     1px  1px 0 rgba(0, 0, 0,0.6);
    font-size: clamp(1rem, 2vw, 1.5rem);
    transition: background-color 0.3s ease, border-bottom 0.3s ease, padding-top 0.2s ease, border-top 0.2s ease;
}
.nav-links a:hover {
    color: #007BFF;
    background: linear-gradient(to bottom, rgba(254, 205, 140, 0.5), rgba(254, 209, 158, 0.5));
    padding-top: 1rem;
    border-top: 4px solid rgba(255, 255, 255, 0.8);
    border-bottom: 0px solid rgba(255, 0, 0, 0.1);
}

/* Responsive layout - when the screen is less than 800px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .Top-banner {
        flex-direction: column;
        align-items: center;
    }
    .nav-links a {
        flex-direction: row;
        justify-content: center;
    }

    .site-name h1 {
        font-size: 5vw;
        width: 100%;
        text-align: center;
    }

  }
/* END - General styles for the top banner */
/* START - Styles for the Row (Body Content) */
.row {
    padding-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

/* Clear floats after the columns */
.row::after {
    content: "";
    display: table;
    clear: both;
}

.left-column {
    width: 75%;
    padding-right: 20px;
}

.right-column {
    position:sticky;
    top: 50px;
    width: 25%;
    background-color: rgb(237, 22, 22, 0.1);
    border-radius: 0.5rem;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    padding: 20px;
}

.right-column .card {
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
}

.card {
    background-color: white;
    padding: 20px;
    margin-top: 0;
}

/* + = Between Cards */
.card + .card {
    margin-top: 20px;
}

#Left-column-card {
    border-radius: 2rem;
}

.card-img {
    background-color: rgb(0, 0, 0, 0.2);
    height: 200px;
    width: 100%;
    padding: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .row {
        flex-direction: column;
    }
    .left-column, .right-column {
        width: 100%;
        padding: 0;
    }
    .right-column {
        position: static;
        top: auto;
    }
}
/* END - Styles for the Row (Body Content) */

/* START - Styles for the <hr> (line) between footer and body */
hr {
    height: 10px
}
/* END - Styles for the <hr> (line) between footer and body */

/* START - Styles for the footer */