/* 
   COLOR PALETTE:
    - Dark Green: #072720
    - Light Green: #458F6A
    - Deep Purple: #160A2C
    - Midnight Blue: #294fb8
    - Soft Pink: #bd19aa
    - Bright Yellow: #D3EF51
    - Transparent Creamy Yellow: e1cc7fcb
*/

/* GLOBAL 
------------------------------------------------ */

html {
    box-sizing: border-box;

}
*, *:before, *:after {
    box-sizing: inherit;

}
html, body {
    height: 100%;
    text-overflow: ellipsis;
    overscroll-behavior: contain;
}
body {
    background-image: url(/images/background_3_1600.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #160A2C;
    margin: 0px 0px 0px 0px;
}
.stage img {
    max-width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
}
section {
    padding: 10px;
    margin: 0 auto;
}
header { /* Theater Banner */
    width: fit-content;
    display: block;
    margin: 0 auto;
    position: center;
    padding-bottom: 3%;
}
h1 {
    font-family: "major mono display", serif;
    font-size: 3em;
    margin: 0;
}
h2 {
    font-family: "mynerve", cursive;
    font-size: 2em;
    color: #bd19aa;
}
h3 { 
    font-family: "major mono display", serif;
    font-size: 1.8rem;
}
h4 {
    font-family: "major mono display", serif;
    font-size: 0.8rem;
}
li {
    font-family: "mynerve", cursive;
    font-size: 1.5em;
    
    margin: 10px 0;
}
p {
    font-family: "syne mono", monospace; 
    font-size: 1.5em;
    color: #072720;
    padding-left: 10%;
    padding-right: 10%;
}
strong {
    color: #bd19aa;
    font-size: 1.7rem;
}

.main-content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}
div {
    padding: 10px;
    border-radius: 10px;
    box-shadow: rgba(3, 192, 255, 0.35) 2px 2px 7px;

}
hr { 
    border-color: #bd19aa;
    border-style: dotted;
    border-width: 10px;
}

/* Navigation and links
-------------------------------------------------*/


.navigation {
    background-image: url(/images/nav-banner-green.png);
    background-repeat: no-repeat;
    grid-column: 1 / 2;
    grid-row: 1;
    transform: rotate(1deg) translateX(1%) translateY(-3%);
}
.navigation ul {
    list-style-type: none;
    padding-top: 30%;
    padding-left: 20%;

}
.navigation:hover {
    transform: rotate(-1.2deg) translateX(5%) translateY(3%) scale(1.2);
    transition: transform 0.3s ease;
}
.navigation a {
    color: #D3EF51;
    text-decoration: none;
}
.navigation a:hover {
    color: #294fb8;
    text-decoration: none;
    cursor: pointer; 
}
.navigation a:visited {
    color: #bd19aa;
    cursor: pointer; 
}
.sidebar {
    grid-column: 6 / 7;
    grid-row: 1;
    margin-top: 0;
    margin-right: 0;
    transform: translateY(30%);
}


/* STAGE
-----------------------------------------------*/
.stage {
    grid-column: 2 / 6;
    grid-row: 1;
    background-color: none;
    border-style: ridge;
    border-color: #072720;
    border-radius: 10px;
    padding-bottom: 50px;
    height: 80vh;
    overflow: scroll;
    scroll-behavior: contain;
}

.stage div {
    background-color: #e1cc7fcb;
    box-shadow: #294fb8 2px 3px 1px 1px;
    margin: 10px;
    padding-bottom: 50px;
    border-radius: 10px;
}
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.stage ul {
    list-style-type: none;
    font-family: "syne mono",'Courier New', Courier, monospace; 
    font-size: 1.2em;
    color: #072720;
    line-height: 1.6;
}


/* FOOTER
-------*/
footer {
    padding: 10px;
    width: 1fr;
    margin: 0;
    padding: 10px 10px;
    background-color: #E3A6A1;
    box-shadow: #294fb8 1px 1px 5px 1px;
    align-content: center;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


.socials {
    padding: 10px;
    /* width: 100vw; */
    width: 1fr;
    margin: 0;
    padding: 10px 10px;
    background-color: #E3A6A1;
    box-shadow: #294fb8 1px 1px 5px 1px;
    align-content: center;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.socials li {
    list-style-type: none;
    display: inline-block;
}
.socials img {
    width: 30px;
}


/* SUNA 
-------------------------------------------------*/

/* RESUME 
-------------------------------------------------*/
.resume {
    grid-column: 2 / 6;
    grid-row: 1;
    background-color: none;
    border-style: ridge;
    border-color: #072720;
    height: 80vh;
    overflow: scroll;
}
.resume div {
    background-color: #e1cc7fcb;
    box-shadow: #294fb8 2px 3px 1px 1px;
    margin: 10px;
    border-radius: 3px;
}
.resume ul {
    font-family: "syne mono", 'Courier New', Courier, monospace; 
    font-size: 1.7rem;
    color: #072720;
    padding-left: 20%;
    padding-right: 20%;
}
.resume li {
    list-style-type: none;
    font-family: "syne mono", 'Courier New', Courier, monospace; 
    font-size: 1.5rem;
    color: #072720;
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #458F6A;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    margin: 20px;
    box-shadow: 0 4px #2E6B4A;
}
.download-link {
    position: fixed;
    bottom: 20px;
    left: 20px;
}

/* Comments UI */
.comments-section {
    grid-column: 2 / 6;
    background-color: #e1cc7fcb;
    margin: 10px;
    padding: 10px 20px;
    border-radius: 8px;
}
.comments-section form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.comments-section input[type="text"],
.comments-section textarea {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #072720;
    font-family: "syne mono", monospace;
    font-size: 1rem;
}
.comment-card {
    background: rgba(255, 255, 255, 0.54);
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    box-shadow: rgba(3, 192, 255, 0.15) 1px 1px 4px;
}
.comment-meta {
    font-size: 0.9rem;
    color: #294fb8;
    margin-bottom: 6px;
}
.comment-body {
    font-family: "syne mono", monospace;
    color: #072720;
}




/* Media Queries
-------------------------------------------------*/