@font-face {
    font-family: Nintendo;
    src: url(https://dl.dropbox.com/s/8w4sembeqyz4rsq/Nintendo-DS-BIOS.ttf);
}

/* Base */

* {
    box-sizing: border-box;
    cursor: url('assets/cursor/normal.cur'), auto;
}

/* pointer - for links and buttons */
a, button, a img, a div, a p {
    cursor: url('assets/cursor/link.cur'), pointer;
}

/* text - for selectable text */
input, textarea {
    cursor: url('assets/cursor/text.cur'), text;
}

/* loading */
.loading {
    cursor: url('assets/cursor/busy.cur'), wait;
}

/* not allowed - for disabled elements */
:disabled, [disabled] {
    cursor: url('assets/cursor/unavailable.cur'), not-allowed;
}

body {
    font-family: 'Nintendo';
    font-size: 16px;
    margin: 0;
    color: #000000;
    background-color: white;
    background-image: url('assets/wallpaperflare.com_wallpaper.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

a:link {
    text-decoration: none;
    margin: 0;
    padding: 0;
    cursor: url('assets/cursor/link.cur'), pointer;
    color: #7e5353;
}

h1,
h2,
h3 {
    color: #ED64F5;
}

h1 {
    font-family: Nintendo;
    font-size: 35px;
    color: white;
    background-color: #664040;
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 5px;
}

strong {
    color: #ED64F5;
}

/* Layout */

#container {
    max-width: 900px;
    margin: 0 auto;
}

a:visited {
    color: #3c0f15;
}

#flex {
    display: flex;
}

aside {
    width: 250px;
    font-size: smaller;
}

main {
    flex: 1;
    order: 2;
    display: inline;
}

#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #13092D;
}

.center-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.footer {
    text-align: center;
    font-family: Nintendo;
    font-size: 24px;
    color: #543030;
}

.footer p {
    margin: 5px;
}

.blinkies {
    display: flex;
    flex-direction: column;
    margin: 1px;
}

.blinkies img {
    height: 20px;
}

/* Header */

.header {
    height: 220px;
    background-image: url(https://i.postimg.cc/ydpscrYS/Gonchy-banner.png);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.window-body {
    overflow: visible;
}

/* Navigation */

.nav {
    text-align: center;
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 10px;
}

.nav button {
    color: white;
    font-family: 'Nintendo';
    font-size: 50px;
    display: block;
    padding: 5px 10px;
    width: 200px;
    border-width: 1px;
    border-style: inset;
    border-radius: 5px;
    filter: drop-shadow(0 0 2px gray);
}

/* Buttons */

.redbutton {
    background-image: linear-gradient(#f03d84, #ff7cb0 50%, #fd5196 50%, #ff7cb0);
    border-color: #f03d84;
}
.redbutton:hover {
    background-image: linear-gradient(#ffc0d9, #ff7cb0 50%, #fd5196 50%, #fdaacb);
    border-color: #f03d84;
}

.orangebutton {
    background-image: linear-gradient(#f07d35, #ffa66e 50%, #fd8438 50%, #ffa66e);
    border-color: #f07d35;
}
.orangebutton:hover {
    background-image: linear-gradient(#ffccac, #ffa66e 50%, #fd8438 50%, #fcc09b);
    border-color: #f07d35;
}

.yellowbutton {
    background-image: linear-gradient(#f0b136, #ffd580 50%, #fdbe40 50%, #ffd580);
    border-color: #f0b136;
}
.yellowbutton:hover {
    background-image: linear-gradient(#ffe9be, #ffd580 50%, #fdbe40 50%, #ffe1a5);
    border-color: #f0b136;
}

.greenbutton {
    background-image: linear-gradient(#7fc938, #a0f750 50%, #82cf3a 50%, #a0f750);
    border-color: #7fc938;
}
.greenbutton:hover {
    background-image: linear-gradient(#beff81, #a0f750 50%, #82cf3a 50%, #c1fc8b);
    border-color: #7fc938;
}

.bluebutton {
    background-image: linear-gradient(#14c9dd, #45ecff 50%, #14c9dd 50%, #45ecff);
    border-color: #14c9dd;
}
.bluebutton:hover {
    background-image: linear-gradient(#99eff8, #45ecff 50%, #14c9dd 50%, #93f4ff);
    border-color: #14c9dd;
}

.purplebutton {
    background-image: linear-gradient(#a037f0, #c06dff 50%, #ac41fd 50%, #c06dff);
    border-color: #a037f0;
}
.purplebutton:hover {
    background-image: linear-gradient(#ce93fc, #c06dff 50%, #ac41fd 50%, #cf90ff);
    border-color: #a037f0;
}

.brownbutton {
    background-image: linear-gradient(#543030, #854d54 50%, #5c3232 50%, #854d54);
    border-color: #3c0f15;
    color: white;
    font-family: 'Nintendo';
    font-size: 50px;
    display: block;
    padding: 5px 10px;
    width: 150px;
    border-width: 1px;
    border-style: inset;
    border-radius: 5px;
    filter: drop-shadow(0 0 2px gray);
}
.brownbutton:hover {
    background-image: linear-gradient(#815e5e, #854d54 50%, #5c3838 50%, #9e7176);
    border-color: #3c0f15;
}

/* Links buttons */

.links {
    text-align: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    place-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.links button {
    color: white;
    font-family: 'Nintendo';
    font-size: 50px;
    padding: 5px 10px;
    width: 180px;
    border-width: 1px;
    border-style: inset;
    border-radius: 5px;
    filter: drop-shadow(0 0 2px gray);
}

/* Content */

.h1 {
    font-family: Nintendo;
    font-size: 35px;
    color: white;
    background-color: #664040;
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 5px;
}

.h2 {
    font-family: Nintendo;
    font-size: 30px;
    color: #664040;
    margin: 0;
}

.todo {
    margin: 5px 5px 5px 5px;
    font-family: Nintendo;
    font-size: 24px;
    color: #7e5353;
    border: 1px dashed;
    border-radius: 5px;
    border-color: #543030;
    height: 100px;
    overflow: auto;
    background-color: white;
}

.todolist {
    list-style: none;
    padding: 5px;
    margin: 0;
    text-align: left;
}

.welcome {
    color: #7e5353;
    font-family: 'Nintendo';
    font-size: 24px;
    display: flex;
    margin-top: 10px;
    margin-bottom: 5px;
}

.welcome p {
    margin: 0;
    margin-bottom: 10px;
    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white;
}

.welcome > img:last-child {
    position: relative;
    margin-left: 100px;
    margin-top: 60px;
    z-index: 0;
}

/* Status */

#statuscafe {
    width: 280px;
    padding: 10px;
    background-color: white;
    border: 1px dashed #3c0f15;
    border-radius: 30px;
    font-size: 24px;
    text-align: left;
    position: absolute;
    top: auto;
    bottom: 0;
    margin-bottom: 205px;
    margin-left: -10px;
    z-index: 2;

}
#statuscafe-username {
    margin: 0px 10px 5px 10px;
    font-size: 20px;
    position: relative;
    z-index: 3;
}
#statuscafe-content {
    margin: 10px 5px 10px 10px;
    position: relative;
    z-index: 3;
}

.status-wrapper {
    position: relative;
    width: fit-content;
    display: inline-block;
    filter: drop-shadow(3px 3px 0px #09003350);
}

.tail {
    position: relative;
    top: 33.25px;
    margin-left: 190px;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 5px 5px 5px 5px;
    border-left: 1px dashed #3c0f15;
    border-bottom: 1px dashed #3c0f15;
    transform: rotate(-45deg);
    flex-shrink: 0;
    position: absolute;
    z-index: 2;
    clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
    
}

.floating {
    animation: float 3s ease-in-out infinite;
    z-index: 2;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.bubbles {
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.bubblesline {
    list-style: none;
    display: inline;
}

.graphics {
    background-color: #a58080;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    border-top: none;
    overflow-y: auto;
    overflow-x: hidden;
}

marquee {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    border-top: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.about {
    color: #7e5353;
    font-family: 'Nintendo';
    font-size: 24px;
    margin: 0;
    margin-top: -10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.about p {
    margin: 0;
    margin-bottom: 15px;
    margin-left: 90px;
    position: relative;
    z-index: 1;
    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white;
}

.about > img:first-child {
    margin-left: -10px;
    margin-right: -180px;
    margin-top: -47px;
    margin-bottom: -60px;
    position: relative;
    z-index: 1;
}

.box {
    background-color: #13092D;
    border: 1px solid #ED64F5;
    padding: 10px;
}

/* Visitor counter */

#visitorCounter {
    font-family: Nintendo;
    font-size: 40px;
    color: #f03d84;
    margin: 0;

    height: auto;
    width: auto;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 0px solid white;
    user-select: none;
    margin-bottom: 5px;
}
#visitorCounter::before {
    content: "you are visitor:";
    font-size: 30px;
    font-family: Nintendo;
    color: #7e5353;
}

.sitemap {
    text-align: left;
    column-width: auto;
    column-count: 3;
    column-height: auto;
    column-wrap: auto;
    display: block;
}

.projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}

.projects div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    vertical-align: text-bottom;
    border: 1px dashed #543030;
    border-radius: 5px;
    background-color: white;
}

.projects p {
    margin: 5px;
    color: #7e5353;
    font-family: 'Nintendo';
    font-size: 30px;
    width: 200px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.projects img {
    width: 200px;
    height: 200px;
    border-radius: 5px;
    margin-bottom: 5px;

}

.autism-creatures {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin: 20px;
    column-count: 2;
    margin: 0;
    color: #7e5353;
    font-family: 'Nintendo';
    font-size: 24px;
}

.autism-creatures div {
    margin: 5px;
    align-items: center;
    justify-content: center;
}

.autism-creatures .right {
    margin: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.autism-creatures p {
    margin: 0px;
}

.autism-creatures .button-group {
    display: flex;
    gap: 5px;
}

.autism-creatures button {
    width: 200px;
    font-size: 40px;
}

.autism-creatures img {
    width: 100%;
    height: 225.55px;
    border-radius: 5px;
}

.autismopedia-card {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 16px;
    align-items: start;
}

.autismopedia-card img.portrait {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.autismopedia-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.autismopedia-info .label-row {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
}

.autismopedia-info .label-row .icon {
    width: 50px;
    height: auto;
}

.autismopedia-info .label-row .custom-h {
    height: 50px;
    width: auto;
}

.autismopedia-info p {
    margin: 0;
    color: #7e5353;
    font-family: 'Nintendo';
    font-size: 24px;
    text-align: right;
}

.grow {
  transition: all 0.2s ease-in-out;
}

.grow:hover {
  transform: scale(1.1);
}

  lol,
  .img2 {
    /* album's cover image u can change the size! */
    position: relative;
    width: 100px;
    height: 100px;
    background-color: black;
    color: black;
    z-index: 1;
  }

  .img1 {
    /* cd image u can change the size too */
    position: absolute;
    width:auto;
    height:90px;
    top: 6px;
    left: 55px;
    -webkit-animation: spin 2s linear infinite;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
  }

  .img1 hover {
    cursor: help;
  }

  @-moz-keyframes spin {
    100% {
      -moz-transform: rotate(360deg);
    }
  }

  @-webkit-keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  .img1:hover {
    /* this makes the cd stop spinning when hovering! */
    -webkit-animation: pop 0.3s ease;
  }

/* Text colours */

.pink   { background-color: rgba(255, 255, 255, 0); color: #f03d84; }
.orange { background-color: rgba(255, 255, 255, 0); color: #f07d35; }
.yellow { background-color: rgba(255, 255, 255, 0); color: #f0b136; }
.green  { background-color: rgba(255, 255, 255, 0); color: #7fc938; }
.blue   { background-color: rgba(255, 255, 255, 0); color: #14c9dd; }
.purple { background-color: rgba(255, 255, 255, 0); color: #a037f0; }

/* Scrollbar */

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(194, 194, 194);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(#ff7cb0, #ffa66e, #ffd580, #a0f750, #45ecff, #c06dff);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#ffc0d9, #ffccac, #ffe9be, #beff81, #99eff8, #ce93fc);
}

/* Responsive */

@media only screen and (max-width: 800px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}