@import url("/static/css/fonts.css");
@import url("/static/css/vars.css");
@import url("/static/css/marquee.css");

* {
    padding: 0;
    margin: 0;
}

body {
    background-image: image-set(
        url("/static/images/bg-low.jpg") 1x,
        url("/static/images/bg-high.jpg") 2x
    );
    background-repeat: repeat;
    background-size: 15%;
}
.container {
    padding: 1.5vw;
    margin: auto;
    margin-top: 1.5vw;
    margin-bottom: 5vw;

    width: calc(40% * var(--ui-width-scale));
    height: 100%;

    background-color: var(--white);

    box-shadow: 0.2vw 0.2vw 0.1vw rgba(0,0,0,0.2);
    border-radius: 0.1vw;
} 

.flex {
    display: flex;
}
.block {
    display: block;
}
.absolute {
    position: absolute;
}

nav > ul {
    margin-top: calc(2vw * var(--ui-width-scale));
    margin-bottom: none;
    width: calc(25vw * var(--ui-width-scale));
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#footer > .block > nav > ul {
    width: calc(30vw * var(--ui-width-scale));
}
.circle{
    margin: 0;
    padding: 0;
    width:  calc(0.4vw * var(--ui-width-scale));
    height: calc(0.4vw * var(--ui-width-scale));
    background-color: gray;
    border-radius: 50%;
}
nav > ul > li > a {
    text-align: center;
    text-decoration: none;
    color: black;
    font-family: "Silly3";
    font-size: calc(1.2vw * var(--ui-width-scale));;
}

.boykisser-dance {
    aspect-ratio: 1.1;
    height: calc(10vw * var(--ui-width-scale));
    margin-right: auto;

    margin-left: auto;
    margin-bottom: auto;
}
.boykisser-dance > img {
    width: calc(10vw * var(--ui-width-scale));
}

a > .boykisser-puppyeyes {
    height: calc(7vw * var(--ui-width-scale));
}
.boykisser-puppyeyes {
    height: calc(9vw * var(--ui-width-scale));

    margin-left: auto;
    margin-bottom: auto;
}
.boykisser-paw {
    aspect-ratio: 1.3;
    height: calc(8vw * var(--ui-width-scale));

    margin-left: auto;
    margin-bottom: auto;
}
.boykisser-typing {
    aspect-ratio: 1.2;
    height: calc(11vw * var(--ui-width-scale));

    margin-left: auto;
    margin-bottom: auto;
}
.boykisser-origin {
    aspect-ratio: 1.3;
    height: calc(10vw * var(--ui-width-scale));

    margin-left: auto;
    margin-bottom: auto;
}
.boykisser-shy {
    aspect-ratio: 1.3;
    height: calc(12vw * var(--ui-width-scale));

    margin-left: auto;
    margin-bottom: auto;
}
.boykisser-meow {
    margin-left: auto;
    margin-top: calc(5vw * var(--ui-width-scale));
    margin-bottom: auto;

    width: calc(15vw * var(--ui-width-scale));
    aspect-ratio: 1.4;
}
.right-align {
    margin-left: auto;
}
.left-align {
    margin-right: auto;
}

#copyright {
    padding-left: none;
    padding-top: calc(1vw * var(--ui-width-scale));
    text-align: center;
}
#copyright > span {
    font-family:Arial;
}

#head > .block, #footer > .block {
    margin: auto;
    width: 80%;
}
h1 {
    width: 100%;

    font-family: "Silly1";
    font-size: calc(3vw * var(--ui-width-scale));
    text-wrap: nowrap;

    padding-left: calc(1.5vw * var(--ui-width-scale));
}
h1 > a {
    text-decoration: none !important;
    color: black;
}

h2 {
    width: 100%;

    font-family: "Silly1";
    font-size: calc(2.2vw * var(--ui-width-scale));
    text-wrap: nowrap;

    padding-left: calc(1.5vw * var(--ui-width-scale));
}

h3 {
    width: 80%;

    font-family: "Silly1";
    color: var(--dark-pink);
    font-size: calc(1.2vw * var(--ui-width-scale));
    text-wrap: nowrap;

    padding-left: calc(1.5vw * var(--ui-width-scale));

    white-space: pre;
}

p, li {
    font-family: "Silly3";
    color: black;
    font-size: calc(1vw * var(--ui-width-scale));

    margin-right: auto;
    margin-top: calc(0.4vw * var(--ui-width-scale));

    text-align: left;
    text-wrap: wrap;
}
li {
    color: rgb(50, 50, 50);
}
ul {
    padding-left: calc(3vw * var(--ui-width-scale));
}

.timestamp {
    color: grey;
    text-align: center;
    font-size: calc(0.8vw * var(--ui-width-scale));
}
.author {
    color: grey;
    text-align: center;
    font-size: calc(0.6vw * var(--ui-width-scale));
}

.form {
    padding: calc(1.5vw * var(--ui-width-scale));;
}
input {
    display: block;

    width: 100%;

    border: none; /* undo initial border */
    border-style: outset;
    border-width: calc(0.03vw * var(--ui-width-scale));
    border-color: gray;
    border-radius: calc(0.05vw * var(--ui-width-scale));

    margin-top: calc(0.2vw * var(--ui-width-scale));

    font-size: calc(3vw * var(--ui-width-scale));
    font-family: "Silly3";
}
#image-upload {
    font-size: calc(1.5vw * var(--ui-width-scale));
}

article {
    margin-top: calc(1vw * var(--ui-width-scale));
    margin-bottom: 1vw;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    
    background-color: white;
    box-shadow: calc(0.2vw * var(--ui-width-scale)) calc(0.2vw * var(--ui-width-scale)) calc(0.1vw * var(--ui-width-scale)) rgba(0,0,0,0.2);
}
article > .flex {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
article > .flex > h2 {
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: calc(0.5vw * var(--ui-width-scale));
    padding-left: 0;
}
.highlighted {
    border: 5px solid var(--gold) !important;
    background-color: var(--light-gold) !important;
}
.gallery-unlisted {
    border: 5px solid var(--dark-red) !important;
    background-color: var(--light-red) !important;
}

.text-container {
    padding-top: calc(1vw * var(--ui-width-scale));
    padding-left: calc(3vw * var(--ui-width-scale));
}
.game-text-container {
    padding-top: calc(1.2vw * var(--ui-width-scale));
    padding-left: calc(2vw * var(--ui-width-scale));
    padding-right: calc(2vw * var(--ui-width-scale));
    width: 60%;
}
.game-icon {
    width: calc(40vw * var(--ui-width-scale));
    aspect-ratio: 1;
    margin-right: auto;
    margin-left: calc(1vw * var(--ui-width-scale));
}

.tiny {
    font-size: calc(0.8vw * var(--ui-width-scale));
}

.polaroid-container {
    position: absolute;
    aspect-ratio: 0.75;
    width: calc(8vw * var(--ui-width-scale));
}
.polaroid-bg {
    width: inherit;
    height: inherit;
    box-shadow: calc(0.1vw * var(--ui-width-scale)) calc(0.2vw * var(--ui-width-scale)) calc(0.1vw * var(--ui-width-scale)) rgba(0,0,0,0.2);
}
.polaroid-picture {
    width: 87%;
    height: 74%;
    margin-left: 7%;
    margin-top: 7%;
}

.sticky-note-container {
    position: absolute;
    aspect-ratio: 0.75;
    width: calc(8vw * var(--ui-width-scale));
}
.sticky-note-bg {
    width: inherit;
    height: inherit;
}
.sticky-note-content {
    width: 65%;
    height: 55%;
    margin-left: 18%;
    margin-top: 18%;
    rotate: -2deg;
}

.gallery-container {
    background: none;
    box-shadow: none;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2vw;
    width: calc(50% * var(--ui-width-scale));
    justify-items: center;
}
.gallery-image {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 1vw;
}
.gallery-image > img {
    width: 100%;
}
.gallery-caption {
    font-size: calc(2.5vw * var(--ui-width-scale));
    text-align: center;
    padding-bottom: 0.5vw;
}

.gallery-admin-buttons-container {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 0.7vw;
    margin-bottom: 0.7vw;
}
.gallery-admin-buttons-container > input {
    font-size: calc(0.8vw * var(--ui-width-scale));
    width: 30%;
    border-radius: 0.1vw;
    box-shadow: 0.05vw 0.05vw 0.03vw rgba(0,0,0,0.2);
}
.gallery-delete {
    background-color: var(--red);
    border-color: var(--dark-red);
}
.gallery-unlist {
    background-color: var(--blue);
    border-color: var(--dark-blue);
}
.gallery-update-caption {
    background-color: var(--pink);
    border-color: var(--dark-pink);
}
.gallery-share {
    display: block;
    
    background-color: var(--blue);
    border-color: var(--dark-blue);

    width: calc(6vw * var(--ui-width-scale));
    height: calc(3vw * var(--ui-width-scale));
    
    margin-left: auto;
    margin-top: calc(1vw * var(--ui-width-scale));
    margin-bottom: calc(0.2vw * var(--ui-width-scale));
    margin-right: calc(0.2vw * var(--ui-width-scale));

    font-size: calc(1.8vw * var(--ui-width-scale));
}

#expanded-gallery-container {
    width: calc(60dvh);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    margin: 0 !important;
}

.blur {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    
    backdrop-filter: blur(0.2vw);
    /* cursor: pointer; */
}
.hidden {
    display: none !important;
}

.copied {
    background-color: var(--dark-blue);
    color: black;
}
.center-vertical {
    display: flex;
    align-items: center;
}
.center-horizontal {
    display: flex;
    justify-content: center;
}
.center-vertical > * {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
.align-right {
    display:block;
    text-align: right;
}
.monospace {
    font-family: monospace;
    white-space: pre-wrap;
}

a.teaser {  
    font-size: calc(2.2vw * var(--ui-width-scale));
}
p.teaser {
    -webkit-mask-image: linear-gradient(to right, black, transparent);
    mask-image: linear-gradient(to right, black, transparent);   
    margin-top: calc(2vw * var(--ui-width-scale));
    font-size: calc(1.7vw * var(--ui-width-scale));
}
.blog-item {
    margin-bottom: 0;
}

/* The polaroids are manually moved with the @media queries, bc they dont really follow the same --ui-width-scale scale */
#polaroid-1 {
    right: 25vw;
    top: 5vw;
    rotate: 10deg;
}
#polaroid-2 {
    left: 23vw;
    top: 20vw;
    rotate: -7deg;
}
#polaroid-3 {
    right: 22vw;
    top: 30vw;
    rotate: 5deg;
}
#polaroid-4 {
    left: 25vw;
    top: 58vw;
    rotate: -12deg;
}
#polaroid-5 {
    left: 23vw;
    top: 62vw;
    rotate: -12deg;
}
#sticky-note-1 {
    left: 44vw;
    top: 45vw;
    rotate: 3deg;
}
#polaroid-unscrew-stuff {
    right: 35vw;
    top: 60vw;
    rotate: -8deg;
}


@media screen and (max-width: 800px) {
    :root {
        --ui-width-scale: 2 !important;
    }

    #polaroid-1 {
        right: 5vw;
        top: 10vw;
        rotate: 10deg;
    }
    #polaroid-2 {
        display: none;
    }
    #polaroid-3 {
        display: none;
    }
    #polaroid-4 {
        display: none;
    }
    #polaroid-5 {
        display: none;
    }
    #sticky-note-1 {
        left: 38vw;
        top: 80vw;
    }

    #polaroid-unscrew-stuff {
        right: 18vw;
        top: 105vw;
        rotate: -8deg;
    }    
  }