* {
    margin: 0;
    border: 0;
    box-sizing: content-box;
}

body {
    background: url(https://i.pinimg.com/1200x/e2/e5/dd/e2e5dd702448ef3beddb7eeed549f0ee.jpg) 100%;
    font-family: "Jersey 15", sans-serif;
    font-weight: lighter;
    letter-spacing: 0.7px;
    font-style: normal;
    color: aliceblue;
    display: flex;
    flex-direction: column;
    align-content: space-evenly;
    scrollbar-color: rgba(105, 35, 35, 0.8) rgba(204, 102, 102, 0.65);
}


.web-container {
    width: 1300px;
    max-height: 900px;
    margin: 30px;
    position:fixed ;
    max-width: 1300px;
    display:grid;
    justify-content: center;
    margin-left: 15%;
}


.spacer {
    height: 5px;
}

#main_header {
    background: linear-gradient(to bottom,#b65b5b8c 0,#c048488c 15%,#881a1ab0 50%,#7a0e0e94 60%,#690e0ea6 90%,#2905058e 100%);
    border-top: 1px solid #474747;
    border-top-right-radius: 40px;
    border-left: 1px solid #474747;
    border-top-left-radius: 40px;
    border-right: 1px solid #474747;
    padding: 15px 10px 13px 30px;
    backdrop-filter: blur(3px) saturate(100%);
    box-shadow: rgba(0,0,0,.25) 0 14px 28px,rgba(0,0,0,.22) 0 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 10
}

.banner-img {
    height: auto;
    width: 400px;
    margin: 15px;
    border: 0px;
}

#navandcontent {
    display: flex;
}

.nav-titles {
    background: linear-gradient(to bottom,#fc9a9a96 0,#f38383a6 10%,#df121293 50%,#b90f0f86 50%,#c01313a2 80%,#df595994 100%);
    box-shadow: rgba(0,0,0,.3) 0 3px 8px;
    border-top: 1px solid #474747;
    border-left: 1px solid #474747;
    border-bottom: 1px solid #474747;
    border-right: 1px solid #474747;
    padding: 3px;
    margin-bottom: 10px;
    color: #fff
}

.nav-categories {
    background: rgba(255, 255, 255, 0.562);
    border: 1px solid #c03d3d;
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin-bottom: 3px;
    border-radius: 5px;
}

#navigation_menu {
    background: linear-gradient(100deg, rgb(255, 226, 226) 50%, rgb(233, 187, 187) 100%);
    border-right: 1px solid #474747;
    border-left: 1px solid #474747;
    border-bottom: 1px solid #474747;
    border-bottom-left-radius: 40px;
    backdrop-filter: blur(3px);
    box-shadow: rgba(255, 148, 148, 0.25) 0 14px 28px, rgba(170, 0, 0, 0.22) 0 10px 10px;
    display: block;
    height: 712px;
    width: 150px;
    min-width: 119px;
    max-width: 450px;
    padding: 8px 11px 14px 11px;
    overflow: auto;
}

#navigation_menu div {
    display: flex;
    align-items: center
}

.nav-active {
    background: linear-gradient(to bottom,rgba(196,194,194,.2) 0,rgba(194,193,193,.2) 60%,rgba(214,214,214,.3) 60%,rgba(255, 144, 144, 0.8) 100%)!important;
    border: 1px solid #bbb!important;
    color: #2c0000!important;
    text-shadow: none
}

.nav-active,.nav-inactive {
    border: 1px solid #0f0f0f;
    border-radius: 5px;
    color: #3b0505;
    display: flex;
    align-items: center;
    margin: auto auto 2px auto;
    width: 93%;
    position: relative
}

.nav-active:before,.nav-inactive:before {
    background: linear-gradient(to bottom,rgba(117,117,117,.7) 0,rgba(255,255,255,.1) 100%);
    border-radius: 20px;
    position: absolute;
    content: "";
    height: 11px;
    width: 90%;
    top: 0;
    left: 5%;
    opacity: .3
}

.nav-inactive {
    background: linear-gradient(to bottom,rgba(230,230,230,.2) 0,rgba(238,238,238,.2) 60%,rgba(173,173,173,.3) 60%,rgba(110,110,110,.3) 100%);
    border: 1px solid #bbb
}

.nav-inactive:hover {
    background: linear-gradient(to bottom,rgba(255,255,255,.25) 0,rgba(117,117,117,.2) 20%,rgba(92,92,92,.2) 50%,rgba(43,43,43,.3) 50%,rgba(161,161,161,.3) 100%);
    transform: scale(1.03);
    color: #ff0000;
}

.nav-active:hover {
    background: linear-gradient(to bottom,rgba(255,255,255,.25) 0,rgba(117,117,117,.2) 20%,rgba(92,92,92,.2) 50%,rgba(43,43,43,.3) 50%,rgba(161,161,161,.3) 100%);
    transform: scale(1.03);
    color: #ff0000;
}


#maincontent {
    background: rgba(255, 255, 255, 0.568);
    border-right: 1px solid #3b3b3b;
    border-bottom: 1px solid #3b3b3b;
    border-bottom-right-radius: px;
    backdrop-filter: blur(3px) saturate(250%);
    box-shadow: rgba(0,0,0,.25) 0 14px 28px,rgba(0,0,0,.22) 0 10px 10px;
    color: #dadada;
    padding: 12px 10px 8px 10px;
    height: 712px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

.me-article {
    display: flex;
}

#personal-info {
    padding: 20px;
    font-size: larger;
}

h1,h2,h3 {
    background: linear-gradient(to bottom, #ffffff 0, #E2C8CB 10%, #E39A9D, #EFC4C6);
    border: 2px solid #66586d;
    border-bottom: 2px solid #66586d;
    border-radius: 5px;
    color: #823A3A;
    font-weight: lighter;
    padding: 7px;
}

a {
    color: #992626;
}

.pfp-img {
  height: 315px;
  width: auto;
  border-radius: 20px;
  margin: 15px;
  margin-top: 35px;
}

.pfp-img hover {
  transform: scale(5);
  transition: transform 10px ease-in-out;
}

.art-img {
    height: auto;
    width: 400px;
    margin: 15px;
    border: 0px;
    border-radius: 15px;
    box-shadow: 0px 8px 5px #050504;
}

.art-img:hover {
    transform: scale(1.05);
    transition: transform 10px ease-in-out;
    will-change: transform;
}


#art-banner {
    border-radius: 15px;
    height: auto;
    width: 900px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#comms {
  display: flex;
  flex-direction:row ;
}

#comms-sections {
  display: flex;
}

#comms-sec {
  margin: 10px;
  justify-content: space-between;
}

#comm-img {
  height: auto;
  width: 200px;
  border-radius: 20px;
  margin: 30px;
  border: 0px;
  box-shadow: 0px 8px 5px #0505045e
}

.description {
    padding: 7px;
    color: #050504;

}

.divborders {
    background-image: linear-gradient(rgba(48,48,48,.1),rgba(26,26,26,.1),rgba(26,26,26,.1));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 8px rgba(255,255,255,.1),0 5px 5px rgba(0,0,0,.5);
    border: 1px solid #686868;
    padding: 5px;
    margin: 8px auto 8px auto
}

.aero-borders {
    border: 1px solid #4b4b4b
}

.styled-containers {
    background: rgba(255, 255, 255, 0.83);
    box-shadow: rgba(0,0,0,.3) 0 3px 8px;
    padding: 10px 10px 10px 10px;
    max-width: auto;
}

p {
    color: #050504;
}

/* blog stuff */

.post-title {
    background: linear-gradient(to bottom, #ffffff 0, #E2C8CB 10%, #E39A9D, #EFC4C6);
    border: 2px solid #66586d;
    border-bottom: 2px solid #66586d;
    border-radius: 5px;
    color: #000000;
    font-weight: lighter;
    padding: 7px;
}

#chatroom {
  margin: 48px;
  margin-top: auto;
}











@font-face {
  font-family: "myriad";
  src: url("https://files.catbox.moe/s0igcb.OTF");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.3s;
  list-style: none;
}


.ipod {
  background: #ececec;
  width: 240px;
  height: 360px;
  border-radius: 20px;
  position: relative;
  box-shadow: inset 5px 0px 15px 10px #00000090;
}

.ipod .screen {
  background: #fff;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 15px;
  transform: translate(-50%, 0);
  width: 200px;
  height: 160px;
  border-radius: 8px;
  border: 2px solid #aaa;
  box-shadow: inset 0 0 0px 2px #222;
}

.ipod .controls {
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translate(-50%, 0);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 0.5px solid #ccc;
  box-shadow: inset 0px 0px 5px 1px #00000050;
}

.ipod .controls:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ececec;
  box-shadow: inset 24px 24px 48px #c6c6c6, inset -24px -24px 48px #ffffff;
  border: 0.5px solid #ccc;
}

.ipod .controls .fa-fast-backward {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
  color: #aaa;
  font-size: 1.2em;
  cursor: pointer;
}

.ipod .controls .fa-fast-backward:active {
  color: #888;
}

.ipod .controls .fa-fast-forward {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
  color: #aaa;
  font-size: 1.2em;
  cursor: pointer;
}

.ipod .controls .fa-fast-forward:active {
  color: #888;
}

.ipod .controls .menu {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translate(-50%, 0);
  color: #aaa;
  font-size: 0.9em;
  font-weight: 700;
  border: 0;
  outline: 0;
  background: none;
  cursor: default; /* Keeps the menu button but disables interaction */
}

.ipod .controls .menu:active {
  color: #888;
}

.ipod .controls .play-pause-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  border: 0;
  outline: 0;
  background: none;
  color: #aaa;
  font-size: 1em;
  cursor: pointer;
}

.ipod .controls .play-pause-btn:active {
  color: #888;
}

.ipod .screen .music {
  padding: 15px;
  display: flex;
  gap: 15px;
}

.ipod .screen .music img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  -webkit-box-reflect: below 2px
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
}

.ipod .screen .music .content .name {
  font-size: 0.95em;
}

.ipod .screen .music .content .singer {
  font-size: 0.55em;
  font-family: "myriad";
}

.ipod .screen .music .content .date {
  font-size: 0.85em;
  font-weight: 700;
}

.ipod .screen .bar-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 0.85em;
  width: 100%;
  position: absolute;
  bottom: 30px;
}

.ipod .screen .bar-box .bar {
  width: 80px;
  height: 10px;
  font-family: "myriad";
  border: 1px solid #aaa;
}

.ipod .screen .bar-box .bar .progress {
  width: 0%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    #f2f6f8 0%,
    #d8e1e7 50%,
    #b5c6d0 51%,
    #e0eff9 100%
  );
}