/* Home */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-image: url("src/media/tundra.gif");
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.tooltip {
	position: relative;
	display: inline-block;
	font-family: '';
}

.tooltiptext {
    font-family: 'UbuntuMono';
    visibility: hidden;
    width: 120px;
    background-color: #2e2e2e;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -63px;
    transform: scale(0);
    transition: ease-in-out 150ms;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	transform: scale(1);
}

.link {
    font-family: joystix;
    font-size: .7em;
    cursor: pointer;
    color: whitesmoke;
    text-decoration: none;
  }

.link:hover {
    color: gray;
    text-decoration: none;
}

.cards {
    display: flex;
    align-items: center;
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    gap: 25px;
}

.container {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

.glitch {
    animation: glitch 725ms infinite;
    color: rgb(216, 216, 216);
	font-family: joystix;
    font-size:5.5rem;
	font-weight: 700;
	text-align: center;
    text-shadow: .05em 0 0 rgba(185, 184, 184, 0.3),-.03em -.04em 0 rgba(185, 184, 184, 0.3),.025em .04em 0 rgba(185, 184, 184, 0.3);
}

@keyframes glitch {
	0% {text-shadow: .05em 0 0 rgba(185, 184, 184, 0.3),-.03em -.04em 0 rgba(185, 184, 184, 0.3),.025em .04em 0 rgba(185, 184, 184, 0.3);}
	15% {text-shadow: .05em 0 0 rgba(185, 184, 184, 0.3),-.03em -.04em 0 rgba(185, 184, 184, 0.3),.025em .04em 0 rgba(185, 184, 184, 0.3);}
	16% {text-shadow: -.05em -.025em 0 rgba(185, 184, 184, 0.3),.025em .035em 0 rgba(185, 184, 184, 0.3),-.05em -.05em 0 rgba(185, 184, 184, 0.3);}
	49% {text-shadow: -.05em -.025em 0 rgba(185, 184, 184, 0.3),.025em .035em 0 rgba(185, 184, 184, 0.3),-.05em -.05em 0 rgba(185, 184, 184, 0.3);}
	50% {text-shadow: .05em .035em 0 rgba(185, 184, 184, 0.3),.03em 0 0 rgba(185, 184, 184, 0.3),0 -.04em 0 rgba(185, 184, 184, 0.3);}
	99% {text-shadow: .05em .035em 0 rgba(185, 184, 184, 0.3),.03em 0 0 rgba(185, 184, 184, 0.3),0 -.04em 0 rgba(185, 184, 184, 0.3);}
	100% {text-shadow: -.05em 0 0 rgba(185, 184, 184, 0.3),-.025em -.04em 0 rgba(185, 184, 184, 0.3),-.04em -.025em 0 rgba(185, 184, 184, 0.3);}
}

.noselect {user-select: none;}

/* Presence */

.presence {
    position:absolute;
    bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
    font-family: 'UbuntuMono',monospace; color: whitesmoke;
}

@font-face {font-family: 'joystix';src: url(src/font/joystix-monospace.ttf) format('truetype');}
@font-face {font-family: 'LiberationMonoRegular';src: url(src/font/LiberationMonoRegular.woff2) format('woff2');}
@font-face {font-family: 'UbuntuMono';src: url(src/font/UbuntuMono-Regular.ttf) format('truetype');}