*{
    margin:0;
    box-sizing: border-box;
}
body{
    background-color: #fff5fd;
}
.intro-text{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('Images/library.jpg') ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color:#04C4D9;
    font-size: 40px;
    align-content: center;
    justify-items: center;
    padding: 20px;
    h1{
        text-align:center;
    }
}
button{
    padding: 1.2em 5em;
    border-radius: 50px;
    border:none;
    margin-top: 2%;
    background-color: #cbaef2;
    display: block;
    a{
        text-decoration: none;
        color:white;
        font-weight: bolder;
        font-size: 20px;
    }
}
.owner{
    color:white;
    font-size: 20px;
    margin-top: 5%;
}
.purple-bg{
    width:30%;
    padding: 3%;
    background-color: #cbaef2;
    box-shadow:3px 5px 10px black;
    margin: -14% auto 5% 2%;
    border-radius: 20px;
    img{
        max-width:450px;
        max-height:450px;
        border-radius: 20px;
    }
    img:hover{
        transform: scale(1.1);
    }
}

.main{
    font-size: 23px;
    text-align: justify;
}
.left-paragraph, .right-paragraph{
    padding: 2%;
    line-height: 1.5;
    width: 60%;
    justify-self: center;
   background-color: white;
}
.left-paragraph{
    margin-top: -3%;
    margin-bottom: 5%;
    box-shadow:3px 5px 10px black;
}
.right-paragraph{
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        h3{
            color:#04C4D9;
            font-family: kugile;
            text-align: center;
            padding: 5%;
        }
        span{
            font-size: 15px;
            color: #000000;
        }
}
footer{
    padding:0.5%;
    background-color: #cbaef2;
    text-align: center;
    font-family: kugile;
}
mark{
    background-color: #cbaef2;
}

@font-face {
    font-family: 'kugile';
    src: url('Fonts/Kugile_Demo.ttf');
}

@media only screen and (max-width:900px){
    .header{
        height:auto;
        flex-direction: column;
    }
    .intro-text{
        padding: 20px;
        h1{
            font-size: 35px;
        }
        button{
            padding:0.6em 4em;
        }
    }
    .owner{
        font-size: 18px;
    }
    .intro-text, .purple-bg{
        width:100%;
    }
    .purple-bg{
        margin: 3% 0;
        width: 90%;
        justify-self: center;
        img{
            max-width: 300px;
        }

    }
    .main{
        height: auto;
        flex-direction: column;
    }
    .left-paragraph, .right-paragraph{
        width:100%;
    }
    .left-paragraph{
        border:5px solid #cbaef2;
        margin-top: 10%;
    }
   .right-paragraph{
        margin-top: 5%;
        border: none;
   
}
}

@media only screen and (min-width:905px) and (max-width:1300px){
    .intro-text{
        h1{
            font-size: 50px;
        }
    }
    .purple-bg{
        margin-top: -2%;
    }
 }