@charset "utf-8";

/*
  電卓専用 CSS
  Grid Layout
============================== */

/* 背景・フォント ==================== */

body {
  background-image: url("../images/background.png");
  background-repeat: repeat;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
}


/* 電卓本体 ==================== */

.calculator {
  background: linear-gradient(135deg, #fffdf5, #ffd98a);
  width: 360px;

  margin: 20px auto;
  padding: 30px;
  border: 4px solid #e6bd77;
  border-radius: 40px;
  box-sizing: border-box;

  box-shadow:
    0 5px 0 #e6bd77,
    0 12px 22px #c9b38f,
    0 5px 12px #ffffff inset,
    0 -4px 8px #e8c88f inset;

  font-size: 60px;
}


/* 電卓の表示画面 ==================== */

.calculator h1 {
  background: linear-gradient(135deg, #d5e9d9, #b9dfd5);

  display: flex;
  justify-content: flex-end;
  align-items: center;

  margin-bottom: 35px;
  height: 95px;
  padding: 15px;
  border-radius: 20px;

  font-size: 36px;
  color: #4a321d;
  border: 4px solid #65b69e;

  box-shadow:
    0 3px 8px #a6bca9 inset,
    0 -3px 8px #ffffff inset,
    0 5px 10px #b5a98e;
}


/* ボタンの配置 ==================== */

.calculator ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 30px;
  justify-content: center;
}


/* ボタンのデザイン ==================== */

.calculator li {
  width: 80px;
  height: 80px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 36px;
  border-radius: 50%;

  box-shadow:
    0 8px 0 #d8c9aa,
    0 14px 18px #c9b38f,
    0 14px 16px #ffffff inset,
    0 -10px 14px #c9b38f inset;

  /* 指マークに変更 */
  cursor: pointer;

  /* 動きを滑らかに */
  transition: 0.15s;
}


/* ボタンのカラー ==================== */

#mint1,
#mint5,
#mint9 {
  background-color: #c9e8df;
}

#pink2,
#pink6,
#pink0 {
  background-color: #f6cbd8;
}

#yellow3,
#yellow7 {
  background-color: #f9e6a8;
}

#purple4,
#purple8 {
  background-color: #ded3f3;
}


/* 0ボタンのサイズ ==================== */

#pink0 {
  grid-column: 1 / 4;
  border-radius: 100px;
  width: auto;
}


/* マウスを重ねたとき ==================== */

.calculator li:hover {
  background-color: #ffffff;
}

#mint1:hover,
#mint5:hover,
#mint9:hover {
  background-color: #8fd4c0;
}

#pink2:hover,
#pink6:hover,
#pink0:hover {
  background-color: #ee9fb9;
}

#yellow3:hover,
#yellow7:hover {
  background-color: #f5cf69;
}

#purple4:hover,
#purple8:hover {
  background-color: #bba5e8;
}


/* ボタンを押したとき ==================== */

.calculator li:active {
  /* ボタンが6px沈み込む */
  transform: translateY(6px);

  /* 影を短くして押し込んだ感じに */
  box-shadow:
    0 2px 0 #d8c9aa,
    0 4px 8px #c9b38f,
    0 4px 8px #ffffff inset,
    0 -4px 8px #c9b38f inset;
}