@font-face {
  font-family: "Allison";
  src: url("fonts/Allison.ttf") format("truetype");
}
@font-face {
  font-family: "Amita";
  src: url("fonts/Amita.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "AmitaBold";
  src: url("fonts/AmitaBold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "CuteFont";
  src: url("fonts/CuteFont.ttf") format("truetype");
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces.ttf") format("truetype");
}
@font-face {
  font-family: "FrauncesItalic";
  src: url("fonts/FrauncesItalic.ttf") format("truetype");
  font-style: italic;
}
@font-face {
  font-family: "Mansalva";
  src: url("fonts/Mansalva.ttf") format("truetype");
}
@font-face {
  font-family: "Bitcount";
  src: url("fonts/Bitcount.ttf") format("truetype");
}
@font-face {
  font-family: "Pixelify";
  src: url("fonts/Pixelify.ttf") format("truetype");
}


body {
    margin:0;
    font-family: "Pixelify", serif;
    font-size: 22px;
    background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), url("gif/pinksparkle.gif");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    height:100vh;
    overflow:hidden;
    color: #2f1b14;
    cursor: url("images/heelpointer.png") 0 0, auto;
}
h1 {
  font-family: "Allison", serif;
  color: #4a2c22;
}
h2 {
  font-family: "Fraunces", serif;
  color: #5a3e36;
}
h3 {
  font-family: "Mansalva", cursive;
  color: #1f120e;
}
h4 {
  font-family: "Amita", serif;
  color: white;
}
h5 {
  font-family: "Bitcount", serif;
  color:#B4814B;
}
h6 {
  font-family: "Pixelify", serif;
  color:#B4814B;
}
p {
  font-family: "FrauncesItalic", serif;
  color: #2f1b14;
}


a:hover,
button:hover,
img:hover,
[onclick]:hover
{
    cursor: url("images/heels2cursor.png"), pointer;
}


.desktop{
    position:relative;
    width:1200px;
    height:710px;
    margin:35px auto;
    border-radius:25px;
    background-color:#fcdcd4;
    background-size:cover;
    background-position:center;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;    
    overflow:hidden;
}
.menubar{
    width:1200px;
    height:37px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-sizing:border-box;
    background:rgba(255,255,255,.75);
    background-image:url("images/menubarbg2.png");
    font-family: "Bitcount", serif;
    font-size:18px;
    color: #432b1f;
}
.desktop-content{
    flex:1;
    display:grid;
    grid-template-columns:450px 1fr;
    gap:30px;
    padding:20px;
    overflow:hidden;
}
.left-column{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
}
.icon-grid {
    display:grid;
    grid-template-columns:repeat(4, 2fr);
    gap:20px;
    margin-top:20px;
    column-gap:20px;
    width:100%;
}
.icon{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    color:white;
    text-shadow:1px 1px 3px black;
    transition:.2s;
}
.icon img{
    width:100px;
    height:auto;
    margin-top:-30px;
}
.icon span{
  margin-top:8px;
  white-space:nowrap;
}
.icon:hover{
      transform:scale(1.1);
}
.right-column{
    display:flex;
    flex-direction:column;
    gap:10px;
    height:100%;
    margin-top:2px;
    align-items:flex-end;
}
.right-topcolumn{
    width:400px;
    height:280px;
    background:rgba(255,255,255,.75);
    border-radius:20px;
    border:2px solid #d89b9b;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:10px;
    box-sizing:border-box;
}
.right-middlecolumn{
    width:400px;
    height:130px;
    background:rgba(255,255,255,.75);
    border:2px solid #d89b9b;
    border-radius:20px;
    padding:15px;
    box-sizing:border-box;
    overflow-y:auto;
    overflow-x:hidden;
    font-size:15px;
}
.right-bottomcolumn{
    width:400px;
    height:200px;
    background:rgba(255,255,255,.75);
    border:2px solid #d89b9b;
    border-radius:20px;
    padding:15px;
    align-items:center;
    box-sizing:border-box;
}


.corner-gif {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 150px;
    height: auto;
    z-index: 9999;
    pointer-events: none;
    animation: floaty 3s ease-in-out infinite;
    }
  @keyframes floaty {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(10px); }
    100% { transform: translateY(0px); }
    }
  

.bg-button{
    position:absolute;
    top:5px;
    left:425px;
    width:180px;
    height:auto;
    cursor:pointer;
    z-index:9999;
}


.return-link {
    display: inline-block;
    padding: 10px 25px;
    background: #e9a6b5;
    color: white;
    border-radius: 25px;
    text-decoration: none;
    font-size: 25px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transition: 0.3s ease;
}
.return-link:hover {
    background: #f3c1cc;
    transform: scale(1.1);
}



.window-title {
    width: 100%;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
}
.window-title img {
    width: 150px;
    height: auto;
}
.right-topcolumn iframe{
    width:360px;
    height:220px;
    margin-top:6px;
    margin-bottom:10px;
    border:none;
    border-radius:10px;
}