/* * {
    outline: red 1px solid;
}
 */
@font-face {
  font-family: 'scribble';
  src: url('fonts/PulpenSnowman-axdpo.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    background-image: url('images/paper.png');
    font-family: 'scribble';
    padding: 5vw 5vh;
    font-size: 30px;
}

#navbar {
    display:flex;
    flex-direction: row;
    align-items: center;
    gap:20px;

    padding:5px;
    font-size: 70px;
    font-weight: bold;
    height: 140px;
}

#logo {
    width:120px;
    height:120px;
}

#logo-container {
    background-image: url('images/logo.png');
    background-size: cover;
}

.align-to-right {
    display:flex;
    justify-content: right;
}

#welcomeBox {
    position: absolute;
    left: 10%;
    top: 40%;
    width:500px;
    height:auto;
    box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.4);
    background-image: url('images/paper.png');
    padding: 20px;
    display:flex;
    flex-direction: column;
}

.generic-window {
    width:800px;
    height:600px;
    position: absolute;
    display:none;
    background-image: url('images/paper.png');
    padding: 20px;
    flex-direction: column;
    box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.4);
}
.generic-window:hover {
    cursor: grab;
}

#welcomeBox:hover {
    cursor: grab;
}

#mini-nijika {
    width:200px;
    height:200px;
    background-image: url("https://img.amiami.com/images/product/main/242/GOODS-04483923.jpg");
    background-size: cover;
}

.close {
    width:50px;
    height:50px;
    background-image: url("images/x.png");
    background-size: cover;
    cursor:default;
}

.close:hover {
    background-image: url("images/cry.png");
    cursor: pointer;
}

#appgrid {
    width: 80%;
    height: 70vh;
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap:10px;
}

.app {
    width: 140px;
    height: 240px;
}

.app:hover {
    background-color: rgba(102, 177, 200, 0.285);
    outline: 4px solid rgba(50, 190, 233, 0.467);
}

.app-icon {
    width: auto;
    height: 140px;
}

#grass-icon {
    background-image: url("images/grass-toucher.png");
    background-size: cover;
}

#welcome-icon {
    background-image: url("images/welcome.png");
    background-size: cover;
}

#feedback-icon {
    background-image: url("images/feedback2.png");
    background-size: cover;
}

#grass-app-image {
    width: 100%;
    height: 100%;
    background-image: url("https://extension.psu.edu/media/catalog/product/7/b/7b7234b093c9651b81d27f0e4aef446e_2.jpeg");
    background-size: cover;
}

#grass-app-image:hover {
    cursor: url("https://static.vecteezy.com/system/resources/thumbnails/047/423/935/small/handshake-isolated-on-transparent-background-free-png.png") 16 16, auto;
}

.app-title {
    font-size: 25px;
    margin: 15px;
    text-align: center;
}