@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');
.big_daddy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
}
.navbar-nav.navbarcenter {
    position: relative;
    left: 50%;
    transform: translatex(-50%);
}

.nav-link.mylink{
    font-weight: bold;
    color: rgba(242, 46, 46, 0.88) !important
}
.nav-link.mylink:hover{
    color: rgba(19, 17, 17, 0.88) !important
}

.navbarlogo {
    width: 20vh;
}
.nav-item {
    align-self: center;
}
.mainheader {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    align-self: center;
    text-align: center;
    margin-top: 2vh;
    font-weight: 600;
}
.main_container{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.footer{
    display: flex;
    justify-content: center;
    padding: 5vh;
    background-color: black;
}
.footer_items {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.footer_title {
    color:azure
}

.biolink {
    color:azure;
    text-align: center;
    text-decoration: none;
    font-size: 14pt;
}

.card_text_j{
    font-size: 15pt;
    margin-top: 5%;
}

.whoframe{
    display: flex;
    flex-direction: column;
    align-self: center;
    text-align: center;
    font-family: 'Covered By Your Grace', cursive;
    background-image:  linear-gradient(#D1D1D1 1px, transparent 1px), linear-gradient(to right, #D1D1D1 1px, #DEDEDE 1px);
    background-size: 20px 20px;
    margin-top: 2vh;
    position: relative;
}
.whoframe__title_container{
    display: flex;
    justify-content: center;
}
.whoframe__title_paper{
    width: 50vh;
}


.whoframe__title{
    position: relative;
}

.draws_container{
    width: 100%;
    height: 100%;
    position: absolute;
}

.draws_container__box{
    position: relative;
    width: 100%;
    height: 100%;
}

.draws_container__dog{
    height: 30vh;
    transform: rotate(10deg);
    position: absolute;
    left: 0px;
}

.draws_container__stick{
    height: 30vh;
    transform: rotate(-10deg);
    position: absolute;
    right: 10%;
    top: 20%;

}

.avatar{
    border-radius: 20%;
    width: 35vh;
    margin-top: 0.5vh;
    align-self: center;
    --shine-angle: 15deg;
    border: white solid 1vh;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.biotitle{
    opacity: 0.8;
    font-size: 4vh;
    margin: 0;
    font-weight: bold;
    z-index: 2;
    position: absolute;
    top: 40%;
    left: 32%;
}
.whoframe__description_container{
    opacity: 0.8;
}


.bio{
    font-size: 27pt;
    margin: 1.3vh;
    font-weight:bold;
}
.nmrow>*{
    padding:0;
    min-height: 72.4vh;
}
.hobbiecard h5{
    font-size: 18pt;
    margin-top: 2vh;
}

.hobbiecard p{
    font-size: 14pt;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 2vh;
}
.hobbie_image{
    border-radius: 5%;
}

.dreaminput{
    margin: 0 50vh;
    color:white !important;
    text-align: center ;
}

.dreaminput:focus{
    outline: solid 0.45vh rgba(245, 7, 7, 0.69);
    border-color: rgba(245, 7, 7, 0.69);
}

.dreaminput::placeholder{
    color: white ;
    opacity: 1;
}

.futureFortune{
    text-align: center;
    text-decoration: underline;
    animation-name: rainbow;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.futureFortune img{
    width: 80vh;
    border-radius: 1%;
}

@keyframes rainbow {
    0% {color: rgba(255, 10, 10, 0.8)}
    25% {color: rgba(0, 255, 10, 0.8)}
    50% {color: rgba(0, 0, 255, 0.8)}
    100% {color: rgba(255, 10, 10, 0.8)}
}

.pomo{
    background-color: rgba(242, 46, 46, 0.88);
    min-height: 72.4vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.timer{
    background: none;
    border: 0;
    width: 100%;
    max-height: 40vh;
    font-size: 40vh;
    text-align: center;
    color: white;
}

.timer::placeholder{
    color: white !important;
    opacity: 1;
}

.timer:focus{
    border: none;
    outline: none;
}

input:focus::placeholder {
    color: transparent !important;
  }