:root {
    --dark-bg: rgb(161, 161, 161);
    --bg: rgb(198, 198, 198);
    --a-hover: #e86142;

    --spacing: 10px;

    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    overflow-x: hidden;
    color: black;
    margin: 0;
    background: var(--bg);
}

main {
    display: block;
}

h1, h2, h3, blockquote {
    font-weight: 700;
    font-style: normal;
}

a {text-decoration: none;color: #000000;}a:visited{color: #555555;}a:hover{color: var(--a-hover);}/* a:active {color: #C70039;} */

blockquote {
    margin: 10px;
    padding: 0;
    margin-bottom: var(--spacing);
    text-align: center;
}

blockquote p {
    font-size: 30px;
    display: inline;
    line-height: 1;
}

footer {
    background: var(--dark-bg);
    width: 100%;

    font-size: large;
    font-weight: 500;
    display: flex;
    justify-content: center;     /* horizontal centering of links */
    align-items: center;  
}

.footer-div {
    width: 100%;
    max-width:1080px;
}

.footer-social {
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: center;      /* vertical */
    gap: 20px;                /* spacing between icons */
}

.footer-social img {
    display: block;
}

.CY {
    position: fixed;
    inset: 0;

    z-index: 0;
    pointer-events: none;
}

.navbar-desktop,.navbar-mobile {
    background: var(--dark-bg);
    position: fixed;
    top: 0;
    width: 100%;
    height: 75px;
    z-index: 10;

    box-shadow: 0 2px 5px rgba(0,0,0,0.16),
                0 2px 10px rgba(0,0,0,0.12);
}
.navbar-div {
    max-width: 1080px;
    margin: 0 auto;              /* centers horizontally in navbar */
    height: 100%;
    
    display: flex;
    justify-content: center;     /* horizontal centering of links */
    align-items: center;         /* vertical centering of links */
    gap: 10px;                   /* optional spacing between links */
}

.navbar-div a {
    font-weight: 700;
    font-size: large;
    color: white;
    padding: 8px 32px;
    text-align: center;
    text-decoration: none; /* optional */
}

.navbar-div a:hover{color: var(--a-hover);}

.navbar_item {}
.button {}

.padding-12-24{padding:12px 24px!important}
.padding-24-48{padding:24px 48px!important}
.margin-bottom-25{margin-bottom:25px}
.margin-bottom-50{margin-bottom:50px}
.margin-bottom-75{margin-bottom:75px}
.margin-bottom-100{margin-bottom:100px}
.margin-top-25{margin-top:25px}
.margin-top-50{margin-top:50px}
.margin-top-75{margin-top:75px}
.margin-top-100{margin-top:100px}

.word-wrap{
    text-wrap: pretty;
    overflow-wrap:break-word;
}

.hide{display:none!important}

.hide-small {
    display: inherit;
}

.profile-picture {
    height: 300px;
}

.main-content{
    margin: 75px auto 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 100px;   /* large spacing between sections */
}

.center {
    text-align:center!important;
    display:inline-block;
    width:auto;
}
.left {
    text-align:left!important;
    display:inline-block;
    width:auto;
}

.main-content-div {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    justify-items: center;
}

.inner-div {
    width: 100%;
    max-width: 700px;   /* or whatever width you like */
    margin: 0 auto;     /* centers the block */
    text-align: left;
}
.inner-div h1 {
    text-align: center;
    margin-bottom: 50px;
}

.swiper {
  overflow: visible;
}
.swiper-slide img {
    height: 400px;
    user-select: none;
}

.div-max-width-1080 {max-width: 1080px;}
.div-max-width-720 {max-width: 720px;}
.div-max-width-540 {max-width: 540px;}

.div-height-100{height: 100px}
.div-height-200{height: 200px}
.div-height-300{height: 300px}
.div-height-400{height: 400px}
.div-height-500{height: 500px}

.div-image {
    overflow: hidden;  /* hides overflow when image is cropped */
}

.div-image img {
    width: 100%;
    height: 140%;
    object-fit: cover;      /* fills box without distortion */
    object-position: center; /* crop centered */
    top: 0;
    left: 0;
    will-change: transform;
}

.div-2-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 5px;
    align-items: start;
    align-items: center;
}

.div-half-width {
    width: 49%;
}
.div-full-width {
    width: 100%;
}

.debug-border {
    border: none; /* 1px solid red; */
}

.planet {
    width: 100%;
    max-width: 400px;
    height: 400px; /* constrained by layout */
    background: transparent;
    /* aspect-ratio: 1 / 1; */
    justify-self: center;
}

canvas {
    display: block;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 40px auto;
    padding-left: 40px;
}

/* vertical line */
.timeline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ccc;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

/* circle marker */
.timeline-item::before {
    content: "";
    position: absolute;
    left: -38px;
    top: 6px;
    width: 14px;
    height: 14px;
    background: white;
    border: 3px solid #666;
    border-radius: 50%;
}

.timeline-date {
    font-weight: bold;
    margin-bottom: 6px;
}

.timeline-content {
    padding: 10px 15px;
    background: rgba(255,255,255,0.05); /* optional subtle card */
    border-radius: 6px;
}

/* When resize, should affect
.footer-div
.navbar_desktop,.navbar_mobile
.hide-small
.main-content
.div-2-columns
.div-half-width
*/

@media all and (orientation: portrait) {
    header {
        grid-column: 2 / span 10;
    }
    section {
        grid-column: 2 / 11;
    }
    .right {
        grid-column: 2 / 11;
    }
}

@media (max-width: 700px) {
    .div-2-columns {
        grid-template-columns: 1fr; /* stack */
    }

    .timeline {
        order: 1;  /* timeline first */
    }

    .planet {
        order: 2;  /* planet second */
        margin: 0 auto; /* center planet */
    }
}