@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
    font-family: OldEnglishTextMT;
    src: url(../fonts/oldenglishtextmt.ttf) format('truetype');
}

address {
    margin-left: 20px;
}

p.address {
    -webkit-text-fill-color: #191919;
}

footer {
    text-align: center;
    font-family: sans-serif;
    -webkit-text-fill-color: white;
}

a.navbar-brand {
    font: bold 1.5rem 'Old English Text MT', serif;
}

a.nav-link {
    font: bolder 1rem 'Philosopher', serif;
}

a:focus {
    outline: 3px solid crimson;
}

.book-chart {
    background-color: #dddddd;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Philosopher', serif;
}

/*Dice Pages*/

.wallet-wrapper,
.bet-wrapper {
    width: 8rem;  
}

.roll-wrapper {
    width: 13rem;
}

.card-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* Default: 5 equal columns */
    gap: 5px;
    justify-content: center;
}

h1.center,
h2.center,
#status {
    text-align: center;
    padding-top: 1rem;
}

h1.index {
    padding-top: 80px;
}

.sm-12 {
    padding-bottom: 30px;
}

/*Dice Pages*/

.message {
    position: fixed;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    top: 66px; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    background: linear-gradient(to bottom, #ff0000, #aaa, #ff0000);
    -webkit-text-fill-color: black;
    z-index: 1;
}

.navbar {
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    background-color: #191919;
    min-height: 66px;
    z-index: 1;
}

.background {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

body.survey {
    background-image: url("../images/survey-background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.normal {
    width: 100%;
    height: auto;
}

.card-background {
    background: #dbdbdb;
}

body {
    margin-top: 70px; /* Add a top margin to avoid content overlay */
    -webkit-text-fill-color: #000000;
}

/* Float four columns side by side */
.col-cards {
    float: left;
    width: 20%;
    padding: 10px;
    display: block;
    margin-bottom: 20px;
}
  
/* Remove extra left and right margins, due to padding in columns */
.row-cards {margin: 0 -5px;}
  
/* Clear floats after the columns */
.row-cards:after {
    content: "";
    display: table;
    clear: both;
}
  
/* Style the counter cards */
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
    display: grid;
    place-items: center;
    background-color: #f1f1f1;
    max-width: 2.5rem;
    height: 3.5rem;
    font: 1em ;
}

.centered {
    align-content: center;
    text-align: center;
}

.red-card {
    -webkit-text-fill-color: red;
}

.blue-card {
    -webkit-text-fill-color: #5555ff !important;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Default: 2 equal columns */
    justify-content: left;
}

.portfolio-image, .portfolio-content {
    padding: 15px;;
}

@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: 1fr; /* Stacks items into a single column */
    }
}

.tag {
    margin: 10px;
}

#liveToast {
  max-width: 300px;
  background-color: #333;
  -webkit-text-fill-color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  bottom: 10px;
  right: 10px;
  margin-left: 10px;
  opacity: 0.95;
}

#liveToast .show {
  visibility: visible !important;
  z-index: 1;
}

/* I got this from Google, this puts the items in a grid */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* Default: 4 equal columns */
    gap: 20px;
    justify-content: center;
}

/* I got this from Google, this styles the items in the grid */
.item {
    padding: 15px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

input.black-text, textarea.black-text {
    -webkit-text-fill-color: #191919;
    margin-bottom: 1rem;
}

.black-text {
    -webkit-text-fill-color: #191919 !important;
}

/* I got this from Google, this changes the grid layout for smaller screens */
/* For screens smaller than 1200px */
@media (max-width: 1200px) {
    .grid-container {
        grid-template-columns: 1fr 1fr 1fr; /* Stacks items into a triple column */
    }
}

/* For screens smaller than 900px */
@media (max-width: 900px) {
    .grid-container {
        grid-template-columns: 1fr 1fr; /* Stacks items into a double column */
    }
}

/* For screens smaller than 600px */
@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr; /* Stacks items into a single column */
    }
}

.nav-link {
    margin: 5px;
}

.bootstrap-background {
    background-color: #ffffff;
    -webkit-text-fill-color: #000000;
}

/*Tables*/

table {
    border: #000000 3px solid;
    max-width: 50%;
}

table.centered {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    table {
        max-width: 100%;
    }
}

thead {
    border-bottom: #000000 3px solid;
}

.fade-in {
    opacity: 0; /* Initial state: hidden */
    animation: fadeIn 0.5s forwards; /* Apply the animation */
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

tr:first-child td:first-child button {
    visibility: hidden;
}

.last-item td:nth-child(2) button {
    visibility: hidden;
}

td.item-name {
    transition: backdrop-filter 0.5s ease;
    word-wrap: break-word;
    max-width: 20rem;
}

@media (max-width: 900px) {
    td.item-name {
        max-width: 13rem;
    }
}

@media (max-width: 600px) {
    td.item-name {
        max-width: 5rem;
    }
}

td.item-name:hover {
    cursor: pointer;
    backdrop-filter: brightness(50%);
}

.item-name:focus {
    outline: 3px solid crimson;
}

.item-count input {
    width: 3rem;
    float: right;
    -webkit-text-fill-color: #000000;
}

tr.crossed-off td:nth-child(3) {
    text-decoration: line-through;
    text-decoration-thickness: 20%;
    font-weight: bold;
}

tr.crossed-off {
    filter: brightness(50%);
}

tr.crossed-off .button button.move-up-button,
tr.crossed-off .button button.move-down-button,
tr.crossed-off .button button.urgent-button {
    visibility: hidden;
}

tr.urgent:nth-child(even) {
    background: linear-gradient(90deg, #aa0000, #aa0000, #aa0000, #aa0000, #999999, #aa0000, #aa0000, #aa0000, #aa0000);
    -webkit-text-fill-color: #ccccdd;
    animation: zoom 5s infinite reverse;
}

tr.urgent:nth-child(odd) {
    background: linear-gradient(90deg, #770000, #770000, #770000, #770000, #999999, #770000, #770000, #770000, #770000);
    -webkit-text-fill-color: #ccccdd;
    animation: zoom 5s infinite forwards;
}

tr.urgent .button button:focus-visible {
    outline: 3px solid #aaaaaa;
}

tr.urgent td.item-name:focus-visible {
    outline: 3px solid #aaaaaa;
}

td.button button {
    -webkit-text-fill-color: #000000;
}

tr:nth-child(even) {
    background: #ffffff;
}

tr:nth-child(odd) {
    background: #cccccc;
}

thead tr {
    background: #393939 !important;
    -webkit-text-fill-color: #cccccc;
}

th {
    border-bottom: 3px solid #191919;
    text-align: left;
    padding: 8px;
}

td {
    text-align: left;
    padding: 8px;
}

td.button {
    text-align: center;
}

/*Tables*/

ol, ul {
    padding-bottom: 30px;
}

ul.centered {
    display: grid;
    grid-template-columns: 1fr; /* Default: 1 columns */
    gap: 20px;
    margin-right: 40px;
    justify-content: center;
}

li {
    padding-right: 15px;
    padding-left: 15px;
}

ul.navbar-nav {
    padding-bottom: 0px;
}

/*Headers*/
h1, h2 {
    color: #000000;
}

button:focus-visible {
    outline: 3px solid crimson;
}

.stripe {
    background: linear-gradient(180deg, #ff0000, #ff0000, #ff9900, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*Links*/
a {
    -webkit-text-fill-color: #aa0000;
}

a.red-link {
    -webkit-text-fill-color: red;
}

a.home-button {
    margin-left: 50px;
    font-size: 200%;
}

a.address {
    -webkit-text-fill-color: #4444ff;
}

/* Fortnite Page */

.fn-type {
    text-align: center;
    font-weight: bold;
    -webkit-text-fill-color: #990000;
}

.fn-hr {
    border: 2px solid #000000;
    width: 100%;
    margin: 0 auto;
}

.fn-item-image {
    width: 10rem;
    vertical-align: middle;
}

.fn-item-details {
    background-color: #ababab;
    border: 3px solid #000000;
    border-radius: 2.2em;
    margin: 2rem;
}

.fn-detail {
    padding-left: 2em;
    margin-top: 1em;
}

.fn-item-summary {
    display: flex;
    background-color: #696969;
    border: 3px solid #000000;
    border-radius: 2em;
}

.fn-arrow {
    padding: 1em;
}

details[open] span {
    transform: rotate(90deg);
}

.fn-item-summary:focus-visible {
    outline: 3px solid crimson;
}

.fn-item-name {
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
    word-wrap: break-word;
}

@media (min-width: 550px) {
    .fn-item-flex {
        display: flex;
        align-items: center;
    }
}

#fortnite-item-shop {
    background-color: #969696;
    border-radius: 2em;
    padding-top: 3em;
    padding-bottom: 3em;
    border: #770000 3px solid;
}

/* Fortnite Page */

/* Book Page */

.carousel-item {
    background-color: #dddddd;
    padding: 2em;
}

.carousel-button-left,
.carousel-button-right {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -ms-flexbox;
    display: inline;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30px;
    color: #fff;
    text-align: center;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.carousel-button-left:hover, .carousel-button-left:focus,
.carousel-button-right:hover,
.carousel-button-right:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-button-left:focus,
.carousel-button-right:focus {
    outline: 3px solid crimson;
}

.carousel-button-left {
  left: 0;
}

.carousel-button-right {
  right: 0;
}

.carousel-prev-icon,
.carousel-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%;
}

.carousel-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%373737' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%373737' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-inner {
    display: inline;
}

.cool-font {
    font-family: 'OldEnglishTextMT', sans-serif;
    -webkit-text-fill-color: #000000;
}

.chapter-content::first-letter {
    font-size: 2.3em;
    font-family: 'OldEnglishTextMT', serif;
}

.chapter-content {
    font-size: 1.2em;
    text-align: left;
    padding-left: 30px;
    padding-right: 30px;
}

.chapter-title {
    font-weight: bold;
    padding-left: 1rem;
    padding-right: 1rem;
    word-wrap: break-word;
    padding-bottom: 1rem;
}

#book-chapters {
    background-color: #969696;
    border-radius: 2em;
    border: #770000 3px solid;
    text-align: center;
    max-height: 87vh;
    overflow-y: auto;
}

#book-carousel {
    display: flex;
    justify-content: space-between;
}

.read-chapter-button, .submit-feedback-button {
    margin-left: 2em;
    margin-bottom: 2em;
    margin-right: 2em;
    -webkit-text-fill-color: crimson;
    font-weight: bold;
    position: relative;
    z-index: 1;
}



iframe {
    z-index: 1;
}

@media (max-width: 600px) {
    .carousel-button-left,
    .carousel-button-right {
        display: none;
    }
}

.slide-right {
    transform: translateX(-200%); /* Start off-screen */
    transition: transform 0.5s ease-in-out; /* Smooth transition */
    opacity: 0;
}

.slide-left {
    transform: translateX(-200%); /* Start off-screen */
    transition: transform 0.5s ease-in-out; /* Smooth transition */
    opacity: 0;
}

.active {
    animation: fadeIn 0.5s ease;
}

.chapter-list {
    width: 100%; /* Full width */
    background: #dddddddd;
    min-height: 66px;
    z-index: 1;
    position: relative;
    top: 0;
}

.navbar-toggler {
    z-index: 1;
}

.item-title {
    -webkit-text-fill-color: #770000;
    cursor: pointer;
}

.item-title:hover {
    -webkit-text-fill-color: #aa0000;
}

/* Book Page */

/* Loader */

dialog {
    max-width: 80%;
    &::backdrop {
        background-color: #00000080;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#loader {
    --size: 5rem;
    width: var(--size);
    height: var(--size);
    background: none;
    border: calc(var(--size) / 10) solid white;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 1s linear infinite;
    &:focus {
        outline: none;
    }
}

/* Loader */

/* Weather Page */

.black-background {
    background-color: #000000;
    -webkit-text-fill-color: #ffffff;
    border-radius: 2em;
}

#weather {
    border: 3px solid #000000;
    border-radius: 2em;
    padding: 2em;
    display: grid;
    place-items: center;
}

#weather-data {
    display: grid;
    place-items: center;
}

.weather-section {
    text-align: center;
    font-weight: bold;
    -webkit-text-fill-color: #ffdc00;
    margin-top: 1em;
}

.weather-hr {
    border: 2px solid #dddddd;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 1em;
}

.celestial-body {
    font-weight: bold;
    -webkit-text-fill-color: #000000;
    width: 8em;
    height: 8em;
    border-radius: 50%;
    background-color: #000000;
}

/* Weather Page */

a:hover {
    background: conic-gradient(at 50% 10%, #ff0000 70deg, #ff9900 100deg, #ffcc00 110deg, #ffff00 120deg, #99ff00 135deg, #00ff00 160deg, #00ff99 190deg, #00ff99 210deg, #00ffff 230deg, #0099ff 240deg, #0000ff 250deg, #9900ff 255deg, #ff00ff 260deg, #ff0000 270deg);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: zoom2 5s infinite alternate;
}

/*Touch ups*/
abbr, sub, sup {
    background: linear-gradient(45deg, #0000ff, #9900ff, #ff00ff, #ff0000, #ff9900, #ffcc00, #ffff00, #99ff00, #00ff00, #00ff99, #00ff99, #00ffff, #0099ff, #0000ff, #9900ff, #ff00ff, #ff0000, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: zoom 10s infinite alternate;
}

@keyframes fadeIn {
    from { 
        opacity: 0;
    } to { 
        opacity: 1;
    }
}

@keyframes zoom {
    0% {
        background-size: 1000%;
        background-position: left;
    }
    100% {
        background-size: 1000%;
        background-position: right;
    }
}

@keyframes zoom2 {
    0% {
        background-size: 200%;
        background-position: left;
    }
    100% {
        background-size: 200%;
        background-position: right;
    }
}

@keyframes zoom3 {
    0% {
        background-size: 1000%;
        background-position: left;
    }
    48% {
        background-size: 1000%;
        background-position: center;
    }
    50% {
        background-size: 1000%;
        background-position: right;
    }
    52% {
        background-size: 1000%;
        background-position: center;
    }
    100% {
        background-size: 1000%;
        background-position: left;
    }
}