/* fonts and stuff start */
* {
  box-sizing: border-box;
}

h1{ 
    font-family: lust,serif;
    font-weight: 700;
    font-style: normal;
    font-size: x-large;
    color: rgb(96,99,128);
} 
img {
  width: 100%;
}
h1 {
  font-family: lust, serif;
  font-weight: 700;
  font-style: normal;
  font-size: larger;
  color: rgb(96, 99, 128);
}

h2 {
  font-family: lust, serif;
  font-weight: 700;
  font-style: normal;
  font-size: medium;
  color: rgb(96, 99, 128);
}

h3 {
  font-family: komet, sans-serif;
  font-weight: 400;
  font-style: medium;
  color: rgb(96, 99, 128);
}

p {
  font-family: komet, sans-serif;
  font-weight: 400;
  font-style: 24px;
  color: rgb(96, 99, 128);
}

body {
  background-color: rgb(251, 243, 238);
}

/* Style the navigation menu */
.navbar {
    width: 100%;
    overflow: auto;
    display: flex;
    justify-content: center;
  }
  

  /* Navigation links */
  .navbar a {
    float: left;
    color: white;
    text-decoration: none;
    font-size: 17px;
    padding: 8 px; 
    width: 10%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
    text-align: center; /* If you want the text to be centered */
  }
  
  /* Add a background color on mouse-over */
  .navbar a:hover {
    background-color:  rgb(213,186,190);
}
  
  /* Style the current/active link */
  .navbar a.active {
    border-bottom: 3px solid rgb(96,99,128);
    
  }

/* Navigation links */
.navbar a {
  float: left;
  color: white;
  text-decoration: none;
  font-size: 17px;
  padding: 8 px;
  width: 10%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}

/* Add a background color on mouse-over */
.navbar a:hover {
  background-color: rgb(213, 186, 190);
}

/* Style the current/active link */
.navbar a.active {
  border-bottom: 3px solid rgb(96, 99, 128);
}
/* fonts and stuff end */

/* home page start */

.homegrid{
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-gap: 40px;
}

.homegrid .center{
  grid-row: 1 / 4;
  grid-column: 2 / 3;
}

.homegrid .centerbottom{
  grid-row: 4 / 4;
  grid-column: 2 / 3;
}

.homegrid .left{
  justify-content: end;
  text-align: right;
  font-size: xx-large;
}
.homegrid .right{
  justify-content: end;
  text-align: left;
  font-size: xx-large;
}

.star2{
  animation: star 5s ease reverse forwards infinite;
}

.star1{
  animation: star 5s ease reverse forwards infinite;
}

.star3{
  animation: star 5s ease reverse forwards infinite;
}

.star4{
  animation: star 5s ease reverse forwards infinite;
}

.star5{
  animation: star 5s ease reverse forwards infinite;
}

.star6{
  animation: star 5s ease reverse forwards infinite;
}

.star7{
  animation: star 5s ease reverse forwards infinite;
}

.star8{
  animation: star 5s ease reverse forwards infinite;
}

@keyframes star {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
/* home page end */


/* star placement for subpages */
.star-placement{
  position: absolute;
  /* z-index:-1; */
  width:97vw;
  height:90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.star-placement .right {
text-align:right; 
}
.star-placement div img {
  width:122px;
  height: 111px;
}
.star-placement div:nth-child(3),.star-placement div:nth-child(4){
  align-self: end;
}
/* contact start */

/* Style inputs with type="text", select elements and textareas */
input[type="text"],
select,
textarea {
  font-family: komet, sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid rgb(96, 99, 128); /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type="submit"] {
  background-color: rgb(96, 99, 128);
  color: rgb(251, 243, 238);
  font-family: lust, serif;
  font-weight: 700;
  font-style: normal;
  font-size: small;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* contact end */

/* bookings start */

.bookgrid{
  display: grid;
  grid-template-columns: 20% 20% 20% 20%;
  grid-gap: 50px;
}

.bookgrid .deliah {
  display: flex;
  grid-row: 1 / 4;
  grid-column: 1 / 4;
}

.bookgrid .deliahtext {
  display: flex;
  grid-row: 2 / 4;
  grid-column: 1 / 4;
}

.bookgrid .deliah:hover {
  background-color: rgb(213, 186, 190);
}

  .bookgrid .miss {
    display: flex;
    grid-row: 1 / 4;
    grid-column: 2 / 4;
  }
.bookgrid .misstext {
  display: flex;
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

.bookgrid .miss:hover {
  background-color: rgb(213, 186, 190);
}

.bookgrid .omikemi {
  display: flex;
  grid-row: 1 / 4;
  grid-column: 3 / 4;
}
.bookgrid .omikemitext {
  display: flex;
  grid-row: 2 / 4;
  grid-column: 3 / 4;
}
.bookgrid.omikemi:hover {
  background-color: rgb(213, 186, 190);
}

.bookgrid .andi {
  display: flex;
  grid-row:  1 / 4;
  grid-column: 4 / 4;
}

.bookgrid .anditext {
  display: flex;
  grid-row:  2 / 4;
  grid-column: 4 / 4;
}

.bookgrid .andi:hover {
  background-color: rgb(213, 186, 190);
}


/* bookings end */

/* shop start */

div.gallery {
  margin: 40px;
  text-align: center;
  flex: 18%;
}

div.gallery img:hover {
  transform: rotateY(180deg);
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 10px;
  text-align: justify;
  font-family: komet, sans-serif;
  font-weight: 400;
  font-style: 24px;
  color: rgb(96, 99, 128);
}

/* shop end */

/* blog start */
.bloggrid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 40px;
  width: 70%;
  margin: auto;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.bloggrid .leftcolumn {
  justify-content: left;

}

/* Right column */
.bloggrid .rightcolumn {
  justify-content: right;
  position: relative;
}
.bloggrid hr.hrulevert {
  position: absolute;
  top:0;
  left:0;
  height:100%;
  transform:rotate(90deg);
}
.bloggrid .hrpad {  padding-left: 40px;
}
.bloggrid .left{
  justify-content: end;
  width: 122px; 
  height: 111px;  
}

.bloggrid .right{
  justify-content: end;
  width: 122px; 
  height: 111px;  
}

/* Header/Blog Title */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
}

/* Fake image */

.fakeimg {
  width: 100%;
  padding: 20px;
  word-wrap: break-word;
}
/* blog end */

/* stars spin start */
.homegrid .left svg:hover{
  transition: transform .2s ease-in-out;
  transform: rotate(360deg);
}

.homegrid .right svg:hover{
  transition: transform .2s ease-in-out;
  transform: rotate(360deg);
}
.homegrid .left svg:hover{
  transition: transform .2s ease-in-out;
  transform: rotate(360deg);
}

.star-placement .right img:hover{
  transition: transform .2s ease-in-out;
  transform: rotate(360deg);
}
.star-placement .left img:hover{
  transition: transform .2s ease-in-out;
  transform: rotate(360deg);
}
/* stars spin end */

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }

    /* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
    @media screen and (max-width: 500px) {
      .navbar a {
        float: none;
        display: block;
        width: 100%;
        text-align: center; /* If you want the text to be left-aligned on small screens */
      }
}