@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap');

* {
    margin: 0;
    color: #252525;
    font-family: "Inter"
}

:root {
    background-color: #f4eddd;
}

h1, h2 {
    font-weight: 900;
    filter: drop-shadow(0 0 5px #35353550);
}

header {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:end;
}

@media screen and (max-width: 425px) {
    header {
        height: 100dvh;
    }
}

h1 {
    font-size: 100px;
    margin: 0 0 -25px 5vw
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 14.8vw;
    }
}
 
@media screen and (max-width: 425px) {
    h1 {
        margin: 0 0 0 5vw;
    }
}

h2 {
    font-size: 25px;
    margin: 0 0 50px 5vw
}

.dot {
    display: inline;
}

@media screen and (max-width: 768px) {
    h2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 10px 5vw 50px 5vw;
    }
    h2 span {
        margin: 0 10px;
    }
    .dot {
        display: none;
    }
}

@media screen and (max-width: 425px) {
    h2 {
        display: none;
    }
}

main {
    overflow: hidden;
}

.japanese {
    font-family: "Noto Sans JP";
}

.korean {
    font-family: "Noto Sans KR";
}

.simplified-chinese {
    font-family: "Noto Sans SC";
}

.traditionnal-chinese {
    font-family: "Noto Sans TC";
}

a {
    display: inline-block;
    background-color: #ff000025;
    font-size: 50px;
    width: 100vw;
    margin: 0 auto 20px auto;
    font-weight: 900;
    transition: ease-in-out .1s;
    filter: drop-shadow(0 0 5px #35353550);
    padding: 50px 5vw 0 5vw;
    text-decoration: none;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.314);
}

@media screen and (max-width: 768px) {
    a {
        font-size: 36px;
        padding: 25px 5vw 0 5vw;
        margin: 0 auto 10px auto;
    }
}

@media screen and (max-width: 425px) {
    a {
        font-size: 25px;
        padding: 25px 5vw 0 5vw;
        margin: 0 auto 10px auto;
    }
}

a:hover {
    transform: scale(101%);
}

#mkwr {
    background-image: url('./assets/img/backgrounds/mkwr-background.avif');
    color: white
}

#mk8dxr {
    background: linear-gradient(to right, #e0ffff, #ffe0ff);
    text-shadow: 0 0 10px rgba(53, 53, 53, 0.314);
}

#mk7r {
    background-image: url("./assets/img/backgrounds/mk7r-background.png");
    color: white
}

#mkwiir {
    background-image: url("./assets/img/backgrounds/mkwii-background.jpg");
    color: white
}

#mkdsr {
    background-image: url("./assets/img/backgrounds/mkds-background.png");
    color: white
}

#mkddr {
    background-image: url("./assets/img/backgrounds/mkdd-background.png");
    color: white
}

#mkscr {
    background-image: url("./assets/img/backgrounds/mksc-background.png");
    color: white
}

#mk64r {
    background-image: url("./assets/img/backgrounds/mk64-background.png");
    text-shadow: 0 0 10px rgba(53, 53, 53, 0.314);
}

#smkr {
    background-image: url("./assets/img/backgrounds/smk-background.png");
    color: white
}