/* ----------------------------------------------------------------------------*/
/* -----------Emily Chau Portfolio Website Design Using Bootstrap--------------*/
/* -------------------------CSS Stylesheet-------------------------------------*/
/* ----------------------------------------------------------------------------*/


/*   ------- typefaces -------   */

html {
    font-family: 'Open Sans', arial, sans-serif;
}

body {
    font-family: 'Open Sans', arial, sans-serif;
}

@font-face{
    font-family: sweet purple;
    src: url("../fonts/sweet\ purple.ttf");
    }

.sweet-purple {
    font-family: sweet purple, Arial, Helvetica, sans-serif;
}    

/*   ------- text colours -------   */
.text-purple {
    color: #480c91;
}
.text-white {
    color: #fff;
}


/*   ------- other text stuff -------   */
h1 {
    font-family: sweet purple, Arial, Helvetica, sans-serif;
}

.nav-text {
    font-size: 1.1em;
}


/*   ------- purple background -------   */
.bg-color {
    background-color: #480c91;
}

.bg-l-purple {
    background-color: #e0cbfa;
}


/*   ------- opacity on hover -------   */
.opc-hover {
    transition: 0.5s;
}
.opc-hover:hover {
    opacity: 0.7;
}


/*   ------- contact banner -------   */
.contact-btn:hover {
    background-color: #854dca;
}



/*  -----------------------------------------------   HOME   ---------------------------------------------------   */

.main {
    font-size: 6em
}

@media only screen and (min-width: 800px) {
    .main {
        font-size: 7em;
    }    
}

@media only screen and (min-width: 1080px) {
    .main {
        font-size: 8em;
    }    
}

@media only screen and (min-width: 1200px) {
    .main {
        font-size: 9em;
    }    
}

@media only screen and (min-width: 1585px) {
    .main {
        font-size: 12em;
    }
    }

.home-img {
    transform: scale(1.1);
    transition: 1s;
}

.home-img:hover {
    transform: scale(1);
    opacity: 0.8;
}

/*   ------- border -------   */
.border-purple {
    border: solid #480c91 10px;
}


/*   --------------------------------------------  ILLUSTRATIONS   --------------------------------------------   */

@media only screen and (min-width: 1200px) {
.cat {
    transform: rotate(-183deg);
    transition: 0.8s ease-in;
}
.cat:hover {
    transform: rotate(0deg);
}

.oops {
    position: absolute;
    color: #480c91;
   padding-left: 10px;
}
}

/*   ------------------------------------------------  DESIGN   ------------------------------------------------   */
/*   ------------------------------------------------  ABOUT   -------------------------------------------------   */
/*   ------------------------------------------------  CONTACT   -----------------------------------------------   */

.rounded-edges {
    border-radius: 30px;
}

.email{
    transition: 0.5s;
}
.email:hover {
    color: #854dca;
}

.submit {
    font-size: 2em;
}

.submit:hover {
    background-color: #854dca;
}