:root {
  --bs-primary: #0f2151;
  /* Set the primary RGB color (required for background utilities) */
  --bs-primary-rgb: 15, 33, 81;
  --bs-bg-secondary-rgb: 251,244,232;
}

body {color:#0d2b42; font-family: "Libre Baskerville", Baskerville, Georgia, serif;}

a {text-decoration:none}

.gold {color: #e9b852;}

.bg-fullwidth {
    background:  #fcfbff url('images/page-bg.webp') no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}
.page-logo {
    position: absolute;
    top: clamp(15px, 2.5vw, 50px);
    left: clamp(15px, 3vw, 60px);
    width: clamp(140px, 22vw, 400px);
    height: auto;
    z-index: 10;
}

.bg-secondary {background-color:#fbf4e8 !important;}

.smaller-text {font-size: 0.8em; line-height:1.0;}

.bg-frame {
    margin: 0px;
    padding: 0px;
    background-color: #0e283f;
    overflow-y: scroll !important;
    border-radius: 19px 20px 16px 16px;
}

/* iPhone frame container */
.iphone {
    width: min(98vw, 430px);    /* Responsive width limit */
    aspect-ratio: 9 / 16;       /* Keeps correct device shape */
    border-radius: 0px 53px 57px 57px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

/* The <iframe> sits behind */
.iphone .screen {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;     /* BELOW the frame */
}

/* iPhone frame drawn with a pseudo element on top */
.iphone::after {
    content: "";
    position: absolute;
    inset: 0;           /* stretch to all sides */
    
    /* render frame image */
    border: 13px solid transparent;
    border-image-source: url('images/phone-outline.webp');
    border-image-slice: 200 125 155 120 fill;
    border-image-width: 10%;
    border-image-repeat: stretch;

    pointer-events: none; /* clicks go through to iframe */
    z-index: 2;     /* ABOVE iframe */
}

/* This is the INNER bounds where the iframe should live */
.screen-area {
    position: absolute;
    /*
        These percentages control how far INSIDE the phone the screen should start. They scale responsively.
        Adjust these until the iframe perfectly fits your outline.
    */
    inset: 1% 3.0% 1% 3.0%; /* top right bottom left */
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The iframe itself */
.screen-area .screen {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* stop any horizontal overflow in the phone screen
#pagebody {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
 */
/* common offenders inside: media + iframes
#pagebody img,
#pagebody iframe,
#pagebody video,
#pagebody canvas {
  max-width: 100%;
}
 */
/* Bootstrap .container adds left/right padding; this can contribute to tiny overflows */
#pagebody > .container {
  padding-left: 0;
  padding-right: 0;
}

.image-button {
    width: clamp(120px, 20vw, 300px);
    z-index: 2;
}

.image-button img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.2s ease;
}

.image-button:hover img {
    transform: scale(1.05);
}

.graduation-label {
    display: block;
    width: 100%;
    font-size: 0.8em;
    line-height:1.0;
    font-weight: 700;
}

.graduation-field {
    width: 90%;
    margin: 0 auto;
    border: 2px solid #d69532;
    border-radius: 12px;
    background-color: #fffdf9;
    letter-spacing: 0.15em;
    color: #253543;
    text-align: center;
}

.graduation-field::placeholder {
    color: #5c6268;
    opacity: 1;
}

.graduation-field:focus {
    border-color: #d69532;
    box-shadow: 0 0 0 0.25rem rgba(214, 149, 50, 0.2);
}

/* Image submit button */

.graduation-submit {
    display: block;
    width: 90%;
    padding: 0;
    margin: 0 auto;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.graduation-submit img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.graduation-submit:hover img {
    transform: scale(1.015);
}

.graduation-submit:active img {
    transform: scale(0.99);
}

.graduation-submit:focus-visible {
    outline: 3px solid #d69532;
    outline-offset: 4px;
}

@media screen and (max-width: 720px) {
    .bg-fullwidth {background-image: none;}
    .page-logo {display: none;}
}

@media screen and (min-width: 1450px) {
    #phoneframe {
        margin-top: calc((100vh - 770px) / 2);
    }
}

@media screen and (max-width: 1450px) {
    .iphone {
    width: min(98vw, 370px);    /* Responsive width limit */
    }
}