* {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-weight: normal;
    font-family: PaulaNatalie;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@font-face {
  font-family: PaulaNatalie; /* set name */
  src: url('/resources/Paula\ Natalie.otf'); /* url of the font */
}

header {
    width: 100vw;
    height: 8vh;
    background-color: #FC8EAC;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom-style: solid;
    border-bottom-color: #FFC0C0;
    border-bottom-width: 0.6vh;
}

header h1 {
    margin-left: 2vw;
    margin-right: 2vw;
}

header h1 a {
    color: #FF4D6D;
    font-size: 4vh;
    text-shadow: 0.25vh 0.25vh #C9184A;
    text-decoration: none;
}

.vertical-line-header {
    border-color: #C9184A;
    border-width: 0.35vh;
    border-style: solid;
    width: 0.1vw;
    height: 5vh;
}

header ul {
    margin-left: 2vw;
    display: flex;
    flex-direction: row;
    width: 100%;
}

header ul li {
    color: #C9184A;
    list-style: none;
}

.canary-link {
    margin-left: auto;
}

header ul li a {
    margin-left: 1vh;
    margin-right: 3vh;
    color: #C9184A;
    font-size: 3vh;
    font-weight: bold;
    text-decoration: none;
}

header ul li a:hover {
    text-shadow: 0.25vh 0.25vh bisque;
}

.selected-link-header, .selected-link-header a {
    color: #FF4D6D;
}

@keyframes bg-scrolling {
    100% {
        background-position-x: 200px;
    }
}

main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-image: url('/images/background_beige.svg');
    background-position: 0px;
    background-color: beige;
    animation: bg-scrolling 1s infinite;
    animation-timing-function: linear;
    width: 100vw;
    height: 100%;
}

.center-infobox {
    display: flex;
    flex-direction: column;
    margin-top: 4vh;
    margin-bottom: 4vh;
    width: 35vw;
    height: fit-content;
    background-color: #FFC0C0;
    border-radius: 3vh;
    border-style: outset;
    border-color: #FC8EAC;
    border-width: 1vh;
    box-shadow: 1vw 1vw rosybrown;
}

.center-infobox h2, .center-infobox h3 {
    font-size: 1.5vw;
    text-align: center;
    color: #FF4D6D;
    font-weight: bold;
}

.center-infobox p {
    font-size: 1.25vw;
    color: #C9184A;
    padding: 1vh;
}

.center-infobox hr {
    border-color: #FC8EAC;
    border-width: 0.33vh;
    border-style: dashed;
}

.center-infobox .vr {
    border-left-width: 0.5vh;
    border-left-color: #FC8EAC;
    border-left-style: dashed;
    height: 100%;
    width: 0;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

ul {
    margin-left: 3vw;
}

ul li {
    font-size: 1.25vw;
    color: #C9184A;
    padding: 0.5vw;
}

.meowie-introduction {
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.meowie-introduction li {
    padding: 0.5vh;
}

footer {
    width: 100vw;
    height: 6vh;
    background-color: #FC8EAC;
    margin-top: auto;
    border-top-style: solid;
    border-top-color: #FFC0C0;
    border-top-width: 0.6vh;
    display: flex;
    flex-direction: row;
    align-items: center;
}

footer p {
    padding: 1vh;
    font-size: 2vh;
    color: #C9184A;
}

footer img {
    height: 85%;
    margin-right: 1vh;
}

.pics-infobox {
    height: auto;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.pics-infobox iframe {
    height: 100%;
}

.pics-box hr {
    border-color: #FC8EAC;
    border-width: 0.67vh;
    border-style: solid;
}

.pics-box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.pic-container {
    width: 40vw;
    background-color: #FF4D6D;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.25vw;
    border-radius: 3vh;
    border-style: dashed;
    border-color: #FC8EAC;
    border-width: 1vh;
    font-size: 3vw;
}

.pic-container:hover {
    background-color: #FC8EAC;
    border-color: #FF4D6D;
}

.pic-container:hover hr {
    border-color: #FF4D6D;
}

.pic-container a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.pic-container img {
    max-height: 25vw;
    margin: 1vw;
    border-radius: 2vh;
}

.pic-container hr {
    width: 36.7vw;
    border-width: 0.67vw;
}

.pics-microfooter {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.pics-microfooter p {
    margin-right: auto;
}

.pics-microfooter a {
    margin: 1vh;
    text-decoration: none;
    background-color: #FC8EAC;
    border-radius: 1vw;
    border-color: #FF4D6D;
    border-width: 0.2vw;
    border-style: double;
}

.pics-microfooter a:hover {
    background-color: bisque;
}

.socials-infobox {
    display: flex;
    flex-direction: column;
}

.socials-listcontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    margin-top: 3vh;
    margin-bottom: 3vh;
    gap: 1vh;
}

.socials-listcontainer li {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style-type: none;
    background-color: #FC8EAC;
    border-radius: 2vh;
    padding: 1vh;
}

.socials-listcontainer li p {
    font-size: 1.67vw;
}

.socials-listcontainer li a {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}

.socials-listcontainer li a img {
    width: 6.7vh;
    padding: 0.25vh;
}

.socials-listcontainer li a img:hover, #lastfm-logo:hover {
    background-color: bisque;
    border-radius: 2vh;
}

#lastfm-logo {
    background-color: red;
    border-radius: 2vh;
}

.username-socials-text {
    color: #C9184A;
    font-size: 2vw;
    text-shadow: 0.25vh 0.25vh #FF4D6D;
}

.coolsites-links {
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.coolsites-links li {
    padding: 0;
    font-size: 1vw;
}

.coolsites-links li a {
    font-size: 1vw;
    font-weight: bold;
    color: #C9184A;
}

.coolsites-links li a:hover {
    color: #FF4D6D;
}

.wishlist-infobox {
    width: 100%;
    height: auto;
    margin-left: 2vw;
    margin-right: 2vw;
}

.wishlist-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.wishlist-box {
    height: 100%;
    width: 33.3333333333%;
    display: flex;
    flex-direction: column;
}

.wishlist-box-games iframe {
    height: 100%;
    width: 100%;
}

.wishlist-box-games ul li {
    padding: 0;
}

.wishlist-games-iframe-content {
    justify-content: start;
    align-items: start;
    width: auto;
    height: auto;
}

.wishlist-games-iframe-content ul {
    margin-left: 8.67vw;
}

.wishlist-games-iframe-content ul li {
    font-size: 3.67vw;
    
}

.main-canary {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.canary-infobox {
    margin-top: 0vh;
    width: 35vw;
    height: 10vh;
    margin-bottom: 0vh;
}

.canary-infobox iframe {
    width: 100%;
    height: 100%;
}

.canary-data {
    font-size: 3vw;
    color: #C9184A;
}