@font-face {
    font-family: Alegreya;
    src: url("./fonts/Alegreya-Medium.ttf");
  }
*
{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
   
    box-sizing: border-box;
   
}
q, blockquote {

    quotes: "“" "”" "‘" "’"; /* two pairs */
}
p::selection{
    color:rgba(255, 255, 255, 0.014);
    background:rgb(235, 128, 172);;
}  

*::before, *::after
{
    box-sizing: border-box;
}


:root
{
    --font:Alegreya,sans-serif; /* This will be used for header and footer */
    --mainfont:Alegreya,sans-serif;
    --specialfont: Baskerville,CardoQ, Alegreya, sans-serif;
    --color1:rgba(105, 3, 46); 
    --color2: rgb(238, 150, 150);
    --maincolor: linear-gradient(to right,rgba(238, 150, 150, 0.315),rgba(105, 3, 46, 0.253));
    --greycolor: rgb(121, 121, 121);
}


html
{
    font-family: var(--font);/* Never get smaller than this */
    height: 100%;
    
    font-size: 62.5%;
    scroll-behavior: smooth;
}



body{
    
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow-x: hidden;
}
nav .logo{
    
    margin-top:0.5rem;
    margin-left: 2rem;
    float: left;

}
nav{
    box-shadow: 0 0 20px 1px rgb(230, 230, 230);
}
.main-container

{ 
    width:100%;
    
    font-family: var(--mainfont);    
    font-size: 2rem;
    max-width: 750px;
    height: auto;
    margin: 1rem auto 2rem;
    padding: 1rem;
    margin-top: 8vh;
    text-align: justify;
    /* position: relative; */
    border-bottom: 1.5px solid rgb(230, 230, 230);
    /* animation: slideFromLeft 1s ease forwards; */
}
.main-container div.text{
    text-indent: 2rem;
    padding-bottom: 1rem;
}

.main-container div.picbox{
    text-indent: none;
    text-align: center;
    background-color: white;
    margin-bottom: 5rem;

}
.main-container div i,.main-container div em{
   color:rgb(105, 3, 46);
}
.main-container div b,.main-container div strong{
    color:rgb(105, 3, 46);
}
.main-container .picbox img{
    background-size: 100% 100%;
    width:100%;
    height:100%;
   
}
@media screen and (max-width:800px){
    .main-container .picbox img{
        background-size: 100% 100%;
        width:100%;
        height: 100%;
       
     }
}


.main-container h2
{
   
    padding: 0.5rem 0;
    margin: 0.5rem 0;
    transition: 1s;
    transform-origin: left;
    transform: scaleX(1);
}
.header
{
    font-family: Alegreya;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    color:rgb(105, 3, 46);
    padding: 2rem 0;
}
.italicDate{
 text-align: left;
 font-size: 1.75rem;
 font-style: italic;
 font-weight: lighter;
  color:black;
  overflow: hidden;
}


.copyright
{
    padding-top: 0.5rem;
}
/* Quotes */
.quote
{
    font-family: var(--specialfont);
    text-align: justify;
    max-width: 90%;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: linear-gradient(to right, var(--color1),var(--color2) 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    border : 1px solid var(--color1);
    border-radius: 5px;
    color: var(--color1);
    border-left: 10px solid var(--color1);
}

/* For the big quote symbol */
.quote::before
{
    content: "\201c";
    font-size: 5.5rem;
    color: var(--color1);
    display: block;
    
    margin-bottom: -3rem;
    margin-top: -1rem;
}

.quote-text
{
    margin-left: 1rem;
    font-size: 2rem;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

/* to add bottom margin to everything except last child */
.quote-text:not(:last-child)
{
    margin-bottom: 10px;
}

.quote-credit
{
    font-weight: bold;
    font-style: normal;
    text-align: right;
    color: var(--color2);
}

/* For the hypen before credit person */
.quote-credit::before
{
    content: "\2014\0020";
}

.quote, .quote::before,.quote-text
{
    transition: all 0.5s ease-in-out;
}

    .quote:hover
    {
        background-position: left bottom;
        border-color: var(--color1);
    }
    .quote:hover:before
    {  
        -webkit-text-fill-color: white;
        transform: scale(1.05);
    }
    .quote:hover .quote-text
    {
        transform: scale(1.03);
        -webkit-text-fill-color: white;
    }
/* Quotes */

/* Right floating box */


.blue
{
    background-color: rgb(255, 243, 240);  
    color: rgb(236, 84, 84) 
}
/* Right floating box */
.note
{
    font-size: 1.5rem;
    font-weight: lighter;
    padding: 1rem 0.5rem;
    margin: 1rem auto;
    line-height: 1.5;
    border-top: 1px solid rgba(214, 214, 214);
    border-bottom: 1px solid rgba(214, 214, 214);
}
a{
    text-decoration: underline;
    color: black;

}
a:hover{
    text-decoration: none;
    color:blue;
}

.navtonext{
    font-family: Alegreya;
    text-align: center;
    font-size: medium;

}
.navtonext .prev{
    float:left;
    width:50%
}
.navtonext .next{
    float:right;
    width:50%;
}
@media screen and (min-width:1150px)
{
    .set-aside
    {
        position: absolute; 
        right: 35px;
        transform: translateY(-140%);
        width: 160px;
        font-size: 1.5rem;
    }
}
@media screen and (min-width:1250px)
{
    .set-aside
    {
        position: absolute;
        right: 35px;
        width: 180px;
    }
}
/* Right floating box */






.fade-in
{
    opacity: 0;
    transition: opacity 250ms ease-in;
}

.fade-in.appear
{
    opacity: 1;
}

@keyframes slideFromTop
{
    0%
    {
        transform: translateY(-100px);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideFromLeft
{
    0%
    {
        transform: translateX(-100px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes navItemFade
{
    from
    {
        transform: translateX(-50px);
        opacity: 0;
    }
    to
    {
        transform: translateX(0px);
        opacity: 1;
    }

}