@font-face {
    font-family: 'body';
    src: URL('../fonts/GelPenUprightLight.ttf') format('truetype');
}

@font-face {
    font-family: 'heading';
    src: URL('../fonts/Start Story.ttf') format('truetype');
}

* {
    font-family: 'body';
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div.card {
    border-radius: 8px;
    overflow: auto;
    height: calc(700px + 6vw);
    border: 4px solid var(--p3);
}

div.card img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

.responsive {
    padding: 6px;
    float: left;
    width: 33.333%;
}

@media only screen and (max-width: 1300px) {
    .responsive {
        width: 49.999%;
        margin: 6px 0;
    }
    div.card {
    height: calc(550px + 6vw);
    }
}

@media only screen and (max-width: 800px) {
    .responsive {
        width: 100%;
    }
    div.card {
    height: calc(500px + 6vw);
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

:root {
    --p1: #BFF4FF;
    --p2: #F9C5E2;
    --p3: #570861;
    --hover: #FF69B4;
    --shadow: rgb(87 8 97 / 60%);
    --t1: rgb(191 244 255 / 80%);
    --t2: rgb(248 221 253 / 80%);
    --w1: linear-gradient(rgb(115 231 255 / 80%), rgb(191 244 255 / 60%));
    --w2: linear-gradient(rgb(250 140 255 / 80%), rgb(248 221 253 / 60%));
    --footer: linear-gradient(rgb(8, 49, 97), rgba(8, 39, 97, 0.4));
    --txt: black;
}

.pageswitch {
  background-color: var(--t1);
  border-radius: 8px;
  overflow: auto;
  margin: 10px;
  width: 50px;
  height: auto;
  display:inline-block;
  text-align: center;
}

body {
    font-size: calc(12px + 0.390625vw);
    min-height: 100vh;
    color: var(--txt);
    transition: color .2s, background-color .2s;
    background-image: linear-gradient(132deg, #9031b0 16.67%, #8ccfff 16.67%, #8ccfff 33.33%, #ffe0fc 33.33%, #ffe0fc 50%, #9031b0 50%, #9031b0 66.67%, #8ccfff 66.67%, #8ccfff 83.33%, #ffe0fc 83.33%, #ffe0fc 100%);
    background-size: 180.00px 199.92px;
}

p {
    margin: 8px 0px;
}

p.tab {
    text-indent: 2vw;
}

body.dark {
    --p1: #011d23;
    --p2: #270116;
    --p3: #27092b;
    --hover: #2f1a24;
    --shadow: rgb(240 123 255 / 50%);
    --t1: rgb(39 103 115 / 30%);
    --t2: rgb(90 32 101 / 30%);
    --w1: linear-gradient(rgb(36 124 141 / 70%), rgb(11 55 61 / 50%));
    --w2: linear-gradient(rgb(110 32 113 / 70%), rgb(41 4 51 / 50%));
    --footer: linear-gradient(rgba(8, 23, 63, 0.8), rgba(0, 12, 45, 0.4));
    --txt: #f3e9f2;
    background-image: linear-gradient(132deg, #2a0e33 16.67%, #334d60 16.67%, #334d60 33.33%, #7b5477 33.33%, #7b5477 50%, #2a0e33 50%, #2a0e33 66.67%, #334d60 66.67%, #334d60 83.33%, #7b5477 83.33%, #7b5477 100%);
}

/* Navbar START */
ul {
    z-index: 1;
    font-size: calc(18px + 0.390625vw);
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--p1);
}

li {
    float: left;
}

li a {
    font-weight: bold;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--txt);
}

li a:hover:not(.active) {
    background-color: var(--hover);
}

.active {
    background-color: var(--p2);
}

/* Navbar END */

/* Dark Mode Switch START */
.switch {
    position: relative;
    display: block;
    width: 88px;
    height: 48px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch input:checked+.slider {
    background-color: #340a39;
}

.switch input:checked+.slider:before {
    transform: translateX(40px);
    background-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    box-shadow: inset -10px -6px 0 #d8e9ef;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #12a8c5;
    transition: 0.4s;
    box-shadow: 0 0 0.25em rgba(67, 71, 85, 0.27), 0.2px 0.2em 24px 0 rgba(1, 29, 77, 0.15);
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 32px;
    width: 32px;
    left: 8px;
    bottom: 8px;
    background-color: #fde04f;
    transition: 0.4s;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
}

/* Dark Mode Switch END*/

.blog {
    border-radius: 8px;
    overflow: auto;
    padding: 10px;
    display: block;
    background-color: var(--t1);
    margin-bottom: 20px;
}

.bodydiv {
    padding: calc(5px + 1.5625vw);
    margin: 2vw calc(35vw - 200px);
    z-index: 1;
}

.codeblock {
    margin: 5px;
    padding: 5px;
    z-index: 2;
    border-radius: 8px;
    overflow: auto;
    background-color: dimgray;
    color: lightgrey;
    font-family: monospace !important;
    font-size: calc(7.5px + 0.390625vw);
}

.window {
    padding: 10px;
    display: block;
}

.round {
    border-radius: 8px;
    overflow: auto;
}

.webicon {
    display: block;
    border-radius: 8px;
    width: 80px;
    height: 80px;
    margin: 0px 10px 0px 0px;
}

.captimg {
    width: calc(185px + 10vw);
}

.banner {
    width: 100%;
    height: auto;
    margin: 0px 0px 20px 0px;
}

.chat {
    border-radius: 8px;
    width: 100%;
    height: 600px;
}

.transblue {
    background-color: var(--t1);
}

.transpink {
    background-color: var(--t2);
}

.windowblue {
    background-image: var(--w1);
}

.windowpink {
    background-image: var(--w2);
}

.stripink {
    padding: 10px;
    background-color: var(--p2);
}

.stripurp {
    padding: 10px;
    background-color: var(--p3);
    color: white;
}

.social {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.galleryland {
    height: calc(5vw + 60px);
    padding-bottom: 0.4vw;
}

.galleryport {
    height: calc(12vw + 100px);
    padding-bottom: 0.4vw;
}

.pfp {
    width: calc(5vw + 60px);
    height: calc(5vw + 60px);
    border-radius: 20%;
    padding-bottom: 0.4vw;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.footer {
    text-align: center;
    padding: 3px;
    background-image: var(--footer);
    color: white;
    left: 0;
    bottom: 0;
    width: 100%;
}

h1 {
    font-family: 'heading';
    text-align: center;
    text-shadow: 2px 2px var(--shadow);
}

h2 {font-family: 'heading';}

h3 {
    font-family: 'heading';
    text-align: right;
}

.row {
    display: flex;
}

.column {
    margin-top: auto;
    margin-bottom: auto;
}

/* Goober START */
.half {
    margin-top: auto;
    margin-bottom: auto;
    flex: 50%;
}

/* Goober END */

.button {
    font-family: 'heading';
    transform: scale(.95);
    display: inline-block;
    padding: 10px 20px;
    color: var(--txt);
    box-shadow: 4px 4px var(--p3);
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    transform: scale(1);
    background-color: var(--hover);
}