.background{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
}

.link{
width: 20%;
font-family: 'Hiragino Kaku Gothic Pro', 'WenQuanYi Zen Hei', 
'微軟正黑體', '蘋果儷中黑', Helvetica, Arial, sans-serif;
font-weight: lighter;
}

.link a{
display: block;
color: white;
left: 5%;
top: 50px;
padding: 25px 10px;
text-decoration: none;
font-size: 27px;
text-shadow: 0px -1px 0 #002285, 1px 0px 0 #4d004d;
border-radius: 10px;
}

.link a:hover{
background-color: #ffe6ff;
color: black;
font-size: 30px;
transition: .3s ease;
text-shadow: -2px -1px 0 #4d004d;
}

.link1 a{
display: block;
background-color: #391339;
text-decoration: none;
color: white;
font-size: 19px;
padding: 10px;
position: fixed;
left: 2%;
bottom: 2%;
border-radius: 10px 5px 10px 5px;
transition: .3s ease;
}

.link1:hover a{
background-color: #003380;
color: white;
font-size: 23px;
border: 3px solid white;
border-radius: 5px 10px 5px 10px;
}

.hack{
position: relative;
display: block;
width: 4%;
height: 5%;
position: fixed;
left: 21.2%;
bottom: 26%;
border: 3px solid #9966ff;
transform: skew(-26deg);
transition: .3s ease;
}

.hack .tooltiptext3{
visibility: hidden;
position: absolute;
display: block;
width: 290%;
height:335%;
left: -10%;
top: -430%;
box-shadow: 0 0 10px 10px #c6538c;
transform: skew(15deg);
transition: .2s ease;
}


.hack:hover .tooltiptext3 {
visibility: visible;
opacity: 1;
}

.hack .tooltiptext3::after{
content:"";
position: absolute;
top: 90%;
right: 50%;
margin-top: -5px;
border-width: 17px;
border-style: solid;
border-color: transparent transparent transparent #13060d;
}

.hack:hover{
border: 3px groove #ffffb3;
}

.tooltip{
position: relative;
display: block;
width: 11.5%;
height: 35%;
position: fixed;
right: 11%;
bottom: 5%;
border: 3px outset #99c2ff;
border-radius: 5px;
transition: .3s ease;
}


.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
top: 20px;
right: 111%;
opacity: 0;
transition: .5s ease;
border: 2px solid white; 
padding: 4px 4px 0px 4px;
border-radius: 100px;
}

.tooltip .tooltiptext2 {
visibility: hidden;
opacity: 0;
position: absolute;
top: 10%;
right: 210%;
border: 2px solid #391339; 
padding: 10px;
border-radius: 10px;
width: 120%;
font-size: 23px;
background-color: #f2e6ff;
color: black;
text-align: center;
box-shadow: 0 0 5px 5px #e699ff;
transition: .2s ease;
}

.tooltip .tooltiptext2::after{
content:"";
position: absolute;
top: 40%;
left: 90%;
margin-top: -5px;
border-width: 17px;
border-style: solid;
border-color: transparent transparent #f2e6ff ;
}

.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
top: 20px;
right: 111%;
opacity: 0;
transition: .5s ease;
border: 2px solid #b3e6ff; 
padding: 4px 4px 0px 4px;
border-radius: 100px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

.tooltip:hover .tooltiptext2 {
visibility: visible;
opacity: 1;
}

.tooltip:hover{
border: 4px groove rgb(255, 99, 71);
}

@media screen and (max-width: 600px){
.tooltip .tooltiptext2 {
left: 200%;
font-size: 17px;
}

}

@media screen and (max-width: 800px){
.tooltip .tooltiptext{
display: none;
}
}