body{
    background-color:#fde4f2;
    color:white;
    overflow-x: hidden;
    overflow-y: hidden;
}

.frontText{
    margin:0px;
}
.front{
    display:flex;
    justify-content: center;
    align-items:center;
    flex-direction: row;
    font-size:25px;
    height:100vh;
    /* border:10px black solid; */
}

.centerT{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    flex-direction:column;
}


.third{
    width:33%;
    height:100vh;
}

.flip{
    transform: rotateY(180deg);
}

button{
    background:none;
    border:none;
    color:white;
    cursor:pointer;
    font-size:40px;
}

.box{
    border:5px solid white;
    padding:50px;
    margin:10px;
}

.boxC{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:row;
}

.text{
    padding-left:19%;
    font-size:20px;
}

.outfitSize{
    height:15%;
    width:15%;
}

.page{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
}

.card{
    display:flex;
    align-items:stretch;
    width:50%;
    margin-top:30px;
    background-color:white;
    color:black;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
    overflow:hidden;
}

.cardSection{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:row;
    /* border:3px solid blue; */
}

.centerD{
    width:10%;
    padding-top:5%
}

.cardInfo{
    padding:5%;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.cardImg{
    flex:0 0 40%;
    max-width:40%;
}

.cardImg img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hidden{
    display:none;
}

.title{
     display: flex;
  justify-content: space-between;
  align-items: center; 
  width:100%
  /* border:1px solid blue; */
}

.titleCenter {
  font-size: 2em;
  margin: 0;
  text-align: center;
}

.backHobbies{
    font-size:40px;
}

.hob{
    padding-right:50px;
}

.titleC {
  display: flex;
  justify-content: center; 
  align-items: center;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.backBtn {
  position: absolute;
  left: 25%;
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
  transition: all 200ms linear;
}


.pageC{
    flex-direction:column;
    height:100vh;
}

.list{
    padding-left:2%;
}

.hobbiesBtn:hover{
    margin-bottom:10%;
    margin-left:10px;
    box-shadow:0 6px 17px rgba(0,0,0,0.12);
    transition: all 200ms linear;
}

.meBox {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.meInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 800px;
  font-size: 20px;
  line-height: 1.6;
  color: white;
}

.rabbitAndMe {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 20px;
}

.rabbit {
  width: 200px;
  height: auto;
}