@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    background-color:black;
    color: #fcf5ff;
    font-family: VT323 !important;
    font-size: 18px;
    background-image: url("assets/bgnew.gif");
    height:1080px;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

p {
    line-height: 18px;
}

html {
  cursor:url("https://decahedron.neocities.org/assets/cursor.png"), auto;
  height:100%;
  scrollbar-width: thin;
}

a {
  color:#bb39f7 !important;
  text-decoration: underline dotted !important;
  transition: color 0.1s !important;
  filter: drop-shadow(0px 0px 5px) !important;
}

a:hover { 
  cursor:url("https://decahedron.neocities.org/assets/pointer.png"), auto;
  color:#f36dfc !important;
}

.unlink {
  color:#fcf5ff !important;
  text-decoration: none !important;
  transition: none !important;
  filter: none !important;
}

.unlink:hover { 
  cursor:url("https://decahedron.neocities.org/assets/pointer.png"), auto;
  color:#fcf5ff !important;
}

.small {
    color:#f1d2fffb;
    font-size: 17px;
}

h1 {
  color:#f8c7ff;
}

.pagecontainer {
    display:block;
    flex:1;
}

.header {
    width:100%;
    height:150px;
    background-image: url("https://f2.toyhou.se/file/f2-toyhou-se/images/110133745_6AQ4xmDaCz8xdlH.png");
    position:relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 97%;
    top:0;
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    margin-bottom:6px !important;
    margin: -5px
}

.window {
    justify-content: center;
    display: block;
    margin: auto;
    padding: 20px;
    border-radius: 10%;
}

.taskbar {
    background: #ffebfc;
    background: linear-gradient(180deg,rgba(255, 235, 252, 1) 0%, rgba(255, 82, 255, 1) 14%, rgba(120, 45, 186, 1) 100%);
    height:22px;
    line-height: 24px;
    text-align: left;
    vertical-align: middle;
    border-radius: 10px 10px 0px 0px;
    padding:5px;
}

.windowcontent {
    display: block;
    background: #591469;
    background: linear-gradient(0deg,rgba(89, 20, 105, 1) 0%, rgba(41, 8, 48, 1) 5%, rgba(30, 5, 48, 1) 100%);
    border-radius: 0px 0px 10px 10px;
    padding:5px;
    border-color: #0301043c;
    border-style: outset;
    height:225px;
    overflow-y: scroll;
    scrollbar-color: rgb(221, 174, 239) rgba(53, 16, 82, 0.434);
    scrollbar-width: thin;
}

.twocontainer {
    margin-top:6px;
    display:inline-flex;
    width:100%;
    gap:7px;
}

.containerleft {
    width:72% !important;
    height:150px !important;
}

.containerright {
    width:28% !important;
    height:150px !important;
}

.windowcontent--norounding {
    display: flex;
    background: #591469;
    background: linear-gradient(0deg,rgba(89, 20, 105, 1) 0%, rgba(41, 8, 48, 1) 7%, rgba(30, 5, 48, 1) 100%);
    padding:5px;
    border-color: #0301043c;
    border-style: outset;
    height:225px;
    overflow-y: scroll;
    scrollbar-color: rgb(221, 174, 239) rgba(53, 16, 82, 0.434);
    scrollbar-width: thin;
}



.footer {
  background: RGB(9, 2, 20);
  background: linear-gradient(0deg, rgba(9, 2, 20, 1) 0%, rgba(35, 9, 59, 1) 96%, rgb(95, 44, 153) 100%);
  padding: 15px;
  justify-content:center;
  text-align:center;
  height:87px;
}

.rotateImg {
    transition: transform 0.5s ease;
}

.rotateImg:hover {
    transform:rotate(2deg);
    filter:drop-shadow(0px 0px 10px #e53dff44)
}


.logs {
  overflow-y: scroll;
  display: block;
}

/* class for hr */
.dot {
  border-top:3px dotted #efa8ffe0;
  border-bottom: transparent;
}


/* rainbow animation */
.gradient {
    background: linear-gradient(to right, rgb(255, 56, 248), rgb(180, 114, 255), rgb(105, 2, 189), rgb(255, 56, 248));
    background-clip: text !important;
    color:transparent;
    background-size:200% auto;
    animation: gradientAnimation 7s linear infinite;
    filter:drop-shadow(#bf1eff75 0px 0px 10px);
}
@keyframes gradientAnimation {
    0%{
        background-position: 200% 50%;
    }
    100%{
        background-position: 0% 50%
    }
}

.gradient2 {
    background: linear-gradient(to right, rgb(255, 56, 248), rgb(180, 114, 255), rgb(134, 15, 232), rgb(255, 56, 248));
    background-clip: text !important;
    color:transparent;
    background-size:200% auto;
    animation: gradientAnimation 3s linear infinite;
    filter:drop-shadow(#f01effc4 0px 0px 10px);
}
@keyframes gradientAnimation {
    0%{
        background-position: 200% 50%;
    }
    100%{
        background-position: 0% 50%
    }
}