@import url(https://fonts.bunny.net/css?family=alegreya-sc:700|annie-use-your-telescope:400|andika:400,400i,700,700i|butcherman:400|orum:400);
@import url(https://fonts.bunny.net/css?family=atma:300|jetbrains-mono:400);

@keyframes goose {
	0%,
	100% {
		transform: rotate(0deg);
        transform: scale(2);
		transform-origin: 50% 50%;
	}

	10% {
		transform: rotate(8deg);
        transform: scale(1.2);
	}

	20%,
	40%,
	60% {
		transform: rotate(-10deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(10deg);
	}

	80% {
		transform: rotate(-8deg);
	}

	90% {
		transform: rotate(8deg);
	}
}

body {
    background-color:darkslategray;
    padding: 0;
    margin: 0;
}

.code {
    font-family: 'JetBrains Mono', monospace;
}

.overlay {
    z-index: 10;
    width: 105%;
    height: 105%;
    pointer-events: none;
    position: fixed;
    top: 0;
    background-color: black;
    mask-image: linear-gradient(to right, 
        rgba(1, 1, 1, 0.8) 0%, 
        rgba(1, 1, 1, 0) 10%,
        rgba(1, 1, 1, 0) 80%,
        rgba(1, 1, 1, 0.8) 100%);
}

.image-header {
    z-index: -1;
    position: relative;
    width: 100%;
    top: -23vw;
}

.image-header img {
    width: 100%;
    position: absolute;
    mask-image: linear-gradient(to bottom, 
        rgba(1, 1, 1, 1) 0%, 
        rgba(1, 1, 1, 1) 65%,
        rgba(0, 0, 0, 0) 100%);
}

.main {
    z-index: 1;
    position: relative;
    font-family: 'Andika', sans-serif;
    padding-top: 23vw;
    margin-left: 15%;
    margin-right: 15%;
    color: rgb(83, 34, 10);
}

.nav-stack {
    z-index: 100;
    display: flex;
    flex-direction:column;
    z-index: 0;
    position: absolute;
    left: 5%;
    right: 10%;
    top: 0vw;
}

.nav-btn {
    /*background-color:rgb(100, 85, 69);
    box-shadow: 2px 1px 5px 0px rgba(0,0,0,0.75);
    transition: 
        box-shadow 1s linear
        z-index 1s linear;
    */
    width: 4vw;
    height: 4vw;
    padding: 0.5vw;
    text-align: left;
    align-content: left;
    border-radius: 0.25rem;
}

.nav-btn:hover {
    z-index: 10;
    box-shadow: 1px 1px 5px 0px rgba(241, 241, 233, 0.75);
}

.nav-btn img {
    width: 100%;
    /*background-color:rgb(201, 170, 139);
    box-shadow: 2px 1px 5px 0px rgba(0,0,0,0.75);
    */
    border-radius: 0.25rem;
    
}

.goose {
    animation: goose 1.5s cubic-bezier(0.64, 0, 0.78, 0) 1s 1000000 alternate forwards;
}

.oops {
    color: brown;
    font-size: 10vw;
    align-content: center;
    text-align: center;
    font-family: 'Butcherman', display;
    transform: rotate(10deg);
}

.oops-sub {
    font-size: 2vw;
    font-family: 'Atma', display;
    font-size: 2.5vw;
    align-content: center;
    text-align: center;
}

.goose img {
    width: 100%;
}

.header {
    color: rgb(255, 255, 255);
    text-shadow: -4px 1px 2px rgba(0,0,0,0.6);
    position: absolute;
    left: 20vw;
    top: 2vh;
    font-size: 5vw;
    font-family: 'Butcherman', display;
    transform: rotate(-10deg);
}

.footer {
    color: rgb(201, 170, 139);
    align-content: center;
    text-align: center;
}

.content {
    z-index: 1;
    padding: 3%;
    min-height: 75%;
    background-color:rgb(215, 191, 165);
    border-radius: 0.3rem;
    box-shadow: 5px 3px 11px 0px rgba(0,0,0,0.75);
}

.content-holder {
    background-color:rgb(162, 136, 108);
    padding: 1%;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Alegreya SC', serif;
    color: brown;
}

x-handwritten {
    font-family: 'Annie Use Your Telescope', handwriting;
}

.phrase-of-day {
    font-size: 1.5vw;
    font-family: 'Atma', display;
    margin-top: -1vh;
    margin-left: 10vh;
    transform: rotate(4deg) scaleX(1.3);
}