@import url("https://fonts.googleapis.com/css2?family=Lato&family=Ubuntu&display=swap");

body {
    font-family: "Segoe UI", "Ubuntu", "Helvetica Neue", Arial;
    background-color: rgb(40, 40, 40);
    color: white;

    margin-left: 0;
    margin-top: 55.2px;
}

/* styles for classes that can be appended to other elements */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

.regular-padding {
    padding: 18px 24px;
}

.small-padding {
    padding: 10px;
}

.selected {
    background-color: rgb(13, 13, 13);
}

/* animations */
@keyframes rotation-keyframe {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes fade-keyframe {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes shake-keyframe {
	0% {
		transform: translate(-100%, -100%) translate(0);
	}

	20% {
		transform: translate(-100%, -100%) translate(-5px, 5px);
	}

	40% {
		transform: translate(-100%, -100%) translate(-5px, -5px);
	}

	60% {
		transform: translate(-100%, -100%) translate(5px, 5px);
	}

	80% {
		transform: translate(-100%, -100%) translate(5px, -5px);
	}

	100% {
		transform: translate(-100%, -100%) translate(0);
	}
}

/* the bar stuff */
#bar {
    overflow: hidden;
    background-color: rgb(20, 20, 20);
    position: fixed;
    
    user-select: none;

    z-index: 1;

    top: 0;
    width: 100%;
}

.button {
    display: block;
    color: white;

    text-align: center;
    text-decoration: none;
        
    font-family: "Lato", "Ubuntu", Arial;
    font-size: 16.6px;

    transition-duration: 0.4s;
}

.button:hover {
    filter: invert(100%);
    background: black;
}

/* the disclaimer */
.disclaimer {
    position: fixed;
    bottom: 0;

    font-size: 10px;
    color: rgb(60, 60, 60);

    margin-left: 10px;
    margin-bottom: 10px;
}

.disclaimer a {
    color: rgb(60, 60, 60);
    text-decoration: none;
}

/* the home page's >w< face */
#face {
    position: absolute;
    filter: invert(20%);

    left: 50%;
    top: 50%;
    
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);

    user-select: none;
}

.face-rotate {
    animation: rotation-keyframe 1.5s ease 0s 1 normal forwards;
}

/* the secrets */
.invincible {
    display: none;
}

.makoto {
    /* opacity: 0; */

    position: absolute;
    left: 98%;
    top: 97%;
    
    transform: translate(-100%, -100%);
    -webkit-transform: translate(-100%, -100%);
}

.makoto-fade {
    display: block;
    animation: fade-keyframe 7s ease 0s 1 normal forwards;
}

.makoto-shake {
    display: block;
    animation: shake-keyframe 0.2s ease 0s infinite normal forwards;
}

/* mobile device stuff */
@media screen and (max-width: 880px) {
    .button {
        font-size: 11px;
    }

    .button img {
        width: 16px;
        height: 16px;
    }

    .regular-padding {
        padding: 10px;
    }

    .small-padding {
        padding: 8px 5px;
    }

    #face {
        width: 75%;
    }
}