body {
  background-color: white;
  color: black;
  font-family : Lato;
  -webkit-font-smoothing: antialiased;
  cursor: url("red_cursor.png"), pointer;
  cursor: url("blu_cursor.png"), auto;
  cursor: url("blu_cursor.png"), default;
  overflow:hidden;

}

.cherish-regular {
  font-family: "Cherish", cursive;
  font-weight: 400;
  font-style: normal;
}

.pt-sans-narrow-regular {
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.cursor{
  position:absolute;
  height:100%;
  width:100%;
  cursor: url("blu_cursor.png"), auto;
  cursor: url("blu_cursor.png"), default;
  z-index:-1;
  overflow:hidden;
}

.title{
  position:fixed;
  top: 41%;
  left: 44%;
  width:30%;
  height:70%;
  font-size:5.7vw;
  -webkit-transform: translate(-50%, -50%) rotate(-3deg);
  -ms-transform: translate(-50%, -50%) rotate(-3deg);
  transform: translate(-50%, -50%) rotate(-3deg);
  z-index:10;
  font-family : Cherish;
  pointer-events: none;
  white-space: nowrap;
  cursor: url("blu_cursor.png"), auto; 

}

.kamui{
  position:fixed;
  top: 50vh;
  left: 50%;
  width:30%;
  height:70vh;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index:10;
  pointer-events: none;
  cursor: url("blu_cursor.png"), auto;
}

.kanone{
  position:fixed;
  top: 50%;
  left: 50%;
  width:30%;
  height:70%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index:1;
  filter: contrast(150%);
  pointer-events: none;
  cursor: url("blu_cursor.png"), auto;
}

.comment{
  position:fixed;
  top: 50%;
  left: 80%;
  width:10px;
  height:10px;
  
  color:blue;
  background-color:blue;
  border: solid 1px blue;
  
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow:hidden;
  cursor: url("blu_cursor.png"), auto;

}

.comment:hover{
  width:200px;
  height:200px;
  color:black;
  background-color:white;
  opacity:1;
  overflow:auto;
  font-size:11px;
  padding:3px;
  cursor: url("blu_cursor.png"), auto; 
}

.linklist{
  position:fixed;
  top: 50vh;
  left: 50vw;
  width:30vw;
  height:70vh;
  
  color:black;
  background-color:white;
  border: solid 1px black;

  overflow-x:hidden;
  scrollbar-color: blue black;
  scrollbar-width: thin;
  
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: url("blu_cursor.png"), auto; 
  container-type: inline-size;
}


.linklist a{
  text-decoration: none;
  margin: 0 5px 0 5px;
  font-size:2.6cqw;
  font-weight: 400;
  color:black;
  width:100%;
  cursor: url("blu_cursor.png"), auto;

}

.linklist a:hover{
  color:white;
  background-image: linear-gradient(to left, blue 55%, blue 55%, blue 100%);
  cursor: url("red_cursor.png"), pointer;
}

.linklist a:visited{
  text-decoration: none;
  cursor: url("blu_cursor.png"), auto;
}

.linklist p{
  font-size: 3cqw;
  margin-top:5px;
  margin-bottom:5px;
  background-color:blue;
  color:white;
  cursor: url("blu_cursor.png"), auto;
}

#linkdes{
  color:blue;
  font-size:2cqw;
  font-weight: 400;
  position: relative;
  top: -1px;
  right: 0;
  text-decoration: underline;
  text-underline-position: under;
  cursor: url("blu_cursor.png"), auto;
}

.linklist a:hover > #linkdes{color:white; background-image: linear-gradient(to left, black 55%, black 55%, black 100%); top:0px;cursor: url("red_cursor.png"), pointer;}




/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */

.linklist {width :95%; height:95%;top:55%;line-height:1.8vh;}
.linklist a{line-height:0.3vh;}
.title {left:55%; top:35%; width :100%;font-size:16.5vw;}
#linkdes{top:-2px;line-height:0.3vh;}
.kanone {visibility:hidden}
.comment {visibility:hidden}
.kamui {width:92%;top:135%;}
#mobile{visibility:hidden}
}