@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

body{
    background-image: url(images/d17334ea826a4028d544174da004c408.jpg);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95vh;
    color: #2a2627;
}

*{
    cursor: url(cursors/cursor_point1a.gif), auto;
}

:root{
    --borderWIP: 1.5px solid #95757a;
}

@font-face {
    font-family: 'Unchanged';
    src: url(https://file.garden/Z1NrfbbjjD-R7zcB/fonts/unchanged.ttf);
}

@font-face {
    font-family: 'Angelic Serif';
    src: url(https://file.garden/Z1NrfbbjjD-R7zcB/fonts/Angelic%20Serif.ttf) format("truetype");
}

button{
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(to bottom, #fdf3f9 0%,#fcc4d4 50%,#feaec2 51%,#ffa7c0 100%);
    border: 2px solid #625253;
    border-radius: 5px;
    padding: 0.5rem;
    box-shadow: 1px 1px 5px;
}

button a{
    font-family: "Fredoka", sans-serif;
    font-size: 1.2rem;
    color: #625253;
    font-weight: 500;
    text-decoration: none;
}

button:hover{
    background: linear-gradient(to bottom, #fdebf7 0%,#fda5c4 50%,#fe8aaf 51%,#ff7fac 100%); 
    outline: 1px solid black;
}


.wrap{
    background-color: white;
    background-image: url(images/312c2d7b74efd7b368235643f70ae47b.png);
    background-size: 20%;
    border: var(--borderWIP);
    width: 42rem;
    height: fit-content;
    padding: 0.8rem;
    border-radius: 10px;
    box-shadow: 1px 1px 8px #625253;
}

header{
    background-image: url(images/pink09.jpg);
    background-size: 50%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: var(--borderWIP);
    height: 8rem;
    margin-bottom: 0.5rem;
}

header h1{
    line-height: 0;
    font-family: 'Unchanged';
    font-size: 6.5rem;
    text-align: center;
    color: #3f2e2f;
    text-shadow: 0px 0px 5px;
}

h2, h3{
    font-family: 'Angelic Serif';
    text-shadow: 0px 0px 3px #95757a;
}

h2:hover, h3:hover{
    font-style: italic;
}

#main{
    display: flex;
    flex-direction: row;
}

#left{
    width: 35%;
    border: var(--borderWIP);
    margin-right: 0.5rem;
    padding: 0.5rem;
}

#right{
    border: var(--borderWIP);
    width: 65%;
    padding: 0.5rem;
}

/*boxes*/
.bg{
    background-image: url(images/pink12.jpg);
    background-size: cover;
}

.white { 
    border-width: 7px; 
    border-style: solid;
    border-image: url(dividers/border23.png) 22 fill round;
    padding: 0.5rem;
}