* {
    box-sizing: border-box;
}

:root {
    --black: #1e201f;
    --dark-pink: #cc2776;
    --magenta: #FF7C93;
    --magenta-tr: #ff7a93b0;
    --yellow-tr: #F9DB00b0;
    --cyan-tr: #39EDD5b0;
    --key-tr: #453A64b0;
}


@font-face {
    font-family: Pretendard JP;
    src: url(/font/pretendard-jp.ttf);
}

body {
    font-family: MS PGothic, Pretendard JP;
    font-size: 20px;
background: #ffd2d2;
background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

main.kita, main.index, main.project {
    background: linear-gradient(#66063580, #453A64);
    color: white;
    border: 1px solid white;
    box-shadow: 0px 0px 10px var(--dark-pink);
    border-radius: 10px;
    padding: 45px;
    width: 1300px;
    height: fit-content;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items:center;
        overflow: hidden;
}

main.index {
    flex-direction: column;
    align-items: center;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    text-align: center;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 10px;
    margin-bottom: 10px;
    
}

h1, h2, h3, h4, h5, h6 {
    text-shadow: 0 0 5px #ffffffb0;
}

section.description {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

section.heading {
    display: flex;
    align-items: end;
}

section.heading h1 {
    filter: drop-shadow(var(--magenta) 1.5px 1.5px 0) drop-shadow(var(--magenta) -1.5px 1.5px 0) drop-shadow(var(--magenta) -1.5px -1.5px 0) drop-shadow(var(--magenta) 1.5px -1.5px 0);
    text-shadow: none;
    font-size: 85px;
    margin: 0;
}

h1.tagline {
    filter: drop-shadow(var(--magenta) 1.5px 1.5px 0) drop-shadow(var(--magenta) -1.5px 1.5px 0) drop-shadow(var(--magenta) -1.5px -1.5px 0) drop-shadow(var(--magenta) 1.5px -1.5px 0);
    text-shadow: none;
    font-size: 21.5px;
}

h1 {
    font-size: 35.5px;
}

img.full {
    width: 900px;
    vertical-align: middle;
    filter: drop-shadow(0 0 3.5px var(--magenta))
}

div.standing {
    position: relative;
    right: 20px;
}
#hidden {
    display: none;
    transition: 0.25s ease;
}

div.standing:hover #main {
    display: none;
    transition: 0.25s ease;
}

div.standing:hover #hidden {
    display: block;
    transition: 0.25s ease;
}

::selection {
    color: #453A64;
    background: var(--magenta)
}

mark {
    background: white;
    color: white;
}

section.bullets {
    display: flex;
    gap: 12px;
    align-items: center;
}

section.bullets p {
    margin: 0;
}

section.bullet-container {
    border: 1px solid #ffffff80;
    border-radius: 10px;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
}
section.bullets div.bullet-1 {
    background: #FF7C9350;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    width: 180px;
    text-align: center;
}

section.bullets div.bullet-2a {
    width: 85px;
    text-align: left;
}

section.bullets div.bullet-2b {
    width: 105px;
    text-align: left;
}

hr {
    margin-top: 10px;
margin-bottom: 10px;
border: 1px dashed #ffffff;
}

section.append-list {
    display: grid;
    grid-template-columns: auto auto;
    gap: 12px;
    margin-top: 15px;
    margin-bottom: 15px;
}

section.append-list div.append {
    width: 300px;
    height: 210px;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #ffffff80;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

section.append-list div.append p {
    margin: 0
}

section.append-list div.append h1 {
    font-size: 30px;
    margin: 0;
}

.cyan {
    background: var(--cyan-tr);
}

.magenta {
    background: var(--magenta-tr);
}

.yellow {
    background: var(--yellow-tr);
}

.key {
    background: var(--key-tr);
}

a {
    font-weight: bold;
    color: white;
}

section.demos {
    margin-top: 15px;
    margin-bottom: 15px;
}

section.demos a {
    background: #FF7C9350;
    padding: 5px;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-right: 15px;
}

img.doodle {
    width: 400px;
    float: right;
    margin: 20px;
}

.about {
    display:block
}

.project {
    flex-direction: column;
}

ul {
    columns: 3;
}