/* Font Definitions */

@font-face {
    font-family: "Jersey 10";
    src: url("../assets/fonts/Jersey10-Regular.ttf");
}

@font-face {
    font-family: "Vinivicious";
    src: url("../assets/fonts/vinivicious.ttf");
}

/* Background animation */
.scroll_diag{
    background-color:#03090e;
    animation: diag 180s linear infinite;
    background-image: url("../assets/images/background-alt.png");
    display: block;
    background-attachment: fixed;
}

@keyframes diag {
    0% {
        background-position-x: 0;
        background-position-y: 0;
    }
    100% {
        background-position-x: 100%;
        background-position-y: 100%;
    }
}

/* Viewport Scaling */

body{
    margin:0;
    
}
.body-container{
    
}

#main-header{
    padding-top:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    margin-bottom:1em;
}

.container_box{
    /*border-left: 2px solid #a4e9d7;
    border-top: 2px solid #a4e9d7;
    box-shadow: 4px 4px #233045;
    background-color: #458593;*/
    color: white;
    padding: 20px;
    width: fit-content;
    height:130px;
    margin: 5em auto auto 0;
    position: relative;
}

#name {
    max-width: 588px;
    width:50vw;
    height: auto;
}

.project-flex{
    position: relative;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    column-gap: 4rem;
}

.project-box{
    width:16rem;
    height: fit-content;
    font-family: 'Vinivicious', system-ui;
    text-align: center;
    background-image: url('../assets/images/theme/border2.png');
    background-size: 100% 100%;
    padding:2.5rem 2rem 1.5rem 2rem;
}

.project-img{
    width: 100%;
    height: auto;
    border-radius:2px;
}

.project-box ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.6rem;
    row-gap:0.2rem;
    list-style: none;
    padding-left: 0;
    font-size: 0.95rem;
    color: #4070a7;
}

.project-box li{
    background-color: #00101E;
    border-radius: 3px;
    padding:0 6px 0 6px;
}

.project-box a{
    text-decoration: none;
}

.project-box p{
    font-size: 1.21rem;
    color:white;
    margin-top:1rem;
    margin-bottom:1rem;
}

img{
    image-rendering: pixelated;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.text_container{
    color: #aaddff;
    width: fit-content;
    height: fit-content;
    position: relative;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
}
.text_container p{
    position: absolute;
    left: 10%;
    right: 10%;
    top: 20%;
    text-align: center;
    font-size: clamp(0.72rem, calc(0.6rem + 0.5vw), 1.15rem);
    margin: auto;
    font-family: 'Jost', system-ui;
}
#text_background{
    max-width: 520px;
    width: clamp(20rem, calc(0.5rem + 40vw), 35rem);
    height: auto;
}

.text-link{
    color: #ffee00;
}

/* --------- Project Pages --------- */
#header-links{
    display:flex;
}

.header-button{
    display:grid;
    position: relative;
    color: #4070a7;
}

.header-button:hover{
    color: #a4e9d7;
}

.header-button p{
    font-family: 'Vinivicious', system-ui;
    text-align: center;
    position: absolute;
    inset: 0;
    place-self: center;
    margin: 0;
    text-decoration: none;
    
    pointer-events: none;
}

.border-wrapper{
    image-rendering: pixelated;
    border-width:96px;
    border-style: solid;
    border-image: url("../assets/images/theme/border3.png");
    border-image-slice:32;
    border-image-repeat:round;
    margin-left: auto;
    margin-right: auto;
    max-width: 70rem;
    width: fit-content;
    filter:drop-shadow(0 0 16px rgba(0,0,0,0.5));
}
.project_body{
    background-image: url('../assets/images/theme/box-fill.png');
    background-size: 186px;
}

.gallery{
    margin-top:3em;
    margin-bottom:2em;
    text-align: center;
}

.gallery img{
    image-rendering: auto;
    margin-left:1em;
    margin-right:1em;
    box-shadow: 1px 1px 8px #080808;
}

.gallery a:nth-child(2n+1) img{
    rotate:2deg;
}

.gallery a:nth-child(2n) img{
    rotate:-2deg;
}

/*--- Lightboxes --- */
a {
    outline: none;
}

.lightbox{
    display: block;
    visibility: hidden;
    
    position:fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top:0;
    left:0;
    background: rgba(0, 0, 0, 0.8);
}

.lightbox-image{
    /** Pad the lightbox image */
    max-width: 90%;
    max-height: 80%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.lightbox:target {
    /** Remove default browser outline */
    outline: none;

    visibility: visible;
}

.video_and_desc{
    margin-top: 3em;
}
.video_and_desc .video{
    display: inline-block;
    margin-top: 3em;
    margin-right:1em;
}

.text_box{
    display: inline-block;
    position: relative;
    color: #aaddff;
    font-size: 1.1rem;
    font-family: 'Jost', system-ui;
    max-width: 22.5rem;
    padding: 2rem 5rem 1rem 6rem;
    background-image: url("../assets/images/paragraph_background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.text_box br{
    display: block;
    margin: 10px 0;
}

.video_and_desc .text_box{
    margin-top: 0;
    vertical-align: top;
}

.text_box p{
    text-align: left;
}

.project_logo{
    padding: 10px;
    width:fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.project_logo img{
    image-rendering: auto;
    margin-left: auto;
    margin-right: auto;
}
.project_logo > h1{
    display:inline-block;
    color: #aaddff;
    font-family: 'Vinivicious', system-ui;
    font-size:3rem;
    text-shadow: #00050F 4px 4px;
    vertical-align: center;
}

.overview_text{
    color: #aaddff;
    font-family: 'Vinivicious', system-ui;
    /*text-shadow: darkslateblue 2px 2px;*/
    display: inline-block;
    vertical-align: center;
    margin-left: 2em;
}

.overview_text h3{
    color: #4070a7;
}

/*--- Blog Pages ----*/

.blog-post-list{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    max-width:800px
}

.blog-post{
    display:block;
    position:relative;
    
    image-rendering: pixelated;
    box-sizing:border-box;
    border-width:24px;
    border-style: solid;
    border-image: url("../assets/images/theme/border3.png");
    border-image-slice:32;
    border-image-repeat:round;
    margin-top:3em;
    width: 100%;
    filter:drop-shadow(0 0 16px rgba(0,0,0,0.5));

    font-family: 'Vinivicious', system-ui;
    color: #aaddff;
    text-decoration:none;
}

.horizontal-box{
    width:100%;
    max-width:100%;
    display:flex;
}

.blog-post > .horizontal-box{
    background-image: url('../assets/images/theme/box-fill.png');
    background-size: 186px;
}

.blog-post-info{
    flex-grow:1;
}

.blog-post-info h3{
    color: #4070a7;
}

.blog-post img{
    width: 8rem;
    height: 8rem;
    vertical-align:center;
}

.blog-body{
    
    background-image: url('../assets/images/theme/box-fill.png');
    background-size: 186px;
    display:inline-block;
    width:100%;
    max-width:1000px;
    color: #aaddff;
    font-family: 'Jost', system-ui;
}

.blog-body h1{
    font-family: 'Vinivicious', system-ui;
    margin-bottom:3rem;
}

.blog-body h2{
    font-family: 'Vinivicious', system-ui;
}

.blog-body br{
    display: block;
    margin: 10px 0;
}

.blog-body img{
    max-width:100%;
    height:auto;
    image-rendering: auto;
}

.blog-body ol ol{
    list-style-type:lower-alpha;
}
.blog-body ol{
    line-height:1.6rem;
}
section > ol{
    padding-left:40px;
}
.blog-body ol br{
    display: block;
    margin: 5px 0;
}

.blog-body section{
    padding:0 40px 1.5rem 40px;
    border-bottom: 1px solid #4070a7;
    margin-bottom:3rem;
}

.image-gallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    gap:24px;
}

.image-gallery img{
    max-width:100%;
    height:19rem;
    width:auto;
}

summary{
    font-family: 'Vinivicious', system-ui;
    color:#4070a7;
    font-size: 1.4rem;
    
}
details[open]::details-content{
    margin-top:24px;
    margin-bottom:24px;
    padding-left:24px;
}