*{
margin: 0px; 
 scrollbar-width: none; 
 image-rendering: crisp-edges;
}

 
/* set font for body + bg */
html, body {
  width: 100%;
  height: 1400px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
 
}

body {
  background-image: linear-gradient(45deg, #2233cc, #aa22aa);
  background-repeat: no-repeat;
  background-size: cover;  
  background-position: center;
  color: #ffffff;
  font-family: Geo, sans-serif;
  min-height: 100%; 
  position: relative;
}


.background {
  position: absolute;
  width: 150%;
  height: 2200px;

  background-image:
    linear-gradient(45deg, #ffffff 26%, transparent 26%),
    linear-gradient(-45deg, #ffffff 26%, transparent 26%),
    linear-gradient(45deg, transparent 76%, #ffffff 76%),
    linear-gradient(-45deg, transparent 76%, #ffffff 76%);
    
  background-size: 320px 320px;
  background-position:
    0 0,
    0 160px,
    160px -160px,
    -160px 0;

 
  z-index: -2147483648;  
  
  mix-blend-mode: overlay; 
}


/* anim grid */
  @keyframes moveGridy {
      from {
        transform: translate(0px, -0px) ; 
		
      }
     to {
	 transform: translate(0px, -320px);
		 
    }
  }
   @keyframes moveGridx {
      from {
        transform: translate(0px, 0px) ; 
		
      }
     to {
	 transform: translate(-320px, 0px);
		 
    }
  }
    @keyframes moveGridxy {
      from {
        transform: translate(0px, -320px) ; 
		
      }
     to {
	 transform: translate(-320px, 0px);
		 
    }
  }
 


.navbar {
	width: 100%;
	background-color: white;
	color: black;
	text-align: center;
	font-size: 1.5em;
	display: flex;
	align-items :center;
	justify-content: center;
  
}

.navbar > div {
	padding: 0px 10px;
	border-right: 2px black solid;
}
.navbar > div > a {
	text-decoration: none;
	color: black;	
	font-family: "Design System E W01 900R"; 
  transition: color 0.2s;
  
	
	
}
.navbar > div:hover {
	background-color: #7d44ba;
  transition: background-color 0.2s;
	
}

.navbar > div > a:hover {
	
	color: #ffffff;
	
}

.container {
  
  width: 600px;
  padding: 0px;
  position: relative;
  background-color: #ffffff;
  display: flex;
  flex-direction: column; 
  color: black;
  font-size: 1.5em;
  z-index: 1;
}

.containerside {
  width: 50vw;
  height: 30%;
  padding: 0px;
  background-color: #ffffff;
  color: black;
  font-size: 1em;
  bottom: 500px;
  position: absolute;
  bottom: 0;
  z-index: -1;
  text-align: right;
  
}

.titles {
	font-family: "Design System E W01 900R"; 
  align-self: center;
  background-color: black;
  color: white;
  width: 100%;
}
.footer {
	background-color: white;
	width: 100%;
	height: 480px;
}

.center {
  text-align: center;
}
small {
  font-size: 0.5em;
}

.name {
  font-family: "Design System E W01 900R";
  text-align: center;
}
.name > a  {
  text-decoration: none;
  color:#000000;
}
.name > a:hover {
  text-decoration: none;
  color:#7d44ba;
}
a {
  text-decoration: none;
  color: #7d44ba;
  transition: color 0.2s;
}
a:hover {
  color:#0bc282;
  transition: color 0.2s;
}

p {
  text-align: center;
}
.songcontainer {
  float: left;
  width: 25%;
}

.row {
  padding: 1px;
  border: 5px double #000;

}
.rowtitle {
    padding: 1px;
  border: 5px solid #000;
  border-style: double;
  transition: 0.2s;
  color: #000;
  text-decoration: none;

}
.flexbox{
  flex: auto;
}

.rowtitle:hover {
color: white;
background-color: black;
transition: 0.2s;

}