/*
Theme Name: OrangeIsBorange 2026
Author: Shen Lu
Description: A classic WP theme for OrangeIsBorange.
Version: 1.0
License: MIT License
Tags: custom, classic
Text Domain: borange-2026
*/

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    margin: 0px;
}

#main-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    width: 100%;
    aspect-ratio: 4.2;
}

#banner-image-bg {
    position: absolute;
    width: 100%;
    z-index: -3;
}

#banner-image-overlay {
    position: absolute;
    width: 100%;
    z-index: -2;
}

#banner-decoration-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#banner-image-far-left {
    position: absolute;
    bottom: -20%;
    width: 12.5%;
    z-index: -1;
    left: 3.5%;
}

#banner-image-left {
    position: absolute;
    bottom: -5%;
    width: 18%;
    left: 12%;
    z-index: -2;
}

#banner-image-right {
    position: absolute;
    bottom: -5%;
    width: 12.5%;
    z-index: -2;
    right: 12%;
}

#banner-image-far-right {
    position: absolute;
    bottom: -20%;
    width: 12.5%;
    z-index: -1;
    right: 4%;
}

#banner-border-icons-container {
    position: absolute;
    bottom: -50px;
    height: 140px;
    width: 100%;
    z-index: 1;
    overflow-x: hidden;
}

.banner-border-icon-images {
    width: 48px;
    height: 48px;
    position: absolute;
}

#header-header-container {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}

#header-header-socials-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#header-header-socials-container a {
    position: relative;
}

.social-button-icon {
    width: 64px;
    height: 64px;
}

.social-button-dark-overlay {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background-color: #0008;
    transition: background-color 0.3s ease;
    pointer-events: none;
}

#header-header-socials-container a:hover .social-button-dark-overlay {
    background-color: #0000;
}

#contact-me-image {
    cursor: pointer;
}

#header-content-outer-container {
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 9vh;
}

#header-content-inner-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
}

#main-container {
    background: url('assets/oib-background-tile.png');
    min-height: 1000px;
    position: relative;
}

#banner-bottom-cloud-mask-overlay {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: url('assets/oib-background-tile.png');
    mask-image: url('assets/banner/cloud-layer-mask.png');
    mask-size: 100%;
    mask-repeat: no-repeat;
    height: 80px;
}

#banner-bottom-cloud-stroke {
    object-fit: contain;
    width: 100%;
}

#main-content-container {
    background: #dedede;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    border-radius: 20px;
    min-height: 1000px;
    padding: 20px;
    opacity: 0;
}

#main-visible-content-container {
    background: #dedede;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    border-radius: 20px;
    min-height: 1000px;
    padding: 20px;
    position: absolute;
    top: -9vh;
    z-index: 2;
}

#header-content-left-nav, #header-content-middle-left-nav, #header-content-middle-right-nav, #header-content-right-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 20px;
    gap: 10px;
}

#banner-logo {
    margin-left: -80px;
    margin-right: -80px;
}

#header-centerpiece {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.header-nav-image {
    width: 130px;
    aspect-ratio: 299 / 125;
    object-fit: contain;
    position: absolute;
}

.central-nav-image {
    width: 350px;
    aspect-ratio: 2362 / 539;
    object-fit: contain;
    position: absolute;
}

.header-nav-text {
    font: 2em 'PaperMarioFont';
    user-select: none;
    color: white;
    z-index: 1;
    line-height: 1;
    margin: 16px;
}

.header-nav-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 130px;
}

.central-nav-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 350px;
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.header-nav-container:hover, .central-nav-container:hover {
    animation-name: tilt-shaking;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@font-face {
    font-family: "Hey Gorgeous";
    src: url('assets/fonts/hey-gorgeous/heygorgeous.ttf');
}

@font-face {
    font-family: "FOT-PopHappiness Std";
    src: url('assets/fonts/pop-happiness/PopHappiness.ttf');
}

@font-face {
    font-family: "PaperMarioFont";
    src: url('assets/fonts/pmar/pmar-rizkydrawer.ttf');
}

@font-face {
    font-family: "FOT-PopJoy Std";
    src: url('assets/fonts/popjoy/PopJoy.otf') format('opentype');
}