@font-face {
    font-family: MS Sans; 
    src: url(fonts/ms-sans-serif-1.ttf);
}
::-webkit-scrollbar{
    display: none;
}
:root {
    --pink: #ff899f;
}
body {
    background-image: url(images/backgrounds/starsdark.png);
    background-size: 100px;
    font-family: MS Sans;
    color: var(--pink);
    text-shadow: 1px 1px #7f0c30;
    font-size: 14px;
}
a {
    text-decoration: none;
    color: white;
    cursor: pointer;
}
p {
    margin-top: 0;
}
hr {
    border: var(--pink) solid 1px;
}
.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    bottom: 53px;
}
.main {
    display: inline-grid;
    grid-template-rows: 155px repeat(2, 37px) repeat(6, 130px) 100px 37px;
    grid-template-columns: repeat(4, 180px);
    background-color: black;
    border: double 4px white;
    border-radius: 26px;
    box-shadow: 0 0 43px 0 rgba(244, 90, 124, 0.49);
}
.item {
    margin: 6px;
    background-color: black;
    border: solid 1px white;
}
#one {
    grid-area: 1 / 1 / 1 / span 4;
    border-radius: 18px 18px 0 0;
    background-image:  url(images/backgrounds/title.png), url(images/backgrounds/vectorflourish.jpg);
    background-size: 498px, cover;
    background-repeat: no-repeat, repeat;
    background-position-y: -12px, 120px;
    background-position-x: -3px, 0;
    margin-bottom: 4px;
} /*header*/
/*MARQUEE 1 START*/
.two {
    grid-area: 2 / 1 / span 1 / span 4;
    margin-top: 4px;
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
    padding-top: 4px;
}
.tip {
    position: absolute;
    left: max(calc(140px * 7), 100%);
    width: 150px;
    height: 20px;
    animation: spin 14s linear infinite;
}
.bl1 {
    background-image: url(images/graphics/actual%20blink/artist.gif);
    animation-delay: calc(14s / 7 * (7 - 1) * -1);
}
.bl2 {
    background-image: url(images/graphics/actual%20blink/emoboyz.gif);
    animation-delay: calc(14s / 7 * (7 - 2) * -1);
}
.bl3 {
    background-image: url(images/graphics/actual%20blink/deftones.gif);
    animation-delay: calc(14s / 7 * (7 - 3) * -1);
}
.bl4 {
    background-image: url(images/graphics/actual%20blink/pinkie%20pie.gif);
    animation-delay: calc(14s / 7 * (7 - 4) * -1);
}
.bl5 {
    background-image: url(images/graphics/actual%20blink/scene%20freak.gif);
    animation-delay: calc(14s / 7 * (7 - 5) * -1);
}
.bl6 {
    background-image: url(images/graphics/actual%20blink/soad.webp);
    animation-delay: calc(14s / 7 * (7 - 6) * -1);
}
.bl7 {
    background-image: url(images/graphics/actual%20blink/southpark.gif);
    animation-delay: calc(14s / 7 * (7 - 7) * -1);
}
@keyframes spin {
    to {left: -150px;}
}
/*MARQUEE 1 END*/
#three {
    grid-area: 3 / 1 / span 1 / span 4;
    margin-top: 4px;
    padding-top: 4px;
    display: flex;
    justify-content: center;
} /*nav*/
#three a {
    margin-inline: 15px;
}
#three span {
    position: relative;
    bottom: 2px;
}
#four {
    grid-row: 4 / span 1;
    grid-column: 1 / span 1;
    padding: 5px;
} /*thoughts*/
#five {
    grid-row: 5 / span 1;
    grid-column: 1 / span 1;
} /*fanlist*/
#six {
    background-image: url(images/gary.png);
    background-repeat:  no-repeat;
    background-size: 233px;
    background-position: 193px 126px;
    grid-row: 4 / span 2;
    grid-column: 2 / span 2;
    padding: 12px;
} /*intro*/
#six p {
    text-align: justify;
}
#intro{
    width: 342px;
    display: block;
    shape-outside: url(images/me2.png);
    shape-margin: 22px;
    position: relative;
    bottom: 55px;
    left: 3px;
    cursor: help;
}
#seven {
    grid-row: 4 / span 2;
    grid-column: 4 / span 1;
    padding: 8px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
} /*site*/
#seven table {
    border: dashed 1px;
    padding: 2px;
}
#seven td {
    border: dashed 1px;
    padding: 5px;
    margin: 1px 0 2px 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}
#seven img {
    margin-left: 25%;
    margin-top: 3px;
    margin-bottom: 3px;
}
#eight {
    grid-row: 6 / span 5;
    grid-column: 1 / span 1;
    padding: 12px;
    overflow-x: hidden;
} /*update*/
.short {
  display: -webkit-box;
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
#eight a {
    color: var(--pink);
    text-decoration: underline;
}
#eight p {
    color: white;
}
#nine {
    padding: 12px;
    grid-row: 6 / span 3;
    grid-column: 2 / span 2;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
} /*stuff*/
#ten {
    grid-row: 9 / span 2;
    grid-column: 2 / span 3;
} /*song*/
#songbutton {
    border-radius: 5px; 
    background-color: black; 
    color: var(--pink); 
    border-color: var(--pink); 
    font-family: MS Sans;
    padding: 4px;
    position: relative;
    bottom: 61px;
    left: 158px;
    cursor: pointer;
}
#eleven {
    grid-row: 6 / span 3;
    grid-column: 4 / span 1;
} /*web*/
#cont {
    height: 376px; 
    width: 167px; 
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
}
#twelve {
    grid-row: 11 / span 1;
    grid-column: 1 / span 4;
    border-radius: 0 0 18px 18px;
    margin-top: 4px;
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
    padding-top: 4px;
} /*mark*/
.b1 {
    background-image: url(images/graphics/actual%20blink/hsfan.png);
    background-size: 150px;
    animation-delay: calc(14s / 7 * (7 - 1) * -1);
}
.b2 {
    background-image: url(images/graphics/actual%20blink/cheese.gif);
    animation-delay: calc(14s / 7 * (7 - 2) * -1);
}
.b3 {
    background-image: url(images/graphics/actual%20blink/chiikawa.gif);
    animation-delay: calc(14s / 7 * (7 - 3) * -1);
}
.b4 {
    background-image: url(images/graphics/actual%20blink/fuckhs.gif);
    animation-delay: calc(14s / 7 * (7 - 4) * -1);
}
.b5 {
    background-image: url(images/graphics/actual%20blink/got%20love.gif);
    animation-delay: calc(14s / 7 * (7 - 5) * -1);
}
.b6 {
    background-image: url(images/graphics/actual%20blink/millionaires.gif);
    animation-delay: calc(14s / 7 * (7 - 6) * -1);
}
.b7 {
    background-image: url(images/graphics/actual%20blink/rawr.gif);
    animation-delay: calc(14s / 7 * (7 - 7) * -1);
}
footer {
    font-weight: bold;
    margin-top: 16px;
}
#homestuckies {
  scale: 0.8;
}
#doodlering {
    position: relative;
    top: 6px;
    scale: 0.95;
}
#siwebring {
  text-shadow: none;
    color: black;
}
#siwebring p {
  margin-block: 1em;
}
#siwebring a {
    color: black;
}