* {
    box-sizing: border-box;
}

h1 {
    font-family: Ubuntu, sans-serif;
    color: #023047;
}

h2 {
    font-family: Ubuntu, sans-serif;
    color: #023047;
}

h6 {
    font-family: Ubuntu, sans-serif;
    color: #023047;
}

p {
    font-family: "Courier New", monospace;
    color: #000038;
    max-width: 85%;
}

body {
    margin: 0;
    background-image: url(https://oceaniccourt.neocities.org/img/background.jpg);
}

ul {
    font-family: "Courier New", monospace;
    color: #000038;
    max-width: 85%;
}

.flex-container {
    display: flex;
    flex-direction: row;
}


/* Left and right column */
.right {
    width: 25%;
}

.left {
    width: 15%;
}

/* Middle column */
.middle {
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.row::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {

    .right,
    .left,
    .middle,
    .article,
    .sidenav,
    #dio,
    .icon {
        width: 100%;
    }

}

.sidenav {
    list-style-type: none;
    background-image: url(https://oceaniccourt.neocities.org/img/jong-marshes-79mNMAvSORg-unsplash.jpg);
    position: fixed;
    height: 100%;
    width: 14%;
    overflow: auto;
    text-align: center;
}

.sidenav a {
    display: block;
    color: whitesmoke;
    padding: 8px 16px;
    text-decoration: none;
}

.sidenav a.active {
    background-color: #4b88c4;
    color: white;
}

.sidenav a:hover:not(.active) {
    background-color: #2e5881;
    color: white;
}

article {
    float: right;
    width: 100%;
    background-color: #ebf4fd;
    border-color: #023047;
    border-left-style: solid;
    border-width: 10px;
    padding: 10px;
    margin-top: 1%;
    max-width: 1000px;
    z-index: 1;
}

.icon {
    position: absolute;
    right: 0;
    width: 40%;
}

/**status cafe shit**/

#statuscafe {
    padding: .5em;
    background-color: #ebf4fd;
    border: 0px solid #02283C;
}

#statuscafe-username {
    margin-bottom: .5em;
}

#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

/* page doll stuff */
#dio {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.scroller {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
}

.scrollercontenticon {
    display: inline-block;
      padding-left: 100%;
    animation-name: scroll-left;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.scrollercontenticon img {
    height: 80px;
    margin-right: 10px;
    vertical-align: middle;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.scrollercontenticon:hover {
  animation-play-state: paused;
}

.scrollercontentblink {
    display: inline-block;
      padding-left: 100%;
    animation-name: scroll-left;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.scrollercontentblink img {
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.scrollercontentblink:hover {
  animation-play-state: paused;
}
