@charset "utf-8";

/* 電卓CSS */
/* 全体共通設定 ==================== */

:root {
  --color-white: #f9f9f9;
  --color-black: #333;
  --color-darkGray: #666;
  --color-lightgray: #aaa;
}

html {
  font-size: 16px;
  line-height: 1.8;
  font-family: sans-serif;
  background-color: var(--color-white);
  color: var(--color-black);
  scroll-behavior: smooth;
}




body {
    background-color: palegoldenrod;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

header {
  background-color: #d9e2f5;
  color: var(--color-white);
  text-align: center;
}

/* sectionの設定 */
section {
    background-image: url(../images/timjl-milky-way-10427641_1920.jpg);
    width: 760px;
    margin: 80px auto;
    padding: 40px;
    font-size: 40px;
    border-radius: 20px;
    display: grid;
    gap: 40px;
}

section ul {
    background-color: black ;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding: 40px;
    text-align: center;
    border-radius: 20px;
    transition: 0.2;
}
section ul li:hover{
    color: palegoldenrod;
    box-shadow: 1px 1px 8px 8px #fff;
    transform: scale(1.2);
    

}

section ul li:last-child {
    background-image: url(../images/timjl-milky-way-10427641_1920.jpg);
    grid-column: 1/4;
    border-radius: 20px;
}

/* h1の設定 */
h1 {
    background-image: linear-gradient(90deg, #e485c4, #8b5cf6);
    margin-bottom: 20px;
    text-align: end;
    font-size: 80px;
    padding: 20px;
    border-radius: 20px;
    color: palegoldenrod;
}

/* liの設定 */
li {
    text-align: center;
    padding: 40px;
    background-image: url(../images/timjl-milky-way-10427641_1920.jpg);
    color: aliceblue;
    border-radius: 20px;
}

/* 詳細リンク ++++++++++ */
.detailLink {
  text-align: right;
  margin-bottom: 0;
}

.detailLink {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 4px;
  background-color: #ffc8dd;
  color: #4a4e69;
  font-weight: bold;
  background: linear-gradient(145deg, #ffc8dd, #ffc8dd);
  border-radius: 10%;
  box-shadow: inset 8.71px 8.71px 9px #ffc8dd, inset -8.71px -8.71px 9px #FFA5AD;
}

.detailLink a:hover {
  padding: 4px 20px;
}

body{
    background-color: #fff1e6;
}