@font-face {
    font-family: link;
    src: url("font/PixelatedElegance.ttf");
    /*font/PixelatedElegance.ttf*/
}

@font-face {
    font-family: header;
    src: url("font/starcrush.ttf");
    /*font/PixelatedElegance.ttf*/
}

body {
    background-image: url(immagini/coso.svg);
background-size: 20%;
    background-attachment: fixed;
    font-family: link;
    font-weight: bold;
}

b, a {
   color: blue;
}

h2 {
   color: blue;
    font-family: header;
    font-size: xx-large;
}


.hand {
    width: 500px;
    position: absolute;
    bottom: 0;
    /*position: absolute;
    bottom: 0;
    width: 300px;
     margin: auto;
  left: 0;
  right: 0;*/
}

.fixed {
    
    position: fixed;
     bottom: 0;
    
}

.side {
    position: absolute;
    right: 80px;
}

.log {
    width: 700px;
   display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    
  
}

.logborder {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABrElEQVR4Xu3cQY6DMBBE0XD/QxNlGYjcKfXHwuLPFijZz2WT2bC9/EMFNjTNsJegcAkEvR/ovmdj2iYv4tzxAZObO+Bs8T53zx2foKcV6u0gQe8P2lvhfEt3nzgeCb3xX9DQ3oC6PPnzguZmwycEXQ00/ZlxnN/qWz5dr+/5/jhDBc1IBT14sQWyofF/UuMj7g/Q1c7EbMPmd49/FQgaiwoak40fEFRQWACOs6GCwgJwnA0VFBaA42yooLAAHGdDBYUF4DgbKigsAMfZUEFhATjOhgoKC8BxNlRQWACOs6GCwgJwnA0VFBaA42yooLAAHGdDBYUF4DgbKigsAMfZUEFhATjOhgoKC8BxNlRQWACOs6GCwgJwnA0VFBaA42yooLAAHGdDBYUF4DgbKigsAMfZUEFhATjOhgoKC8BxNvRuoOl4VvtGiV/FSVe4uF9QQWEBOO7yhqbjHb/10rT597Pj9/uhpy+L9V6qggpKHwq33/LVhHtbqko/X09fOr3xXbDlqyn3BlylC5oLhU/Y0BCsun050GpCz7oOnKHPAqtmK2glFF4XNASrbn8DV+0wZNVZAJEAAAAASUVORK5CYII=") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
	 /* border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABqElEQVR4Xu3cwZKCMBBFUfj/j8ZyJ8GiafqSoNzZGt50Tl4sV8yTf6jAjKYZNgkKl0DQ8aDLUpth7nyIfec9sbm+A9YO7/1033kFDU8sd6ME7Q8aXZncCYbzD19Q2++Bhtb+wXCf9AC1/Qq6ARc03cH9B3DQWiC8uxvE5Ty+XPlcwA12fPEIOQ9Bw+MQNCTKLcBB/+13Zo5zu7oFXvscuPKCrlEFrVayeV5QQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9lQQWEBOM6GCgoLwHE2VFBYAI6zoYLCAnCcDRUUFoDjbKigsAAcZ0MFhQXgOBsqKCwAx9nQu4G28zztlRn4S1wE3a94+iUuggqKfmuWr3w7TS4Q3cuQsNp+fd3l5tAEhXss6K+BZr9To/31/h0bNY6d98B3qKAR+efngoZauRsl6HjQcIJHLzjR0Ed7hZsXNCTKLRA05xWufgFX7TBk2cOLXQAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;*/
}

.colori {
    position: relative;
    bottom: 40px;
}

.col {
    width: 50px;
}
















@media screen and (max-width: 1300px) {
    .hand {
    width: 470px;
    position: absolute;
    bottom: 0;
    /*position: absolute;
    bottom: 0;
    width: 300px;
     margin: auto;
  left: 0;
  right: 0;*/
}

.fixed {
    
    position: fixed;
     bottom: 0;
    
}

.side {
    position: absolute;
    right: 50px;
}

.log {
    width: 600px;
   display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    
  
}
}











@media screen and (min-width: 1600px) and (max-width: 1750px) {
    .hand {
    width: 530px;
    position: absolute;
    bottom: 0;
    /*position: absolute;
    bottom: 0;
    width: 300px;
     margin: auto;
  left: 0;
  right: 0;*/
}

.fixed {
    
    position: fixed;
     bottom: 0;
    
}

.side {
    position: absolute;
    right: 80px;
}

.log {
    width: 750px;
   display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    
  
}
}










@media screen and (min-width: 1751px) and (max-width: 1850px) {
    .hand {
    width: 560px;
    position: absolute;
    bottom: 0;
    /*position: absolute;
    bottom: 0;
    width: 300px;
     margin: auto;
  left: 0;
  right: 0;*/
}

.fixed {
    
    position: fixed;
     bottom: 0;
    
}

.side {
    position: absolute;
    right: 80px;
}

.log {
    width: 780px;
   display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    
  
}
}


@media screen and (min-width: 1851px)  {
    .hand {
    width: 580px;
    position: absolute;
    bottom: 0;
    /*position: absolute;
    bottom: 0;
    width: 300px;
     margin: auto;
  left: 0;
  right: 0;*/
}

.fixed {
    
    position: fixed;
     bottom: 0;
    
}

.side {
    position: absolute;
    right: 80px;
}

.log {
    width: 780px;
   display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    
  
}
}