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


::-moz-selection { /* Code for Firefox */
  color: rgb(255, 255, 255);
  background: #7C05F2
}

::selection {
  color: rgb(255, 255, 255);
  background: #7C05F2
}

body {
  cursor: url('cursor.cur'),auto;
}

@font-face {
  font-family: VCR OSD;
  src: url(VCR_OSD_MONO_1.001.ttf);
}


@font-face {
  font-family: Alkhemikal;
  src: url(Alkhemikal.ttf);
}


div {
  font-family: VCR OSD; Verdana; Arial; sans-serif
  font-weight: normal;
}
.layout {
    width: 100%;
    display: grid;
    grid:
      "header header header" auto
      "leftSide body rightSide" 1fr
      "footer footer footer" auto
      / auto 1fr auto;
    gap: 5px;
    background-image: url(img/stars3.gif);
    background-repeat: repeat;
    background-color: rgb(15, 10, 35);
    padding: 50px;
  padding-top: 100px;
  line-height: 1.3;
  flex-grow: 1
  }
  
  .header {width: 100%; grid-area: header; color: rgb(26, 128, 175); text-align: center; padding: 5px;}
  .navbar {display: inline-block; grid-area: leftSide; color:#dce8f2ff; background-color: rgb(26, 26, 85); padding: 15px; padding-top: 55px; min-width: fit-content;}
  .body { grid-area: body; background-color: #a7cff2ff; padding: 25px; min-width: 300px; padding-left: 40px;}
  .rightSide {grid-area: rightSide; background-color:  rgb(26, 26, 85); padding:10px;  color:#dce8f2ff;  width: fit-content;  display: list-item;}
  .footer { display: inline-block;margin: 0; grid-area: footer; background-color: rgb(76, 12, 150); text-align: center; color: aliceblue; min-width: fit-content; display: flex; min-height: 5vh;
  justify-content: center; align-items: center;}

h1{font-family: Alkhemikal;font-size: 52px; color:rgb(20, 11, 95);}

img{padding: 5px; max-width: 70%; height: auto; min-width:30%;}

  ul {
    list-style-type: none;
    margin: 10px;
    padding: 0;
  }
  
  li a {
    display: block;
    padding: 8px;
    color:#dce8f2ff;
    text-decoration: none;
  }
  li a:hover {
    background-color: rgb(38, 238, 238);
    color:rgb(37, 23, 64);  
    font-weight: bold;}

    @media only screen and (max-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .navbar {grid-area: 2 / span 6;}
  .body {grid-area: 3 / span 6;}
  .rightSide {grid-area: 4 / span 6;}
  .footer {grid-area: 5 / span 6;}
}

a:link{text-decoration: none;}

a:hover {color:rgb(3, 194, 194); ;}


/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  .navbar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .navbar a {float: left;}
  div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .navbar a {
    text-align: center;
    float: none;
  }
}

.audio-player{padding: 2vh; float: left;}


 .navbar .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.ipod {
/* change these to whatever colors you want to use for it! */
--black: #11040e ;
--dark: #338fa6 ;
--med: #2c137a ;
--light: #c090e8 ;
--white: #ffe8e1 ;

width:200px;
height:350px;
border:5px var(--med) solid;
padding:20px;
position:relative;
margin:30px;
border-radius:25px;
background:var(--light);
box-shadow:15px 15px var(--med)
}

/* the actual music player*/
audio {
border-radius:25px;
width:90%;
height:30px;
background:var(--med);
color:white;
mix-blend-mode:hard-light;
opacity:.4;
margin:10px auto
}

/*offsets every second ipod widget by a little bit, to make them arrange in a more interesting way, and changes the colors slightly! you can get rid of this if you don't want that.*/
.ipod:nth-of-type(even) {
background:var(--med);
box-shadow:15px 15px var(--dark);
border-color:var(--dark);
margin-top:-5px
}
.ipod:nth-of-type(even) .button .button {
background:var(--med);
border:1px double var(--light)
}

.screen {
height:55%;
background:var(--white);
border-radius:20px;
overflow:scroll;
outline:2px var(--white) solid;
outline-offset:3px;
font-family:'ChicagoFLF', 'Chicago', monospace; /* the font used on vintage apple products - feel free to change this if
you want something different! */
font-size:12px;
text-align:center;
}

/* the bold text - where your song title will go, probably */
.screen b {
background:var(--med);
color:var(--white);
width:100%;
display:block;
padding:3px 5px;
font-size:.9em;
margin-top:5px;
border-top:15px double var(--white);
}

/* the bit under the audio player */
.screen .caption {
padding:0px 10px
}

/* the circular buttons - this bit is just for decoration, really! */
.button {
border:1px double var(--med);
background:var(--white);
height:40%;
aspect-ratio:1 / 1;
margin:10% auto;
border-radius:50%;
overflow:hidden;
text-align:center;
position:relative;
}
.button .b {
position:absolute;
width:100%;
text-align:center;
font-weight:bold;
color:var(--black) !important
}
.b.b-top {
top:5%;
font-size:.9em;
}
.b.b-bottom {
bottom:5%;
font-size:.6em;
}
.b.b-left {
left:3%;
top:40%;
width:20%;
}
.b.b-right {
right:3%;
top:40%;
width:20%;
}

.button .button {
height:50%;
aspect-ratio:1 / 1;
margin:25% auto;
background:var(--light)
}