/* FOR EVERYTHING */
p{
    font-family: Papernotes;
    color: #68062c;
}
h1{
    font-family: Starborn;
    color: #68062c;
}
button{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    padding: 10px 10px;
    background-color: #962953;
    color:rgb(239, 248, 254);
    font-family: Papernotes;
}

body {
    background:#b9f5f6;
}

iframe{
    width: 200px;
    height: 500px;
    border-radius: 20px;
}

/* Everything here pertains to index.html*/
#introblock {
    margin: 10px auto;
    padding: 20px;
    background-color: #cd80b7;
    border-radius: 20px;
    max-width: 800px;
}

/* This is code pertaining to the contact me page!*/
.contact{
    height:-200vh;
    display: flex;
    align-items: center;
    justify-content:center;
}
.c-left{
    display:flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;

    background-color: #cd80b7;
    border-radius:20px;
    border: 40px solid #cd80b7;
    font-family: Papernotes;
    }

.c-right{
    width: 600px;
}

#Onphone{
    scale: auto;
    width:450px;
    height: auto;
}

#contactheader {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 0px;
    color: #962953;
    }
textarea { resize: none; }

/* About Me Page! */
#aboutmeheader{
    font-family: Starborn;
    text-align: center;
    color:#68062c;
}

.titlecard {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:row;
  padding: 10px;
  background-color:#cd80b7;
  border-radius: 20px;
  margin-bottom: 1rem;
  max-width: 860px;

  margin: 0 auto;
  margin-bottom: 10px;
}

.titlecard img{
    width: 200px;
    height: auto;
    border-radius: 20px;
}

.titlecard p {
    margin-left: 1rem;
    color:#68062c;
    text-align: left;
}

#centeralign{
    display: flex;
    justify-items: center;

}

.faq-icons{
    margin: 0 auto;
    background:#cd80b7;
    padding: 40px;
    border-radius: 20px;
    color: aqua;
    min-width: 800px;
    max-width: 800px;
    
    display: table-cell;
    vertical-align: middle

}

.faq-icons h2{
    text-align: center;
    margin-bottom: 25px;
    color:#68062c;
    font-family: Supermagical;
}

details{
    background: rgba(255,255,255, 0.05);
    border-radius: 20px;
    margin: 15px;
    padding: 15px 20px;
    border-left: 5px solid #68062c;
}

summary{
    font-weight: 600;
    cursor: pointer;
    font-family: Love;
}

/*Portfolio Gallery*/

.galleryhead{
    font-family: Love;
    text-align: center;
    color:#68062c;
}

#mywork{
    text-align: center;
}

.gallerymaster{
    display: flex;
    flex-direction: row;
}

.gallery{
    display: inline-block;
    margin: 15px;
    max-width: fit-content;
}
.gallery .description{
    padding: 10px;
    text-align: center;
}
.galler:hover{
    border: 1px solid hsl(0, 0%, 20%);
}
.gallery img{
    width: 50%;
    height: auto;
    display: block;
    margin: auto;

}

#gallery2{
    width: 200%;
    height: auto;
}

/* NAVIGATION BAR STYLING! */
    .navigation{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: SuperMagical;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    nav {
        position: relative;
        width: 1080px;
        height: 50px;
        background:#6fbcbd;
        border-radius: 8px;
        display: flex;
        justify-content: left;
        align-items: center;
    }

    nav a{
        font-size: 1em;
        font-weight: 1000;
        color: #68062c;
        text-decoration: none;
        padding: 0 23px;
        z-index: 1;
    }

    nav span {
        position: absolute;
        top: 0;
        left: 0;
        width: 95px;
        height: 100%;
        background: linear-gradient(45deg, #f21e8f, #cd80b7);
        border-radius: 8px;
        transition: 0.5s;
    }
    nav a:nth-child(1):hover~span{
        left: 0;
    }
    nav a:nth-child(2):hover~span{
        left:90px
    }
    nav a:nth-child(3):hover~span{
        left: 190px;
    }
    nav a:nth-child(4):hover~span{
        left: 300px;
    }

    #navlogo{
        width: 20%;
        height: auto;
    }

/*Fonts*/
@font-face {
    font-family: Supermagical;
    src: url(fonts/Super\ Magical.ttf);
}
@font-face {
    font-family: Icecream;
    src: url(fonts/Ice\ Cream.otf);
}
@font-face {
    font-family: Love;
    src: url(fonts/Love.ttf);
}
@font-face {
    font-family: Miracledays;
    src: url(fonts/miracle_days/Miracle\ Days.otf);
}
@font-face{
    font-family: Papernotes;
    src: url(fonts/papernotes/Papernotes.otf);
}
@font-face {
    font-family: Starborn;
    src: url(fonts/starborn/Starborn.otf);
}