@import url("https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Life+Savers:wght@400;700;800&display=swap");

@keyframes buoyancy {
    0% {
        transform: translate(0);
    }

    33% {
        transform: translate(0, -0.5em);
        transition: ease;
    }

    66% {
        transform: translate(0, 0.5em);
    }
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(0.5deg);
    }

    40% {
        transform: rotate(-1deg);
    }

    60% {
        transform: rotate(1deg);
    }

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

    100% {
        transform: rotate(0deg);
    }
}


.freckle-face-regular {
    font-family: "Freckle Face", system-ui;
    font-weight: 400;
    font-style: normal;
}

.life-savers-regular {
    font-family: "Life Savers", serif;
    font-weight: 400;
    font-style: normal;
}

.life-savers-bold {
    font-family: "Life Savers", serif;
    font-weight: 700;
    font-style: normal;
}

.life-savers-extrabold {
    font-family: "Life Savers", serif;
    font-weight: 800;
    font-style: normal;
}

body {
    background: linear-gradient(#113e45, #549a86);
    background-attachment: fixed;
    margin: 5px;
    padding: 5px;
    font-family: "Life Savers", serif;
    font-weight: 700;
    align-items: center;
    display: auto;
    color: #031920;
}

a {
    color: #11767b;
    font-size: 1.15em
}

p {
    font-size: 1.15em
}

a:hover {
    color: #da8b76;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Freckle Face", system-ui;
    margin: 5px 0;
}

h1 {
    font-size: 2.75em;
}

h2 {
    font-size: 2.5em;
}

h3 {
    font-size: 2.25em;
}

h4 {
    font-size: 1.75em;
}
h5 {
    font-size: 1.5em;
}

h6 {
    font-size: 1.25em;
}

* {
    cursor: url(https://64.media.tumblr.com/a577319bceacd7da5e5071e419a19042/0a01682dc8770e2c-0f/s75x75_c1/8fc73b22676146f4eb7583e95aabd8bfadfbd340.gifv),
        auto;
}

.container {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    width: 80%;
    position: relative;
    justify-content: center;
}

.main-content {
    background-color: #bedcd4;
    height: 650px;
    padding: 10px;
    width:70%;
    margin: 0 5px 0 0;
}

.navbar {
    background-color: #0a262d;
    height: 30px;
    padding: 5px;
    width: auto;
    margin: 5px ;
    font-family: "Freckle Face", system-ui;
    display: flex;
    flex-direction: row;
}

.navbar ul {
  list-style-type: none;
  margin: 5px auto;
  padding: 0;
display: flex
}

.navbar ul li {
 margin: 0 auto;

}

.navbar ul li a {
  display: auto;
  color: #bedcd4;
  text-align: center;
  padding: 5px;
  text-decoration: none;
}

.navbar ul li a:hover {
color: #76dad1;
}

.side-content {
    height: 650px;
    width: 30%;
    margin: 0;
    margin-right: 5px;
    background-color: #bedcd4;
    padding: 10px;
    overflow-y: auto;
    overflow-x: clip;
}

.side-content ul {
    list-style-type: none; 
    padding: 0; 
    margin: 0
}

.wiggly {
    width: auto;
}

.row-btns {
    display: flex; flex-direction: row; margin: auto 0; justify-content: center
        ;
        flex-wrap: wrap
}

.wiggly:hover {
    animation-name: wiggle;
    animation-duration: 1s;
    transform-origin: center;
}

textarea {
    border-image-slice:
95 150;
border-image-width:
15px 20px;
border-image-outset:
10px 15px;
border-image-repeat:
stretch;
border-image-source:
url("https://64.media.tumblr.com/c729dfadb0ae1225b72168a24ccdb2ab/7f5b6a831c7d5288-40/s1280x1920/c7c018242cf0628ee8504fbac02a34495f732d1d.pnj");
border-style:
solid;
width: 175px;
height: 100px;
flex-wrap: wrap;
overflow-y: auto;
background-color: #95c7b9;
display: block;
margin: 10px auto;
padding: 5px 10px;
font-family: monospace;
scrollbar-width: none;
}

@media only screen and (max-width: 600px) {
    .container {
        width: 100%;
        height: auto;
        display: flexbox;
        flex-direction: column;
    }
}

@media only screen and (max-width: 600px) {
    .main-content {
        width: auto;
        height: auto;
        display: flexbox;
        flex-direction: column;
    }
}

@media only screen and (max-width: 600px) {
    .side-content {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .row-btns {
        display: none;
    }
}


@media only screen and (min-width: 600px) {
    .navbar {
        display: none;
    }
}