*{
  margin: 0;
  padding: 0;
}
:root{
    /* color pallate */
    --black: #01020C;
    --coral: #A93F55;
    --moonstone-blue: #5EB1BF;
    --electric-blue: #7DF9FF;
    --white: #CDEDF6;

    --plum: #8B165F;

    --border-size--large : 5px;

    --border-size-small: 2px;
}

.soundcloudPlaylist{
    padding:10px;
}

.aspect-ratio-container-1-1{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%;
}
.aspect-ratio-container-2-3{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 50%;
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;

  padding:10px;
  /* HACK 
    object-fit: fill stretches videos instead of having them at deafault resolution
    carefull!!! THIS IS VERY DANGEROUS*/
  object-fit: fill;
}

/* The date information for each project */
#projects > h2 > span.date{
  white-space: nowrap;  
}


/* These are each individual project*/
#projects > dir {
  border-width: 5px;
  border-style: solid;
  padding: 10px;
}
/* These are project titles*/
#projects > dir h2 {
  text-align: center;
}
/* All paragraphs/text in a project */
#projects > dir p { 
    background: var(--black);
    border-width: 3px;
}
#projects > dir .pic{
  padding:10px;
}

#projects > dir .list-item p:nth-child(odd) { 
    border-style: solid;
    padding: 5px;
}

#projects > dir p:nth-child(even) { 
    border-style: none;
}
/* Odd Projects in the list */
#projects > dir:nth-child(odd){
  border-color: var(--coral); 
}
#projects > dir:nth-child(odd) h2{ /* Title*/
  background: var(--electric-blue);
  color: var(--plum);
}
#projects > dir:nth-child(odd) p{ /* paragraphs*/
  border-color: var(--electric-blue);
}

/* Even Projects in the list */
#projects > dir:nth-child(even){
  border-color: var(--moonstone-blue);    
}
#projects > dir:nth-child(even) h2{  /*Title*/
  background: var(--coral);
  color: var(--black);
}
#projects> dir:nth-child(even) p{ /* paragraphs*/
  border-color: var(--coral);
}








#projects > #date{
  text-align: right;

}