TIF Custom Font CSS

/* Created by TheiPhoneFan on 2024-02-05 */
/* TheiPhoneFan 6.0.1 2021-2024 */
/* Download Font Here
https://www.dropbox.com/scl/fi/50rk5q1tik7n2re7n9r3r/jpr.ttf?rlkey=p3pd8so2lotzlcnm6fwlwraof&dl=0
*/
@font-face {
  font-family: jpr;
  src: url(../theme/jpr.ttf);
}
body {
  background-color:black;
}
.white-bg {
  background-color: #ffffff;
}
.full-bg-body {
  background-image: url('../theme/os-x-leopard-wallpaper.png');
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  background-attachment: fixed;
}
/* Text */
p {
  font-family: 'jpr', sans-serif;
  font-weight:300;
}

strong, b { /* Makes text with <b> & <strong> tags to display bold */
  font-weight:bold;
}

p {
  font-size: 25px;
  color: white;
  align-items: center;
  font-family: 'jpr', sans-serif;
}
h1 {
  font-size: 56.25px;
  font-family: 'jpr', sans-serif;
  color: white;
  align-items: center;
}
h2 {
  font-size: 43.75px;
  font-family: 'jpr', sans-serif;
  color: white;
}
h3 {
  font-size: 31.25;
  font-family: 'jpr', sans-serif;
  color: white;
  align-items: center;
}

h4 /* I never use this tag */ {
  font-size: 18.75;
  font-family: 'jpr', sans-serif;
  color: white;
}
h5 /* I never use this tag */ {
  font-size: 16.25px;
  font-family: 'jpr', sans-serif;
  color: white;
}
h6 /* I never use this tag */ {
  font-size:12.5;
  font-family: 'jpr', sans-serif;
  color: white;
}
a {
  font-size:25px;
  font-family: 'jpr', sans-serif;
  color: #ffff00;
  align-items: center;
  font-weight:300;
  text-decoration:undeline;
}
a:hover {
  text-decoration:none;
}
li /* List Item in the <ul> tag */ {
  font-size:25px;
  color:white;
  font-family:'jpr', sans-serif;
  font-weight:300;
  margin:10px;
}
figcaption { /* Image Caption */
  color:white;
  font-family: 'jpr', sans-serif;
  font-weight:300;
  font-size:25px;
}









/* Page Elements */
video { /* Videos will have rounded corners. */
  border-radius: 13px;
}
iframe { /* Embedded pages will have round corners, and no border */
  border-radius:16px;
  border-color:transparent;
}
.footer { /* Footer Iframe Styling */
  width: 100%;
  height: 365px;
}
hr { /* Horizontal line used as a divider */
  height:1px;
  border-radius:1px;
  border-width:0;
  color:white;
  background-color:white;
  width:74%;
  margin-top:25px;
  margin-bottom:25px;
}
noscript { /* Text that displays when JavaScript is disabled */
  text-align:center;
  font-size: 25px;
  font-weight: bold;
  color: red;
  background-color:white;
  font-family: 'jpr', sans-serif;
}
.header /* Top section of the page that contains info about the page */ {
  text-align:center;
  background-image: url('./os-x-leopard-wallpaper.png');
  border-radius: 0px 0px 13px 13px;
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
}
@media (max-width: 750px) {
  .header {
    border-radius: 13px 13px 13px 13px;
  }
}
button {
  background-image: url('./aqua.jpeg');
  background-size: cover;

  background-position-x: center;
  background-position-y: center;

  border: 2px solid #ccc;
  border-radius: 16px;

  border-top-color: #8ba2c1;
  border-right-color: #5890bf;
  border-bottom-color: #4f93ca;
  border-left-color: #768fa5;

  align-items: center;

  text-shadow: #0a0a0a80 1px 2px 2px;

  margin-bottom:5px;
  height:40px;
  font-family: 'jpr', sans-serif;
  font-weight:300;
}
button:hover { /* Button will have a "glow" effect when click/hovered on */
  box-shadow: #428cf080 0px 10px 16px;
  transition: 0.3s;
}
button a { /* Links in buttons will not be underlined and will be white */
  text-decoration:none;
  color:white;
}
button b { /* Text in button will have a font weight of 400 */
  font-weight: 400;
}
button img {
    vertical-align: middle;
    border-radius: 5px;
    box-shadow: #0a0a0a80 1px 2px 2px;
}
.infobtn { /* Info buttons below icons will have a font weight of 600. */
  font-weight:600;
}
summary { /* This is text that names a <details> section */
  color: white;
  font-family: 'jpr', sans-serif;
  font-weight:bold;
  font-size:25px;
  cursor: pointer;
}
details {
  padding: 12px 25px;
  cursor: pointer;
}
details hr {
  color:black;
  background-color:black;
  margin-top:5px;
  margin-bottom:5px;
}
@keyframes details-show { /* Adds an animation when the <summary> is clicked on. */
  from {
    opacity:0;
      transform: var(--details-translate, translateY(-0.5em));
    }
}

details[open] > *:not(summary) { /* Adds an animation when the <summary> is clicked on. */
  animation: details-show 0.3s ease-in-out;
}


/* Accordion Content Section */
.accordion /* For Hiding Large Amounts Of Content */  {
  background-color: #ffffff40;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  outline: none;
  font-weight: bold;
  font-family: 'jpr', sans-serif;
  font-size: 20px;
  border-radius: 16px;
  border: 2px solid #ccc;
  border-top-color: #8ba2c1;
  border-right-color: #5890bf;
  border-bottom-color: #4f93ca;
  border-left-color: #768fa5;
  height:65px;
}
.accordion:hover { /* A glow effect will apply when the accordion button is clicked/hovered on */
  box-shadow: #428cf080 0px 10px 16px;
}
.panel /* The <div> section where the content is contained */ {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}
.accordion:after /* When the accordion section is "opened" */ {
  content: '\002B';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 5px;
    }
.active:after /* When the accordion section is "closed" */  {
  content: "\2212";
  color: black;
}










/* Home Page Panels */
.section /* The div for the "panel" where the content is contained */ {
  background-color:#6495ec;
  border-radius:16px;
  width: 400px;
  height: 400px;
  overflow: auto;
}
.margin /* This div spaces the text/content apart */ {
  padding:10px;
}











/* Spacing */
.myDiv /* Used to align content to the center. */ {
  text-align: center;
}
.mydiv /* Used to add spacing between content and align to the center. */ {
  padding: 10px;
  text-align:center;
}
.changelog-collapsibles /* Used on the "Site Revision History" page to add spacing between content, but it does not align to center. */ {
  padding: 10px;
}
.flex-parent-element /* Soon to be replaced with the "flex-container". */ {
  display: flex;
  width: 100%;
}
.flex-child-element /* Soon to be replaced with the "flex-container". */ {
  flex: 1;
  margin: 10px;
}
.flex-child-element:first-child /* Soon to be replaced with the "flex-container". */ {
  margin-right: 20px;
}
@media (max-width: 7in) /* Soon to be replaced with the "flex-container". */ {
  .flex-parent-element {
    flex-direction: column;
  }
}

/* Start flex-container */
.flex-container {
    display: flex;
    align-items-x:center;
    justify-content:center;
    flex-wrap:wrap;
}
.flex-container>div  /* Used to place content side-by-side. */  {
  padding: 10px;
  align-items: center;
  align-content: center;
}
/* End flex-container */

/* Start flex-box */
.flex-box { /* Where the .flex-box content is contained */
  display: flex;
  align-items-x: center;
  justify-content: center;
}
@media (max-width: 6in) { /* If the screen with is less than 6 inches (576 px), the content will display in a column. */
  .flex-box {
      flex-direction: column;
  }
}
.flex-box>div  /* Used to place content side-by-side. */  {
  padding: 10px;
  align-items: center;
  align-content: center;
}
/* End flex-box */










/* Top Bar CSS */
.navbar {
  overflow: hidden;
  background-image: url('pinstripes-1x.png');
  border-radius: 13px 13px 0px 0px;
  border: 1px solid #ccc;
}
@media (max-width: 750px) {
  .navbar {
    display: none;
  }
}
.navbar a {
  float: left;
  font-size: 20px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'jpr', sans-serif;
  font-weight: 300;
  color: gray;
  cursor: pointer;
}
.navbar a img {
  vertical-align: middle;
}
.dropdown {
  float: left;
  overflow: hidden;
  font-weight: 300;
}
.dropdown .dropbtn {
  font-size: 20px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  background-image: none;
  font-family: 'jpr', sans-serif;
  font-weight: 300;
  margin: 0;
  color: gray;
  cursor: pointer;
  border-radius:0px;
  text-shadow: none;
  height:100%;
}
.navbar a:hover, .dropdown:hover, .navbar a:hover, .dropbtn:hover {
  background-color: #eeeeee;
  transition: 0.3s;
  color: #000000;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-image: url('pinstripes-1x.png');
  min-width: 160px;
  z-index: 1;
  border-radius: 16px;
  border: 1px solid #ccc;
  max-width: 100%; /* Added to limit the width to 100% of the screen */
  box-sizing: border-box; /* Added to include padding and border in the width calculation */
  margin-bottom: 1px;
}
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  max-height: 200px; /* Adjust the value as needed */
  overflow-x: hidden;
  text-align: left;
  cursor: pointer;
}
.dropdown-content a:hover {
  background-color: #eeeeee;
}
.dropdown-content p {
  color: black;
  font-size: 16px;
}
      .dropdown:hover .dropdown-content {
          display: block;
      }









/* Sidebar CSS */
.sidebar {
  height: 100%;
  width: 310px;
  position: fixed;
  top: 0;
  left: -310px; /* Hide the sidebar off-screen by default */
  background-image: url('pinstripes-1x.png');
  padding-top: 20px;
  transition: left 0.3s; /* Add a smooth transition effect when the sidebar slides in/out */
  overflow-x: auto;
  overflow-y: auto;
}

@media (min-width: 750px) {
  .sidebar {
    display: none;
  }
}

.site-title {
  text-align: center;
}
@media (min-width: 750px) {
  .site-title {
    display: none;
  }
}

/* Define the CSS styles for the links in the sidebar */
.sidebar a {
  padding: 12px 25px;
  text-decoration: none;
  font-size: 20px;
  color: black;
  display: block;
  font-family: 'jpr', sans-serif;
  height:20px;
}

/* Change the color of the links when hovered over */
.sidebar a:hover {
  background-color: #eeeeee;
  height:20px;
  border-radius: 10px;
}

.sidebar details {
  padding: 12px 25px;
  cursor: pointer;
}
.sidebar details hr {
  color:black;
  background-color:black;
  margin-top:5px;
  margin-bottom:5px;
}
.sidebar summary {
  padding: 3px;
  text-decoration: none;
  font-size: 20px;
  color: black;
  font-weight:300;
  font-family: 'jpr', sans-serif;
  height:20px;
}
.sidebar summary:hover {
  background-color: #eeeeee;
  height:20px;
  border-radius:16px;
}

.openbtn {
  position: fixed;
  z-index: 1;
  margin-left: 10px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  width: 40px;
  height:40px;
  font-size:20px;
  margin-top:10px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 750px) {
  .openbtn {
    display: none;
  }
}
.sidebar h3 {
  text-align: center;
}









/* Tabs */
.tab /* Used to place content into tabbed sections */ {
  overflow: hidden;
  border-radius:13px;
  border: 1px solid #ccc;
  background-image: url('../theme/pinstripes-1x.png');
  background-position-x:center;
  background-position-y:center;
}
.tab button /* The buttons used to access different tabs */ {
  background-color: rgba(255, 255, 255, 0.25);
  font-family:'jpr', sans-serif;
  overflow:none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 20px;
  border-radius:16px;
  color:black;
  font-weight:700;
  text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
  margin-bottom:5px;
  margin-top:5px;
  margin-left:5px;
  transition: 0.3s;
}
.tabcontent /* The "div" where the tab content is shown. */ {
  display: none;
  padding: 6px 12px;
  border-top: none;
}










/* Slideshow */
{
  box-sizing: border-box
}
body { /* Where the images are displayed */
  font-family: 'jpr' sans-serif;
  margin: 0,
}
.mySlides {
  display: none;
}
.mySlides img, .mySlides1 img, .mySlides2 img, .mySlides3 img, .mySlides4 img, .mySlides5 img, .mySlides6 img, .mySlides7 img, .mySlides8 img, .mySlides9 img, .mySlides10 img, .mySlides11 img, .mySlides12 img, .mySlides13 img, .mySlides14 img, .mySlides15 img, .mySlides16 img, .mySlides17 img, .mySlides18 img, .mySlides19 img, .mySlides20 img { /* Styling for the slideshow image, works for pages with up to 20 slideshows */
  vertical-align: middle;
  border-radius: 16px;
}
.slideshow-container /* Where the images are also displayed */ {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.prev, .next /* The back/forward slideshow buttons, this stylying is used on both buttons */ {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-family: 'jpr' sans-serif;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next /* This is used to keep the buttons seperate */ {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover /* This styling is applied when you hover or click on one of the back/forward */ {
  background-color: #6495ED;
  border-radius:16px;
  margin-left:10px;
  margin-right:10px;
}
.text /* This is the caption text */ {
  color: #ffffff;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-family: 'jpr', sans-serif;
  font-weight:400;
}
.numbertext /* This text displays how far you are through the slideshow */ {
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  font-family: 'jpr', sans-serif;
  font-weight:bold;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #6495ed;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #3261b8;
}

.fade /* When the slide is switched, the fade will apply. */ {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade /* When the slide is switched, the fade will apply. */ {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
@media only screen and (max-width: 300px) /* When the width of the device does not fit the slideshow content, this styling will apply. */ {
  .prev, .next, .text {
    font-size: 11px
  }
}