/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
    --blue4: #0B2532;
    --blue3: #005761;
    --blue2: #01BDC6;
    --blue1: #32FFFF;
    --red1: #F90310;
    --red2: #7E000C;
    --red3: #2A000C;
    --p: #f5b642;
    --s: red;
    --a: #FF6A00;
    --b: #FFD800;
    --c: #4CFF00;
    --d: #0094FF;
    --smile: #2B2B2B;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: virale;
    /* set name */
    src: url(fonts/virale.ttf);
    /* url of the font */
}

@font-face {
    font-family: virale;
    /* set name */
    src: url(fonts/000webfont.ttf);
    /* url of the font */
    font-weight: bold;
}

@font-face {
    font-family: ultrakill;
    /* set name */
    src: url(fonts/VCR_OSD_MONO_1.001.ttf);
    /* url of the font */
}

@font-face {
    font-family: URANK;
    /* set name */
    src: url(fonts/Akkordeon-Eight.ttf);
    /* url of the font */
}

@font-face {
    font-family: RANK;
    /* set name */
    src: url(fonts/Bison-Bold\(PersonalUse\).ttf);
    /* url of the font */
}

@font-face {
    font-family: nintendo;
    /* set name */
    src: url(fonts/nitrods-font.ttf);
    /* url of the font */
}

@font-face {
    font-family: smile;
    /* set name */
    src: url(fonts/Perfect\ DOS\ VGA\ 437\ Win.ttf);
    /* url of the font */
}

@font-face {
    font-family: undertale;
    /* set name */
    src: url(fonts/undertale-deltarune-text-font-extended.ttf);
    /* url of the font */
}

html {
    cursor: url("Normal&Text\ Select.cur"), auto;
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/deep_blue_2.jpg');
    background-size: 100%;
    color: var(--red1);
    font-family: ultrakill;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}


h1 {
    padding-left: 10px;
    color: white;
}

h3 {
    color: white;
    font-size: 0.70em;
}

audio {
    width: 100%;
}

table,
th,
td {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    font-family: nintendo;
    border: 1px solid black;
    color: black;
    background-color: var(--smile);
    border-collapse: collapse;
    table-layout: fixed;
    text-align: center;
}


.weekend {
    background-color: #9E2122;
    color: white;
}

.date {
    background-color: rgba(255, 255, 255, 0.387);
}

#month {
    background-color: var(--smile);
}

td {
    font-size: 10px;
    background-color: white;
    word-wrap: break-word;
    padding: 4px;
}

ul {
    list-style-image: url(https://s3.getstickerpack.com/storage/uploads/sticker-pack/chiikawa-usagi/tray_large.png?53134e9055d9fc5eeeebc93b0247af06&d=30x30);
}

li {
    color: white;
}

.icon {
    width: 100px;
    height: 100px;
    color: white;
    background: red;
    margin: auto;
}

.card {
    background-color: black;
    border: 10px solid transparent;
    border-image: url(images/dialogue.png) 25 round;
    margin: 5px;
}

#chip {
    width: 100px;
    height: 100px;
    --all: 0px;
    --bottom-left: 12%;
    background-color: #515154;
    --b: #515154;
    margin: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 70px 290px 0px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#chip-img {
    width: 85px;
    height: 85px;
    --all: 0px;
    --bottom-left: 12%;
    background-size: cover;
    --b: white;
    top: -5px;
    left: -5px;
    position: relative;
    border-color: transparent;
}

#chip:hover {
    transform: scale(1.1);
    transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.chip {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(to top right, transparent 50%, beige 50%), linear-gradient(beige, beige), linear-gradient(beige, beige);
    background-size: 25px 25px, 100% 100%, 100% 100%;
    background-position: 100% 0%, -25px 0%, 100% 25px;
    background-repeat: no-repeat;
}

.filled {
    background-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(to top right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), beige calc(50% + 1px)), linear-gradient(beige, beige), linear-gradient(beige, beige);
    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
    background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}

.text {
    font-family: undertale;
    color: white;
    text-align: left;
    font-size: 0.75em;
}

#scroll-container {
    overflow: hidden;
    margin: 10px;
    height: fit-content;
}

#scroll-text{
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);

    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 10s linear infinite;
}

.photobanner {
    /* animation properties */
    position:absolute;  
    left:0; 
    white-space: nowrap;
    animation: bannermove 15s linear infinite;
}

.photobanner img {    
  margin: 0 0.5em;
  height: 100px; 
  width: auto;
}

@keyframes bannermove {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-63.8%, 0);
  }
}

#scroll-container:hover {
   overflow: auto;
}

#scroll-container:hover .photobanner {
   animation-play-state:paused;
}

.sites {
    width: 15%;
}

/* for Firefox */
@-moz-keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(-100%);
    }
}

/* for Chrome */
@-webkit-keyframes my-animation {
    from {
        -webkit-transform: translateX(100%);
    }

    to {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(-160%);
        -webkit-transform: translateX(-160%);
        transform: translateX(-160%);
    }
}


hr.solid {
    border-top: 3px solid white;
}

.about-tags {
    flex: 1;
    margin: 5px;
}

.dialogue {
    background-color: blue;
    height: 100px;
    flex-grow: 2;
}

.horizontal {
    display: flex;
    padding: 1%;
}

.vertical {
    display: flex;
    flex-direction: column;
}

h2 {
    color: white;
    text-align: center;
}

input {
    border: transparent;
    background-color: transparent;
    color: white;
    font-family: ultrakill;
}

.header {
    display: flex;
    justify-content: space-between;
    /* pushes items to opposite ends */
    align-items: center;
    /* vertically aligns them */
    padding: 10px;
}

.back {
    background-color: rgba(0, 0, 0, 0.75);
    text-align: center;
    width: 60%;
    margin: auto;
    margin-top: 5%;
    border: 5px solid white;
    border-style: double;
    padding: 9px;
}

select {
    color: var(--red1);
    background-color: black;
}

.box {
    --all: 12%;
    --b: white;
    --bord: 3px;

    width: auto;
    height: auto;
    padding: 10px;
    color: var(--b);
    display: inline-block;
    border: var(--bord) solid var(--b);
    background:
        linear-gradient(45deg, var(--b) 0 calc(var(--bottom-left, var(--all)) + var(--bord)), transparent 0) bottom left /50% 50%,
        linear-gradient(-45deg, var(--b) 0 calc(var(--bottom-right, var(--all)) + var(--bord)), transparent 0) bottom right/50% 50%,
        linear-gradient(135deg, var(--b) 0 calc(var(--top-left, var(--all)) + var(--bord)), transparent 0) top left /50% 50%,
        linear-gradient(-135deg, var(--b) 0 calc(var(--top-right, var(--all)) + var(--bord)), transparent 0) top right /50% 50%,
        var(--img, transparent);
    background-origin: border-box;
    background-repeat: no-repeat;
    -webkit-mask:
        linear-gradient(45deg, transparent 0 var(--bottom-left, var(--all)), #fff 0) bottom left,
        linear-gradient(-45deg, transparent 0 var(--bottom-right, var(--all)), #fff 0) bottom right,
        linear-gradient(135deg, transparent 0 var(--top-left, var(--all)), #fff 0) top left,
        linear-gradient(-135deg, transparent 0 var(--top-right, var(--all)), #fff 0) top right;
    -webkit-mask-size: 50.5% 50.5%;
    -webkit-mask-repeat: no-repeat;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #696969;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    color: #787978;
    padding: 14px 16px;
    transition: 0.3s;
    font-family: nintendo;
    background-image: linear-gradient(to bottom, #C0C1BF, #DFE1DF, white);
    border: 1px solid white;
    outline: 2px solid #4A4B4A;
    margin: 5px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    animation: fadeEffect 1s;
    background-image: url(images/Dsi.svg);
}


/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.grid-container {
    columns: 3;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    height: auto;
}

.photo {
    border: 2px solid white;
    outline: 2px solid rgb(173, 173, 173);
    background-color: white;
    padding: 1em;
    color: black;
    text-align: center;
    background-image: linear-gradient(to top, rgb(173, 173, 173), white);
    margin-bottom: 0.5em;
    font-family: nintendo;
    text-align: left;
    padding: 4px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tag {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.photo:hover,
#tag:hover {
    transform: scale(1.1);
    transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

img {
    width: 100%;
}

#pages,
#boxed {
    border: white solid 3px;
    border-radius: 5px;
    padding: 8px;
    margin-top: 3px;
    transition: 0.25s;
    width: 100%;
}

#selected {
    border: white solid 3px;
    border-radius: 5px;
    padding: 8px;
    margin-top: 3px;
    background-color: white;
    transition: 0.25s;
    width: 100%;
}

#pages:hover {
    color: black;
    border-color: grey;
}

#pages:focus {
    border-color: var(--red1);
}

iframe {
    display: block;
    width: 100%;
    height: 20px;
    margin: auto;
}

.icon {
    height: 20px;
    width: 20px;
    background-color: transparent;
}

#selected>#button {
    color: black;
}

#button {
    font-size: 20px;
}

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    /* Fix inside */
    clip-path: polygon(10% 0%,
            /* top-left cut */
            90% 0%,
            /* top-right cut */
            100% 10%,
            100% 90%,
            90% 100%,
            /* bottom-right cut */
            10% 100%,
            0% 90%,
            0% 10%);
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: black;
    border: 3px solid white;
}

/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
    background-color: grey;
}

/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark {
    background-color: white;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
    display: block;
}

.rank {
    font-size: 22px;
    text-align: center;
    clip-path: polygon(10% 0%,
            /* top-left cut */
            90% 0%,
            /* top-right cut */
            100% 10%,
            100% 90%,
            90% 100%,
            /* bottom-right cut */
            10% 100%,
            0% 90%,
            0% 10%);
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: var(--p);
    /* border: 3px solid white; */
    color: white;
}

.testament {
    border: 5px solid white;
    border-style: double;
    padding: 9px;
}

.ultrakill {
    font-family: URANK;
    color: #FFD700;
    text-shadow: #FF6900 1.5px 1.5px;
    font-size: 50px;
}

.ssstyle {
    font-family: RANK;
    color: reda;
    font-size: 24px;
}

.style {
    font-family: RANK;
    color: white;
}

.bar {
    background-image: linear-gradient(to bottom, red, var(--red2) 200%);
    color: white;
    text-align: center;
    padding: 1px;
    border-radius: 3px;
    border: var(--red1) 10px;
    font-weight: bold;
}