html, body{
    margin:0;
    padding: 0;
    width:100%;
    min-height: 100%;
    min-width:600px;
}
body{
    background-color: #000;/*canvas fallback*/
}
@font-face {
    font-family: "PataponFont";
    src: url("https://rnielikki.github.io/PataponFarmingInfo/rarepon/MojiponStd-Regular.otf");
}
@font-face {
    font-family: "CaveatBrush";
    src: url("./CaveatBrush-Regular.ttf");
}
.main{
    position: relative;
    width:100%;
    overflow: hidden;
    height:80vh;
    margin-bottom: -1px;
}
.main > canvas{
    position: absolute;
    top:0;left:0;
}
#main-image{
    z-index: -3;
}
#main-image2{
    z-index: -2;
}
.main, .download{
    font-family: "PataponFont";
}
.main, .main-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.main h1{
    margin: 0 5rem;
    padding: 0;
    font-weight: normal;
    color:#fff;
    font-size:12vh;
    text-align: center;
}
.main h1 > img{
    width:100%;
    max-width: 800px;
}
.subtitle{
    color: #6f8fbf;
    font-size: 2.5rem;
    margin: 0;
    padding:0 2.5rem;
}
.download{
    text-decoration: none;
    font-size:min(50vw,8vh);
    color: #a2ddff;
    background: #000 linear-gradient(0, #101035,#001);
    padding: 0em 0.75em 0.15em 0.75em;
    margin-top: 3rem;
    border-radius: 0.5em;
    border:1px solid #303060;
}
.download:not(.download-disabled):hover, .download:not(.download-disabled):focus{
    color:#71cbff;
    background:#2d2d4e linear-gradient(0, #2b2b60,#282874);
    border:5px solid #9cacff;
    cursor:pointer;
}
.dday{
    border: 5px solid #910c6e;
    border-radius: 0.4em;
    color: #ff13b6;
    font-size: min(45vw,10vh);
    padding: 0 0.4em;
    transform: rotate(-30deg);
    position: absolute;
    top: 40vh;
    left: 50vw;
    box-shadow: 0 0 10px #a30a7a;
    text-shadow: 0 0 10px #c10d58;
}
.download-disabled{
    color: #37464e;
    background: #5d566c;
    border: 5px solid #414454;
}
.main-footer{
    color:#fff;
    font-size:2rem;
}
/* card content */
.card{
    width:100%;
    display:flex;
    justify-content: left;
    align-items: center;
    padding: 2rem 5rem;
    box-sizing: border-box;
    gap:5rem;
    row-gap:5rem;
}
.card:nth-child(odd){
    background-color:#381c56;
    flex-direction: row;
}
.card:nth-child(even){
    background: #22183a;
    flex-direction: row-reverse;
}
.card-image{
    width: 15rem;
    border-radius: 50%;
    background-color: #9ec3e9;
    border: 10px solid #e8e9e0;
}
.card-desc{
    text-align: left;
    color:#fff;
}
.card-desc h2{
    font-size:3rem;
    color:#ffffa6;
    font-weight: normal;
    text-align: center;
    font-family: "CaveatBrush";
}
.card-desc{
    font-size:1.5rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.card-video{    
    gap: 0;
    row-gap: 0px;
    row-gap: 0;
    flex-direction: column !important; /*haha damn I hate this*/
    padding-top: 0;
}
/*footer*/
footer{
    background-color: #000;
    color: #efecef;
    text-align: center;
    font-size: 1.25rem;
    padding: 1rem;
    font-family:Arial, Helvetica, sans-serif;
}
footer a{
    color:#9cacff;
    font-weight: bold;
    text-decoration: none;
}
footer a:focus, footer a:hover{
    color:#ff13b6;
}
@media screen and (max-width:1000px){
    .card:nth-child(odd), .card:nth-child(even){
        flex-direction: column;
        padding:4rem 3rem 2.2rem 3rem;
        gap:1rem;
    }
}
.main-footer > a{
    color: #9ca8e3;
}
.main-footer>a:focus, .main-footer >a:hover{
    color: #ff9fdd;
    background-color: #000000aa;
    border: 3px solid #606060;
}