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

body {color:#fff; font-family:Garamond, serif;}

a {text-decoration:none}

strong {font-weight:700}

.bg-fullwidth {
    background:#fcfbff;
    background-image: url('images/page-bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    height: 100vh;
}

.bg-dark, .bg-dark2 {font-family:Arial, sans-serif;}

.bg-dark2 {background-color:#4c4b4b;}

.bigbutton .bg-dark, .bigbutton .bg-dark2 {
  transition: background-color 0.2s ease;
}

.bigbutton:hover .bg-dark, .bigbutton:hover .bg-dark2 {
  background-color: #6f7074 !important;
}

.small {font-size: .7em}

.bg-frame {
    margin: 0px;
    padding: 0px;
    background-color: #6f7074;
    overflow-y: scroll !important;
    /*background-image: url("/images/textured_background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;*/
    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.5% 1% 3.5%; /* 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;
}

@media screen and (max-width: 720px) {
    .bg-fullwidth {
        background-image: 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 */
    }
}