@font-face {
  font-family: 'DepartureMono';
  src: url('DepartureMono.otf');
}
body, html {
    
    background-image:url(bkg.jpg);
    color:white;
    line-height:1.9;
    font-family:'DepartureMono';
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  fieldset {
  	border: 1px solid gray;
  	
  }
  fieldset:hover {
  	border: 1px solid white;
  }
  
  .mainx /*this contains the border stuff*/ {
    padding:10px;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 1);
    width:95%;
    margin-left: auto;
    margin-right: auto;
    align-self: left;
    margin-top: auto;
    margin-bottom: auto;
    padding-top:0px;
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .music {
  	padding:10px;
  	border-radius: 0;
  	background-color: rgba(0, 0, 0, 1);
  	padding-top:0px;
  	height: 100;
  	align-self: center;
  	grid-column: 2.5 / 3;
  	grid-row: 2;
  }

  /*.links {
  	padding:10px;
  	border-radius: 0;
  	background-color: rgba(0, 0, 0, 1);
  	padding-top:0px;
  	height:fit-content;
  	grid-column: 1 / 4;
  	grid-row: 2;
   
  }*/

  .header {
    	padding:10px;
    	border-radius: 0;
    	background-color: rgba(0, 0, 0, 1);
    	padding-top:0px;
    	height:fit-content;
    	grid-column: 1 / 4;
  }
  /*.badges {
      padding:10px;
      border-radius: 0;
      background-color: rgba(0, 0, 0, 1);
      padding-top:0px;
      grid-column: 1 / 4;
      grid-row: 5;
  }*/

  a {/* these a css thingies set the hyperlinks to not use purple or blue coloring*/
    color: white;

  }
  
  a:visited { /* these a css thingies set the hyperlinks to not use purple or blue coloring*/
   /* color:white; */
    }
  a:hover {/*this sets the hover color for hyperlinks bc why not?*/
    color:lightgray;
  }
    
  #more {display: none;}

  .wrapper {
    overflow-x: scroll;
    width:100%;
    height:fit-content;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    grid-auto-rows: minmax(100px, auto);
  }

  @media only screen and (orientation:landscape) {
    
}

@media only screen and (orientation:portrait) {
    .mainx {
    	grid-row: 2;
    	grid-column: 1/4;
    }
    .music {
    	grid-row: 3;
    	grid-column: 1/4;
    }
}

#scroll-container {
  border-radius: 0.5rem;
  overflow: hidden;
  width:100%;
}

#scroll-text {
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}