/* style_research.css */

.cite{
    text-decoration: underline dotted;
    color:#a0004d;
    font-style: normal;
}
.cite:hover{
    color: #8df7ff ;
}

.title{
    font-family: 'voidpixel';
    font-size: 2vw;
    color:#f63090;
    
}

p{
    line-height: 0.8;
    font-size: 1.5vw;
}

.imgstill{
    transition: transform 0.5s ease;
}
.imgstill:hover{
    transform: scale(1.5);
    z-index: 90;
}

figcaption{
    font-size: 0.9vw;
    font-family: Papyrus, fantasy;
}

figure img{
    width: 99%;
    display: inline-block;
}

figure{
    margin: 1.2vw 0;
}

sup{
    font-size: 0.8vw;
    font-weight: 900;
}

ul{
    list-style-type:"✩ ";
}

.footnote{
    width: 15vw;
    position: absolute;
    right: 1vw;
    font-family: 'Comic Sans MS', 'Comic Sans', fantasy;
    font-size: 0.85vw;
    line-height: 1.1;
    color: rgb(93, 19, 63);
    background-color: #8df7ff34;
    border: 2px #8df7ff dotted;
    text-align: justify;
    padding: 0.2vw;
}

.quote{
    font-family: 'Comic Sans MS', 'Comic Sans', fantasy;
    font-style: italic;
    font-size: 0.95vw;
    font-weight: 100;
    line-height: 1.7;
    margin: 0.7vw 1.6vw;
    color: #171717;
}

.italic{
    font-style: italic;
}

#researchbody {
    background-image: linear-gradient(rgba(141, 247, 255, 0.5), rgba(255, 0, 144, 0.5)), url('../assets/img/research/clouds6.jpg');
    background-repeat: repeat;
    background-size: 50vw;
    background-blend-mode: lighten;
}

#researchbox{
    margin:2vw auto 8vw;
    margin-top: 8vw;
    margin-bottom: 8vw;
    max-width:50vw;
    padding: 0 4vw;
    font-family: 'merchantcopy';
    background-color: rgba(240, 248, 255, 0.288);
    box-shadow: 0px 0px 40px 40px rgba(240, 248, 255, 0.288);
}

#h101{
    font-size: 5.5vw;
    font-family: 'coralpixels';
    padding:0;
    margin:0;
    text-align: center;
}

h2{
    font-family: 'Comic Sans MS', 'Comic Sans', fantasy;
    font-size: 1.8vw;
    padding:0;
    margin:0;
    position: relative;
    left: -3vw;
    width: 56vw;
    text-align: center;
}

#now{
    display: inline-block;
    color: red;
    font-size:2.5vw;
    font-weight: 900;
    transform: rotate(5deg);
}

#p01{
    position: relative;
    margin-top: 5vw;
    margin-bottom: 1vw;
    text-align: right; 
}

.favdiv{
    background-image: url('../assets/img/research/favdiv.png');
    background-size: 50vw;
    position:relative;
    width: 50vw;
    height: 5vw;
    margin-bottom: 5vw;
}

h3{
    text-decoration: underline dashed;
    font-size: 1.8vw;
    margin-bottom: 1vw;
    font-weight: 700;
}

#fig03{
    width:25vw;
    margin: 1vw auto;
}

.figfull{
    width:99%;
    margin: 1vw auto;
}

#fig09{
    position: relative;
    float: right;
    width: 15vw;
}

#fig10{
    position: absolute;
    left:5vw;
    width: 15vw;
}

li a{
    text-decoration: underline dotted;
    color:#ec0072;
    font-style: normal;
}

li a:hover{
    color: #40EB1A ;
}

.sitelist{
    line-height: 1;
    display: grid;
	grid-template-columns: 1fr 1fr;
}

#fontbttn{
    position: sticky;
    top: 3vw;
    left: 87vw;
    font-size: 1.3vw;
    z-index:99;
    width: 12vw;
    height: 2vw;
    border: 1.5px solid black;
    padding: 0;
    text-align: center;
}



.citelink{
    text-decoration: underline dotted;
    color:#ec0072;
    font-style: normal;
}

.citelink:hover{
    color: #40EB1A;
}

#guide{
    position: absolute;
    right: 1vw;
    top: 38vw;
    width: 18vw;
    font-size: 1.8vw;
    line-height: 0.7;
    padding: 1vw;
    border: 4px #8df7ff dotted;
    background-color: #8df7ff34;
}

#imgbttn{
    position: sticky;
    top: 1vw;
    left: 87vw;
    font-size: 1.3vw;
    z-index:99;
    width: 12vw;
}



#lucky{
    background-image: url('../assets/img/research/lucky.jpg');
    background-size: 8vw;
    background-repeat: space;
    position:relative;
    width: 100%;
    height: 10vw;
}

footer{
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3vw;
    background-color: #f630908d;
    color: white;
    display: flex;
  justify-content: center;
  align-items: center;
  }

#figz1{
position: relative;
width: 35vw;
left: 20vw;
top: -20vw;
}

#figz2{
position: relative;
width: 40vw;
left: -5vw;
}

#fig12{
position: relative;
width: 30vw;
left: 27vw;
top: -12vw;
}

#fig13{
    position: relative;
    width: 30vw;
    left: -5vw;
    top: -27vw;
    }

#vid02{
    position: relative;
    top: -29vw;
    left: 27vw;
    width: 28vw;
    height: 25vw;
}

#fig14{
    position: relative;
    width: 30vw;
    left: -5vw;
    top: -52vw;
}

#fig15{
    position: relative;
    width: 30vw;
    left: -5vw;
    top: -55vw;
}

#fig16{
    position: relative;
    width: 30vw;
    left: 27vw;
    top: -76vw;
}

#vid03{
    position: relative;
    width: 30vw;
    height: 20vw;
    left: -5vw;
    top: -77vw;
}

#c4p{
    position: relative;
    width: 13vw;
    left: 27vw;
    top: -92vw;
}

#c4pd{
    position: relative;
    width: 17vw;
    left: 40vw;
    top: -104vw;
}

#fig17{
    position: relative;
    width: 30vw;
    left: -5vw;
    top: -103vw;
}

#vid01{
    position: relative;
    width: 30vw;
    height: 23vw;
    left: 27vw;
    top: -115vw;
}

#fig18{
    position: relative;
    width: 30vw;
    left: -5vw;
    top: -126vw;
}

#born{
    position: absolute;
    left:4vw;
    width: 14vw;
}

.flexwrap{
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around;
}