* {
   font-family: "source-serif-pro", serif;
   font-weight: 400;
   font-style: normal;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background-color: white;
}

.home-name {
   font-size: 5.5vw;
   margin: 0 auto;
   margin-bottom: 3vw;
}

.homepage {
   display: flex;
   margin: 50px;
   flex-wrap: wrap;
}

.box {
   display: flex;
   flex: 1;
   flex-flow: row wrap;
   min-width: 300px;
}

.Lbox {
   background-color: rgba(198, 141, 255, 0.54);
   border: .5px solid rgba(198, 141, 255, 0.6);
   color: black;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.navbar {
   display: flex;
   flex-direction: column;
   gap: 3vw;
}

.nav-button {
   background-color: white;
   color: black;
   text-align: center;
   padding: 3px 8.5vw;
   text-decoration: none;
   font-size: 2.7vw;
   transition: background-color 0.3s;
   border: solid 1.5px rgb(54, 54, 54);
   border-radius: 1px;
}

.nav-button:hover {
   background-color: #A5E9FD;
} 

.Rbox {
   background-color: white;
   display: flex;
   justify-content: center;
   align-items: center;
}

.Rbox img {
   max-width: 100%;
   height: auto;
}

@media all and (max-width: 600px) {
   .homepage {
      width: 100%;
   }
}