@font-face {
  font-family: "Parisienne-Small-Bold";
  src: url('fonts/Parisienne-Small-Bold.ttf') format("truetype");
  
;

}


@font-face {
  font-family: 'ninepin';
  src: url('fonts/ninepin.ttf') format("truetype");
  
;

}

@font-face {
  font-family: "SpaceMono-Regular";
  src: url('fonts/SpaceMono-Regular.ttf') format("truetype");
  
;

}

header {

border-radius: 2px;
    outline: #caffd3bf solid 1px;
    padding: 0;
    outline-style: dashed;
    min-width: 700px;
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px #f0efff80;

}



body {

  background-image: url(img/bk1.png);
padding: 30px

}


.columns {
display: flex;
justify-content: center;
min-height: 720px;

}

.columns > div {
    
flex: 1;
margin: 10px;
}

.shnspklogo
{

    width: 200;
    max-width: 300;
}


.column3
{
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    outline: #91ffa0af solid 1px;
    padding: 10px;
    width: 200;
    max-width: 300;
   
    box-shadow: 5px 5px 5px #7f7aaa80;

}

.column3 > div {
    
flex: 1;
margin: 10px;

}

.columnA{
   background-color: #775e9a3a;
    min-width: 100;
  max-width: 275px;
   
}

.columnB{
    
   background-color: #775e9a3a;
   min-width: 100;
  max-width: 275px;
   
}

.notebook
{
   
     background-image: url("img/compositionbook.png");
    background-size: 300px ;
  min-width: 100;
  max-width: 275px;
}


.introduction
{
    border-radius: 2px;
    outline: #dea8ffad solid 1px;
    padding: 0.5px;
    outline-style: dashed;
    width: 300;
    max-width: 400;
    background-color: rgba(255, 221, 251, 0.365);
    box-shadow: 5px 5px 5px #7f7aaa80;
}


h1 {
    font-family: Arial, Helvetica, 
    sans-serif;
    font-size: medium;
    color: #dea8ffad;
    text-align: center;
    text-size-adjust: 80%;
    width: 400px;

}

h2 {
    font-family: "ninepin", sans-serif;
    letter-spacing: 1;
    font-size: medium;
    color: #fdf4ffca;
    padding: 4px;
    margin-left: 5px;
    

}


h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: rgba(229, 168, 249, 0.628);
    margin-left: auto;
    margin-right: auto;
    width: 425;
    max-width: 425;
    font-size: x-large;

}



p {
    font-family: "SpaceMono-Regular", sans-serif;
    font-size: large;
    letter-spacing: 1;
    word-spacing: 2;
    color: #ab81c5;
    padding: 5%;
    min-width: 300;
    max-width: 400;
    

}


p2 {
    display: block;
   font-family: "Parisienne-Small-Bold", sans-serif;
    font-size: large;
    letter-spacing: 1;
    word-spacing: 2;
    text-align: left;
    color: #00b3b3;
  padding: 5px;
    min-width: 100;
    max-width: 175;
    outline-style: dashed;
    background-color: white;
    margin-left: 17%;
   
}

p3 {
    font-family: Arial, Helvetica, sans-serif;
    color: rgba(168, 209, 255, 0.495);

}


img {
   border-radius: 2px;
    outline: rgba(168, 180, 255, 0.685) solid 1px;
    padding: 0.5px;
    width: 100%;
    box-shadow: 5px 5px 5px #7f7aaa80;
    
}

.contain {
    background-color: rgba(167, 201, 255, 0.167);
    width: 60%;
    margin: auto;
    min-width: 500px;
    max-width: 2000px;

}


.smallimage {
   margin-left: 20px;
    padding: 1px;
    width: 150px
}

.logo-container {
    display: block;
    padding: ;
    margin-left: auto;
    margin-right: auto;
    width: 200;
    max-width: 100;

}

.link-sounds {
    display: block;
    float: left;
    margin-top: 20;
    width: 200;
    max-width: 200;

}

.link-animations {
    display: block;
    float: left;
    margin-top: 16;
    width: 200;
    max-width: 200;

}

.link-lego {
    display: block;
    float: left;
    margin-top: 16;
    width: 200;
    max-width: 200;

}

.link-about {
    display: block;
    float: left;
    margin-top: 16;
    width: 200;
    max-width: 200;

}

.links1 
a {
    
    font-family: "Parisienne-Small-Bold", sans-serif;
    letter-spacing: 1;
    font-size: x-large;

    border-radius: 2px;
    outline: #4aa8aa60  solid 1px;
    padding: 2px;
    outline-style: dashed;
    margin-left: 2px;
    box-shadow: 3px 5px 5px #7f7aaa80;

 
}

a:link {
      color: #4aa8aaad;
      background-color: #e0fde3b5;
      text-decoration: none;

}

/* visited link */
a:visited {
  color: #00b3b3;
}

/* mouse over link */
a:hover {
  color: rgba(147, 156, 255, 0.838);
      border-radius: 2px;
      background-color: #e0fde360;
    outline: rgba(147, 156, 255, 0)  solid 2px;
    padding: 0.5px;
}









.links2 a {
    font-family: "Parisienne-Small-Bold", sans-serif;
    color: rgba(168, 209, 255, 0.495);
    margin-right: auto;
    margin: 1%;
    font-size: x-large;
}

#winamp-container {
margin-top: 400px;

}


.songs {
    background-color: #ebebeb;
    background-image: url("img/a-ubs-cover.jpg");
    background-size: 400px 400px ;
    background-position: top;
    color: white;
    border-radius: 25px;
    outline: rgba(168, 209, 255, 0.495) solid 2px;
    outline-style: dashed;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    width: 300px
}

.songs2 {
    background-color: #ebebeb;
    color: white;
    border-radius: 25px;
    outline: #a8d1ff solid 2px;
    outline-style: dashed;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    width: 400px
}

footer {

border-radius: 2px;
    outline: #91ffa0af solid 1px;
    padding: 10px;
    outline-style: dashed;
    min-width: 700px;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;

}