* {
    margin: 0;
    font-family: 'Noto Sans JP';
}
body {
    overflow-x: hidden;
    background-image: url("../img/background.png");
}
.card {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 94px;
    height: 95%;
    min-height: 570px;
    background-color: #FFF;
    border-radius: 2px;
    box-shadow: 2px 0px 10px rgba(3,3,3,0.3);
}
.navImages {
    width: 40px;
    /*VV This assumes that card will never change width, rn it wont*/
    margin-left: 25px;
    margin-top: 20px;
}
.centerCard {
    margin-top: 100px;
}
.centerCardBtns {
    width: 25px;
    margin-left: 35px;
    margin-top: 20px;
}
hr.cardLine {
    border-top: 1px solid black;
    border-radius: 2px;
    width: 30px;
    margin-left: 32px;
    margin-top: 20px;
}
@media all and (max-height: 690px) {
    .centerCard {
        margin-top: 50px;
    }
}
@media all and (max-height: 605px) {
    .centerCard {
        margin-top: 0px;
    }
}

/*Header*/
header {
    margin-left: 160px;
    margin-top: 25px;
}
.pageTitle {
    display: inline;
}
.userSettings {
    float: right;
}
.userSettingBtns {
    height: 40px;
    margin-left: 5px;
    margin-right: 5px;
}
.profile {
    /*This has to be different to round the profile, also to push it to the right
    although it seems to margin all the other settings anyway, not a large issue*/
    height: 40px;
    margin-left: 5px;
    margin-right: 15px;
    border-radius: 40px;
}