* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: DynaPuff, Arial, Helvetica, sans-serif;
    word-spacing: 4px;
    letter-spacing: 2px;
}

svg {
    fill: rgb(173, 228, 176);
    stroke: rgb(110, 145, 112);
    stroke-width: 1px;
    transform-origin: center;
    transition: all 0.25s linear;
    position: relative;
    top: 6vh;
    right: 8vw;
    /*Remove blur upon image translation*/
    backface-visibility: hidden;
}

path:hover {
    fill: rgb(154, 218, 170);
}

path:active {
    fill: rgb(143, 189, 154);
}

h1 {
    font-size: 5vh;
    color: rgb(253, 248, 234);
}

h2 {
    font-size: 4vh;
    font-style: italic;
    animation: rainbow-cycle 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
}

ul {
    display: flex;
    flex-direction: column;
}

p, 
li {
    font-size: 3vh;
    color: rgb(255, 255, 188);
}

p,
li {
    margin-top: 5%;
}

a {
    text-decoration: none;
}

a:link {
    color: rgb(5, 170, 192);
}

a:visited {
    color: pink;
}
  
a:hover {
    color: hotpink;
}

a:active {
    color: rgb(255, 0, 157);
}

embed {
    border: 5px solid grey;
    height: 50vh;
    width: 50vw;
}

video {
    border-radius: 10px;
}

.video-container,
.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5vw;
}

.book-container {
    height: 374px;
    width: 276px;
    background-image: url(./assets/massive.gif);
    background-repeat: no-repeat;
    background-size: contain;
}

.book-container:hover {
    background-image: url(./assets/war-and-peace.jpg);
}

.Australia li::marker {
    content: '🦘';
}

.Japan li::marker {
    content: '🌸';
}

.China li::marker {
    content: '🥡'
}

.United·States li::marker {
    content: '🦅';
}

.United·Kingdom li::marker {
    content: '☕';
}

.United·Kingdom img {
    margin: 0 auto;
}

.France li::marker {
    content: '🥖';
}

.Italy li::marker {
    content: '🍕';
}

.Madagascar li::marker {
    content: '🐧';
}

.Russia li::marker {
    content: '⛄';
}

.Egypt li::marker {
    content: '⏳';
}

.Germany li::marker {
    content: '🥨';
}

.Netherlands li::marker {
    content: '🌷';
}

.Netherlands img {
    margin-left: auto;
    margin-right: auto;
    animation: jumpscare 0.5s ease-in;
}

.container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100vh;
}

.country-container {
    height: 100vh;
    width: 100vw;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
    z-index: 1;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
}

.text-container {
    margin: 0 auto;
    text-align: left;
    width: 50%;
}

.anime-container {
    height: 318px;
    width: 225px;
    margin: 0 auto;
    border-radius: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: anime-cycle 20s infinite linear;
}

.fanfare {
    display: block;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

#f1 {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

#f2 {
    rotate: 270deg;
    top: 30vh;
    left: auto;
    right: -230px;
    z-index: 3;
}

#f3 {
    rotate: 90deg;
    top: 30vh;
    left: -230px;
    right: auto;
    z-index: 4;
}

.world-map {
    height: 100%;
    overflow: hidden;
    background-image: linear-gradient(to bottom right, rgb(112, 234, 255), rgb(56, 163, 235));
    background-repeat: no-repeat;
    background-size: cover; 
    background-attachment: fixed;   
    cursor: grab;
}

.sidebar {
    width: 30%;
    height: 60%;
    min-width: 180px;
    min-height: 350px;
    position: absolute;
    border: 5px solid rgba(0, 0, 0, 0.7);
    border-top-right-radius: 50px;
    border-left: none;
    border-bottom: none;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: left;
    overflow-y: auto;
    direction: rtl;
}

.sidebar-text {
    direction: ltr;
}

.hidden {
    display: none;
}

.space-top {
    margin-top: 5%;
}

.super-space-top {
    margin-top: 800vh;  
}

.dragging {
    cursor: grabbing;
}

.no-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

.close {
    height: 30px;
    width: 30px;
    border: none;
    border-radius: 30%;
    font-weight: bolder;
    color: white;
    background-color: rgba(255, 0, 0, 45%);
    float: right;
}

.close:hover {
    background-color: rgba(255, 40, 40, 0.45);
}

@keyframes rainbow-cycle {
    0%, 100% { color: rgb(127, 161, 255); }
    10% { color: rgb(86, 170, 219); }
    20% { color: rgb(113, 228, 151); }
    30% { color: rgb(56, 170, 109); }
    40% { color: rgb(223, 238, 136); }
    50% { color: rgb(228, 200, 175); }
    60% { color: pink; }
    70% { color: rgb(240, 193, 107); }
    80% { color: rgb(238, 158, 158); }
    90% { color: rgb(189, 102, 102); }
}

@keyframes anime-cycle {
    0%, 100% { background-image: url(./assets/yourname.jpg); }
    10% { background-image: url(./assets/rezero.jpg); }
    20% { background-image: url(./assets/steins;gate.jpg); }
    30% { background-image: url(./assets/eva.jpg); }
    40% { background-image: url(./assets/ubw.jpg); }
    50% { background-image: url(./assets/umineko.jpg); }
    60% { background-image: url(./assets/diu.jpg); }
    70% { background-image: url(./assets/codegeass.jpg); }
    80% { background-image: url(./assets/aot.jpg); }
    90% { background-image: url(./assets/jjk.jpg); }
}   

@keyframes fanfare-jump {
    0%, 100% { transform: translateY(200%); }
    50% { transform: translateY(0%); }
}

@keyframes jumpscare {
    to {
        transform: scale(50);
    }
}

@media (orientation : portrait) {
    .world-map {
        overflow: scroll;
    }

    h1 {
        font-size: 5vw;
    }
    
    h2 {
        font-size: 4vw;
    }
    
    p, 
    li {
        font-size: 3vw;
    }
}