html {
  scroll-behavior: smooth;
}

body{
  background: black;
  font-family: optimus princeps, serif;
  scroll-behavior: smooth;
}

::-webkit-scrollbar{display:none}

@font-face{
  font-family: optimus princeps;
  src: url(https://dl.dropbox.com/s/uyiwssryxtl7sbt/OptimusPrinceps.ttf?dl=0)
}

h1{
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  font-family: optimus princeps;
  color: #a68d60;
  text-align:center;
  font-size: 10vh;
  font-weight:400;
  background-clip: text;
-webkit-background-clip: text;
  background-color: #a68d60;
  background-image: url("https://www.transparenttextures.com/patterns/shley-tree-2.png");
  background-size:430px;
  -webkit-text-fill-color: rgb(166, 141, 96,.3);
  filter: drop-shadow(0 0 .15vw black) drop-shadow(0 0 .15vw black);
  z-index:50;
}
h1 a{text-decoration:none;color: #a68d60;}

h2{
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height:1vh;
  font-family: optimus princeps;
  color: white;
  text-align:center;
  font-size: 10vh;
  font-weight:400;
  filter: drop-shadow(0 0 .15vw black) drop-shadow(0 0 .15vw black);
  z-index:30;
}

h3{
  color:white;
  border-bottom: white solid .1vh;
  font-size:2em;
}

p{
  color:white;
}

header{
  position:fixed;
  margin:auto;
  top:0;
  left:0;
  right:0;
  background:black;
  height: 14vh;
  box-shadow: 0 0 1vh rgb(194, 139, 70);
  z-index:50;
}

nav{
  position:absolute;
  margin: auto;
  bottom:0;
  left:0;
  right:0;
  width: 33%;
  display: flex;
  justify-content: space-around;
}
nav a{transition: .25s;color: #a68d60;text-decoration:none}

nav a:hover{text-shadow: 0 0 .75vh #bd660f;color:white}

main{
  z-index:0;
  margin:auto;
  margin-top:14vh;
  left:0;
  right:0;
  overflow:hidden;
}


.section{
  position:relative;
  margin:auto;
  margin-bottom:5vh;
  top:0;
  bottom:0;
  left:0;
  right:0;
  width: 100%;
  height: 85vh;
  transition: .5s;
  overflow:hidden;
}
  .blur{
    position: absolute;
    margin:auto;
    left:0;
    right:0;
    top:50%;
    bottom:0;
    background:linear-gradient(to top, black, transparent);
    pointer-events:none;
}

.character,.characterR,.characterL{
  position:absolute;
  margin:auto;
  width: 90%;
  height:80%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: .8s;
}

.left .character{
  bottom:0;
  left:0;
  margin-left:0;
  background-position: left bottom;
}
.characterR{
  bottom:0;
  right:0;
  height:100%;
  margin-right:0;
  background-position: right bottom;
}
.characterL{
  bottom:0;
  left:0;
  height:90%;
  margin-left:0;
  background-position: left bottom;
}

#godrick{
  background-image: url("assets/left_character_godrick.png");
}

#radahn{
  background-image: url("assets/right_character_radahn.png");
  right:-20%;
  bottom:-2vh;
}
#malenia{
  width:80%;
  background-image: url("assets/left_character_malenia.png");
  filter:blur(.2vh)
}
.section:hover #malenia{
  transform: translate(-15vh,5vh);
  filter:blur(0);
  transition:1.5s;
}
.section:hover #radahn{
  transform: translate(15vh,-2vh);
  filter:blur(.2vh);
  transition:1.5s;
}
 
#ranni{
  background-image: url("assets/character_ranni.png");
  width:45%;
  left:0%;
  right:0;
}
#blaidd{
  background-image: url("assets/right_character_blaidd.png");
}

.info{
  position:absolute;
  margin: auto;
  bottom: 20vh;
  width: 40%;
  filter:drop-shadow(0 0 .1vh black) drop-shadow(0 0 0vh black) drop-shadow(0 0 0vh black);
}

.left .info{  left: 5vh;}
.right .info{  right: 5vh;}

.info p{
  font-size: 1em;
}


footer{
  position: relative;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  width: 100vw;
  height: 20vh;
}
footer p{
  position:absolute;
  margin:auto;
  margin-top:20vh;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
  font-size:1em;
  opacity:.5;
  color:white;
}


#cloud,#cloud2{
  position:fixed;
  margin:auto;
  top:40vh;
  bottom:-20vh;
  left:-10vw;
  right:-10vw;
  background-image: url("assets/cloud2_yellowblue.webp"),url("assets/cloud2_yellowblue.webp");
  background-position:left bottom,right 110%;
  background-size:auto 80vh, auto 70vh;
  background-repeat:no-repeat;
  opacity:.05;
  pointer-events:none;
}

@media all and (max-width: 90vh){
  h1{
    font-size: 18vw;
  }
  
  .info p{
    font-size:1em
  }
  
  nav{
    width: 90%;
  }
  
  .section{
    height: 80vh;
  margin-bottom:0vh;
  }
  
  .left .character{
    background-size: auto 100%;
    width:100vw;
    background-position: center bottom;
  }
  .right .character{
    display:none;
  }
  .characterR{
    bottom:0;
    right:-20%;
    width:120%;
    background-size: auto 80%;
    background-position: center bottom;
  }
  .info{
    left:0;
    right:0;
    width:80%;
    bottom:1vh;
  }
.section:hover #radahn{
  transform: translate(0,0);
  filter:blur(0);
}
  #malenia{display:none}
}