Geralt Profile 1.0

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

body{
background-color:#000;
overflow:hidden;
}

::-webkit-scrollbar
{
	width: 0px;
	background-color: transparent;
}



#background{
width:100%;
height:80%;
background-color:#fff;
position:absolute;
left:0px;
top:10%;
background-size:100%;

animation-fill-mode:forwards;
overflow:hidden;
}

#backgroundimage {
width:100%;
height:100%;
position:absolute;
background-image:url(https://www.textures.com/system/gallery/photos/Wood/Planks/Old%20Planks/120447/WoodPlanksOld0250_3_270.jpg);
background-size:20%;
background-position:0px -200px;
}

@keyframes background{
from{
width:0%;
}
to{
width:100%;
}
}

#textgeralt a{
background-image:url(https://i.imgur.com/3OAus94.png);
background-size:100%;
width:500px;
height:800px;
background-repeat:no-repeat;
position:absolute;
display:block;
top:50%;
left:50%;
margin-top:-350px;
margin-left:-700px;
filter:drop-shadow(0px 0px 10px #000);
transition:.5s;
z-index:8;
}

#textgeralt:hover a{
filter:drop-shadow(0px 0px 2px white);
margin-top:-375px;
margin-left:-725px;
width:525px;
height:82p5x;
}

#book a{
background-image:url(https://cdn.discordapp.com/attachments/433827877155504139/450152792384995348/Book.png);
background-size:100%;
background-repeat:no-repeat;
width:800px;
height:850px;
position:absolute;
top:50%;
left:50%;
transform:rotate(10deg);
margin-top:-350px;
margin-left:-350px;
filter:drop-shadow(-5px 5px 10px #000);
transition:.5s;
z-index:9;
}

#book:hover a{
width:825px;
height:875px;
margin-top:-375px;
margin-left:-375px;
filter:drop-shadow(0px 0px 2px white);
}

#wolf a{
background-image:url(https://cdn.discordapp.com/attachments/433827877155504139/450153810384519188/Wolf_School_medallion.png);
background-size:100%;
background-repeat:no-repeat;
width:180px;
height:180px;
position:absolute;
display:block;
filter:drop-shadow(0px 0px 10px #000);
top:50%;
left:50%;
margin-top:120px;
margin-left:-400px;
z-index:10;
transition:.5s;
}

#wolf:hover a{
margin-top:95px;
margin-left:-400px;
width:215px;
height:215px;
filter:drop-shadow(0px 0px 2px white);
}

#gwent a{
background-image:url(https://cdn.discordapp.com/attachments/433827877155504139/450154899637010444/gwent.png);
background-size:100%;
background-repeat:no-repeat;
width:600px;
height:600px;
position:absolute;
display:block;
filter:drop-shadow(0px 0px 10px #000);
top:50%;
left:50%;
margin-top:-100px;
margin-left:100px;
z-index:10;
transition:.5s;
}

#gwent:hover a{
width:625px;
height:625px;
margin-top:-125px;
margin-left:75px;
filter:drop-shadow(0px 0px 2px white);
}

#overlay{
background-color:#000;
opacity:.9;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
opacity:0;
}

#one, #two, #three, #four{
background-image:url(https://i.imgur.com/sRtUng7.png);
background-size:100%;
background-repeat:no-repeat;
width:600px;
height:730px;
position:absolute;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-350px;
z-index:0;
opacity:0;
}





.text{
width:540px;
height:580px;
background-color:transparent;
position:absolute;
top:80px;
left:20px;
color:#cccac1;
font-size:15pt;
font-family: 'Roboto Condensed', sans-serif;
padding:10px;
overflow:auto;
}

#one a, #two a, #three a, #four a{
font-size:15pt;
color:#fff;
position:absolute;
text-decoration:none;
bottom:0px;
right:20px;
font-family: 'Roboto Condensed', sans-serif;
}

#one a:hover, #two a:hover, #three a:hover, #four a:hover{
color:#cccac1;
}

h1{
font-size:20pt;
color:#fff;
font-family: 'Roboto Condensed', sans-serif;
position:absolute;
top:15px;
left:30px;
}

#blanketreset:target #one, #blanketreset:target #two, #blanketreset:target #three, #blanketreset:target #four, #blanketreset:target #overlay{
z-index:0;
opacity:0;
transition:.5s;
}

#blanket1:target #one{
z-index:20;
opacity:1;
transition:.5s;
}

#blanket1:target #overlay{
z-index:15;
opacity:.9;
transition:.5s;
}

#blanket2:target #two{
z-index:20;
opacity:1;
transition:.5s;
}

#blanket2:target #overlay{
z-index:15;
opacity:.9;
transition:.5s;
}

#blanket3:target #three{
z-index:20;
opacity:1;
transition:.5s;
}

#blanket3:target #overlay{
z-index:15;
opacity:.9;
transition:.5s;
}

#blanket4:target #four{
z-index:20;
opacity:1;
transition:.5s;
}

#blanket4:target #overlay{
z-index:15;
opacity:.9;
transition:.5s;
}

<div id="blanketreset"><div id="blanket1"><div id="blanket2"><div id="blanket3"><div id="blanket4">
<div id="backgroundimage">



<div id="textgeralt">
 <a href="#blanket1"></a>
</div>

<div id="wolf">
 <a href="#blanket2"></a>
</div>

<div id="book">
 <a href="#blanket3"></a>
</div>


<div id="gwent">
 <a href="#blanket4"></a>
</div>


<div id="overlay"></div>
<div id="one">
<h1>Geralt of Rivia</h1>
<div class="text">
Many cannot fathom the friendship Geralt of Rivia and I, Dandelion, have shared all these years. When we first began breaking bread together, spiteful tongues said he'd be better off cutting my throat and dumping my body in a hollow tree – before I provoked someone else into doing that same to us both. Those individuals spoke out of pure jealousy, for Geralt was my dearest friend, a fact which he gave ample evidence of on numerous occasions.<br><br>
I could say a great deal about that world-famous monster hunter, the man known in Elder Speech as Gwynbleidd, or, in our younger (yet no less noble) tongue, as the White Wolf. For Geralt of Rivia is a truly exceptional individual. A brief encounter might tempt one to label him a mere swinger of swords, a simple monster-catcher, a rough-and-tumble practitioner of a dirty trade – but peer closer and you will soon discover he is a man of unplumbed depths, unique views and vast, world-spanning experience.<br><br>
On the surface, he is introverted, tight-lipped, and one might even say gruff, but underneath lies an overflowing sea of goodwill, good humour, and an honest readiness to help his friends, be it with a bit of sound advice or the masterful application of his blade.<br><br>
Setting aside cumbersome false modesty, I can say that I know his story better than any man alive. I was with him through hard times and good, helping with wise advice, warm words and razor wit. As a result, I am a vital part of his story, both in its earlier and present portions. It is thus my duty to continue my chronicle and, for the benefit of future generations, put in writing the next chapter of his deeds and exploits.
</div>
<a href="#blanketreset">X</a>
</div>

<div id="two">
<h1>Hunt Journal</h1>
<div class="text">
</div>
<a href="#blanketreset">X</a>
</div>

<div id="three">
<h1>The Beloved</h1>
<div class="text">
</div>
<a href="#blanketreset">X</a>
</div>

<div id="four">
<h1>Meme</h1>
<div class="text">
</div>
<a href="#blanketreset">X</a>
</div>