/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  margin: 0;
  color: black;
  font-family: "Kosugi Maru";
  overflow: hidden;
  background-image: url("bg-images/flower1.jpg");
  background-repeat: repeat;
}

/* Font Styles */
.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.hachi-maru-pop-regular {
  font-family: "Hachi Maru Pop", cursive;
  font-weight: 400;
  font-style: normal;
}
.teko {
  font-family: "Teko", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.oooh-baby-regular {
  font-family: "Oooh Baby", cursive;
  font-weight: 400;
  font-style: normal;
}
.kirang-haerang-regular {
  font-family: "Kirang Haerang", system-ui;
  font-weight: 400;
  font-style: normal;
}
.google-sans-code {
  font-family: "Google Sans Code", monospace;
  font-weight: 400;
  font-style: normal;
}

/* Container */
.container {
  display: grid;
  min-height: calc(100vh - 85px);
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  
  
  /*Pc gridding*/
  grid-template-areas:
  "box-1 box-2 box-4"
  "box-3 box-2 box-4";
  
  gap: 1em;  
  
  margin-inline: auto;
  max-width: 1240px; 
  height: auto;
  
  
  /*justify is used for columns, align is used for rows*/
  justify-content: center;
}



/* General settings */
h2{
  font-size: 15px;
}

/*------------------------*/
/*--------- Menu ---------*/
/*------------------------*/
.menuButtons {
  margin-top: 30px;
  margin-bottom: 40px;
  width: 50%;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: flex-end;
  padding-inline: 5px;
  padding-bottom: 55px;
  font-size: 15px;
  text-align: center;
  
  border-radius: 15px;
  
  outline-style: solid;
  outline-color: #FDB7C5;
  outline-width: 3px;
  
  background: linear-gradient(#FDF1E8, #FDF1E8, #FDF1E8, #FDF1E8, #FDF1E8, #E88292);
}


.menuTitle {
  margin: 5px;
  padding-bottom: 4px;
  font-weight: 900;
  border-bottom: 6px dotted white;
}

.menuTitle::before, .menuTitle::after {
  content: "☀️";
}

.btn {
  margin: 3px;
  /*outline-color: #FDCFD8;*/
  /*outline-width: 1px;*/
  text-decoration: none;
  font-weight: 700;
  position: relative;
  background: transparent;
  outline: none;
  padding: 0;
  border: none;
  display: inline-block;
  
  vertical-align: top;
  line-height: 1;
}

.btn .edge{
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #B3877D;
}

.btn .front{
  border-radius: 10px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  padding: 0.6rem 0.75rem;
  height: 0.4rem;
  transform: translateY(-0.25rem);
  transition: 0.5s;
  outline-style: solid;
  outline-color: white;
  outline-width: 2px;
}

.btn:hover .front{
  transform: translateY(-0.375rem);
  transition: 0.3s;
}

.btn1 .front{
  background-color: hsl(0, 95%, 80%);
}

.btn1:link .front, .btn1:visited .front{
  color: hsl(0, 80%, 45%);
}
.btn1:hover .front{
  background-color: hsl(0, 80%, 65%);
  color: hsl(0, 80%, 25%);
}

.btn2 .front{
  background-color: hsl(60, 90%, 85%);
}
.btn2:link .front, .btn2:visited .front{
  color: hsl(60, 80%, 45%);
}
.btn2:hover .front{
  background-color: hsl(50, 85%, 45%); 
  color: hsl(60, 25%, 25%);
}

.btn3 .front{
  background-color: hsl(120, 88%, 85%);
}
.btn3:link .front, .btn3:visited .front{
  color: hsl(120, 70%, 55%);
}
.btn3:hover .front{
  background-color: hsl(120, 70%, 55%); 
  color: hsl(120, 25%, 25%);
}


.btn4 .front{
  background-color: hsl(240, 88%, 85%);
}
.btn4:link .front, .btn4:visited .front{
  color: hsl(240, 70%, 55%);
}
.btn4:hover .front{
  background-color: hsl(240, 70%, 60%); 
  color: hsl(240, 25%, 25%);
}


.btn5 .front{
  background-color: hsl(275, 88%, 85%);
}
.btn5:link .front, .btn5:visited .front{
  color: hsl(275, 70%, 55%);
}
.btn5:hover .front{
  background-color: hsl(275, 70%, 60%); 
  color: hsl(275, 25%, 25%);
}

.btn:active .front{
  transform: translateY(-0.15rem);
  transition: transform 34ms;
}

.menuButtons img{
  height: 50px;
  width: 50px;
  object-fit: contain;
  align-self: flex-start;
}


/*------------------------*/
/*------ Centerpage ------*/
/*------------------------*/

/*Had some problems to figure out how do justify/align-items/content work

apparently, justify-self cannot be applied to elements in flexbox cuz it considers all those individual elements 
as one big element that gets changed.
basically trying to align an item within itself 
and based on that justify-items cannot be applied too

justify-content on the other hand manages a free space of the whole container


*/
.centerpage {
  /*#fff5f1*/
  display: flex;
  flex-direction: column;
  
  align-self: center;
  align-items: center;
  
  text-align: center;
  
  border-color: #FDB7C5;
  border-style: solid;
  border-radius: 10px;
  
  outline-offset: 5px;
  outline-color: #FDB7C5;
  outline-style: double;
  
}

.centerpage .logo{
  display: grid;
  
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  
  gap: 40px;
  
  background-color: #fff5f1;
  border-color: #FDB7C5;
  border-style: solid;
  padding-top: 15px;
  padding-bottom: 10px;
  
  width: 100%;
  min-width: 450px;
}

.logo img{
  
  width: 100%;
  margin-bottom: 10px;
  
  border-radius: 10px;
  object-fit: contain;
}

.logo .flower{
  max-width: 100px;
  min-width: 80px;
  
  align-self: flex-end;
  margin-bottom: 40px;
  
}

.logo .Melia{
  max-width: 375px;
  min-width: 200px;
  
  outline-offset: 5px;
  outline-style: solid;
  outline-color: #FDB7C5;
}


.pageTitle {
  background-color: #fff5f1;  
  border-radius: 40px;
  
  padding-inline: 10px;
  
  padding: 5px 10px 5px 10px;
  
  margin-top: 5px;
  margin-bottom: 5px;
  
  border-style: dotted;
  border-color: #FDB7C5;
  underline-style: dotted;
  underline-color: white;
  
  font-family: "Hachi Maru Pop", cursive;
  font-weight: 900;
  font-size: 12px;
}

.phrase p{
  max-width: 400px;
  font-size: 12px;
  
  margin-top: 15px;
  margin-bottom: 30px;
}

.pageTitle h1{
  margin: 0;
  padding: 0;
}

/*------------------------*/
/*------- Leftside -------*/
/*------------------------*/
.leftside {
  align-self: flex-start;
  justify-self: center;
  padding: 10px;
  margin: 30px 0px 30px 0px;
  text-align: center;
}
.content{
  display: flex;
  flex-wrap: nowrap;
  margin: 5px;
}

/* Character internal files */
.Arrow {
  width: 125px;
  height: 50px;
}

.Duck{
  width: 125px;
  height: 75px;
}

.character img{
  width: 125px;
  height: 125px;
}

.fanbox {
  /*for text and general sizing*/
}



/*------------------------*/
/*------ Rightside -------*/
/*------------------------*/

.rightside{
  justify-items: center;
  align-self: center;
  text-align: center;
  max-width: 300px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.artoftheday img{
  max-width: 100%;
  max-height: 100%;
  min-width: 150px;
  min-height: 150px;
  width: 250px;
  height: 250px;  
  object-fit: contain;
}

.gifbulb {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 20px;
}

.gifbulb img{
  min-width: 50px;
  min-height: 50px;
  width: 100px;
  height: 100px;  
}

/*------------------------------
            Calendar
  ------------------------------*/

.calendar{
  font-family: "Kirang Haerang", system-ui;
  display: flex;
  flex-direction: column;
  
  container-type: inline-size;
  overflow: hidden;
  min-width: 50px;
  max-width: 225px;
  
  
  border: 2px solid #DE6D85;
  
  width: 100%;
  height: 100%;
  
  border-radius: 10px;
  margin-top: 20px;
  padding: 5px;
  box-sizing: border-box;
  background-color: hsl(10, 85%, 90%);
}

.calendar_header{
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  margin-bottom: 7px;
}
.calendar_navigation {
  flex-wrap: nowrap;
  gap: 5px;
  font-size: 5cqi;
}

.calendar_header p{
  margin: 0;
  margin: 5px;
  padding: 0;
  font-size: 9cqi;
}
.calendar_body {
  justify-content: center;
  align-items: center;
  font-family: "Google Sans Code", monospace;
  background-color: #FFEDE3;
  padding: 2px;
  border-radius: 5px;
}

.calendar_body ul{
  margin: 0;
  padding: 0;
  
  list-style: none;
}
/**/
.calendar_body li{
  padding: 5px;
  border-radius: 10px;
  text-align: center;
  min-width: 0;
  width: calc((100% / 7) - 8px - 10px); 
  /* 8px is for margin added from both sides of calendar body, and 20px is from padding from same calendar body */
  
  
  margin: 4px;
  font-size: 4cqi;
}

.calendar .calendar_dates, .calendar_weekdays{
  /*display: grid;*/
  /*grid-template-columns: repeat(7, 1fr);*/
  /*grid-template-rows: repeat(6, 1fr);*/
  
  display: flex;
  flex-wrap: wrap;
  
}

.calendar img{
  max-height: 100%;
  min-width: 100px;
  min-height: 100px;
  width: 200px;
  height: 200px;  
  object-fit: fill;
}

header .calendar_navigation span{
  background: #ffede3;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
}

.calendar_weekdays li{
  background: white;
  outline-style: solid;
  outline-color: #E65C81;
  outline-width: 2px;
}

.calendar_dates li{
  background-color: pink;
  outline-style: solid;
  outline-color: #F783A2;
  outline-width: 2px;
  cursor: pointer;
}

  
.calendar_dates .highlight{
  background-color: white;
  box-shadow: inset 0 0 0 1px hsl(0, 95%, 70%);
}

.calendar_dates .inactive{
  background-color: #FFE3E9;
  outline-style: solid;
  outline-color: #F0ADBE;
  outline-width: 2px;
}
.calendar_dates li:not(active):not(highlight):hover {
    background-color: white;
}

.calendar_dates .active{
  background-color: orange;
  outline-style: solid;
  outline-color: #ff531f;
  outline-width: 2px;
}