@font-face {
  font-family: "Courier Prime";
  src: url("./asset/Courier_Prime/CourierPrime-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("./asset/Courier_Prime/CourierPrime-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("./asset/Courier_Prime/CourierPrime-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("./asset/Courier_Prime/CourierPrime-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  font-family: "Courier Prime", monospace;
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  width: 100%;
  height: 100%;
  color: #000000;
  font-family: "Courier Prime", monospace;
}

main {
  width: 100%;
  height: 100%;
  position: relative;
}

.layer-bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.layer-middle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.layer-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}

#oscillator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#meta-container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8rem;
  display: block;
}

#brand-container {
  position: absolute;
  left: 0;
  top: 0;
  height: 8rem;
  width: 35rem;
  display: inline;
}

#app-icon {
  position: fixed;
  top: 1rem;
  left: 5rem;
  transform: translate(-50%, 0);
  width: 3.2rem;
  height: auto;
  object-fit: contain;
}

#app-title {
  position: fixed;
  color: #000000;
  top: 2rem;
  left: 8rem;
  font-size: 2rem;
}

#content-meta-container{
  position: fixed;
  top: 8rem;
  left: 0;
  width: calc(100% - 48rem);
  height: calc(100vh - 8rem);
}

#content-meta-list{
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 35rem;
  height: calc(100vh - 16rem);
  display: flex;
  flex-direction: column;
}

.content-list-item{
  position: relative;
  width: 100%;
  height: 1.5rem;
}

.content-list-item-text{
  position: absolute;
  top: 0;
  left: 8rem;
  width: calc(100% - 8rem);
  color: #000000;
  font-size: 1.5rem;
}

#content-meta-footer{
  position: absolute;
  bottom: 0rem;
  right: 0rem;
  width: 35rem;
  height: 8rem;
  display: flex;
  flex-direction: column;
}

.content-meta-footer-line{
  position: relative;
  bottom: 0rem;
  right: 2rem;
  width: 35rem;
  height: 1rem;
  text-align: right;
}

#current-time{
  display: inline;
}
#current-date{
  display: inline;
}


#content-main-container{
  position: absolute;
  top: 0rem;
  right: 8rem;
  width: 40rem;
  height: calc(100vh - 8rem);
}


#content-main-header{
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 40rem;
  height: 8rem;
}

#content-main-header-link-block{
  position: absolute;
  top: 4rem;
  left: 10rem;
  width: 40rem;
  height: 4rem;
  display: flex;
  flex-direction: row;
}

.soundcloud-link{
  position: relative;
  left: 0;
  display: inline-block;
  margin-right: 1rem;
}


.instagram-link{
  position: relative;
  left: 0;
  display: inline-block;
  margin-right: 1rem;
}


#content-main{
  position: absolute;
  top: 8rem;
  right: 0rem;
  width: 40rem;
  height: calc(100vh - 8rem);
  display: flex;
  flex-direction: column;
}

#content-main-list{
  position: absolute;
  top: 0rem;
  left: 0;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.content-main-list-item{
  position: relative;
  width: 100%;
  height: fit-content;
}


.content-main-list-item-function{
  position: relative;
  left: 0;
  top: 0;
  width: 10rem;
  height: fit-content;
  text-align: left;
}

.content-main-list-item-body{
  position: relative;
  left: 10rem;
  top: 0;
  width: calc(100% - 10rem);
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.content-main-list-item-body-title{
  position: relative;
  width: 100%;
  height: fit-content;
}

.content-main-list-item-body-desc{
  position: relative;
  width: 100%;
  height: fit-content;
}

.content-main-list-item-body-preview{
  position: relative;
  width: 100%;
  height: fit-content;
}

.content-main-list-item-body-preview-img{
  max-width: 100%;
  max-height: 30rem;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* Mobile icon sizing */
@media (max-width: 768px) {
  #app-icon {
    width: 60px;
  }

  #app-title {
    top: 1rem;
    left: 1rem;
  }
}

/* Desktop icon sizing */
@media (min-width: 1025px) {
  #app-icon {
    width: 3.2rem;
  }
  
}


/* Mobile devices */
@media (max-width: 768px) {
  :root {
    font-size: 14px;
  }

  #app-title {
    top: 0.5rem;
    left: 1rem;
    font-size: 1.5rem;
  }
}


/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    font-size: 16px;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  :root {
    font-size: 16px;
  }
}









/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Mobile/tablet touch optimizations */
  button,
  a {
    padding: 16px;
    min-height: 48px;
  }
}

/* Non-touch device optimizations */
@media (hover: hover) and (pointer: fine) {
  /* Desktop with mouse */
  button,
  a {
    padding: 8px 12px;
    cursor: pointer;
  }

  button:hover,
  a:hover {
    opacity: 0.8;
  }
}