@import url('reset.css');
@import url('font.css');
@import url('animation.css');

:root {
    --border-radius: 1.5rem;          /* テキストエリアのボーダー角丸 */
    --border-radius-btn: 3.5rem;      /* ボタンのボーダー角丸 */
    --active-button-color: aqua;    /* ボタンの点滅効果のための色 */
    --default-button-color: rgb(240, 239, 239);
    --min-height-text: 2.5rem;
    --title-bg-color:  #ffc0c0;
    --issue-bg-color: #c0ffc0;
    --purpose-bg-color: #00ff80;
    --combination-bg-color:  #ffffc0;
    --animation-duration: 2.5s;
    
    --first-round-bg-color: aqua;
    --second-round-bg-color: #ffe0c0;
}

html {
    box-sizing: border-box;
}


button {
    min-height: 4.5rem;
    border-radius: var(--border-radius-btn);
}

.button {
    min-height: 4.5rem;
    border-radius: var(--border-radius-btn);
    display: flex;
    justify-content: center;
    align-items: center;
}


*, *::before, *::after {
    box-sizing: inherit;
}

#wrapper {
    max-width: 800px;
    margin: auto;
    padding: 0.5rem;
}

.hide {
    display: none;
}

.not-visible {
    visibility: hidden;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
                                    not supported by any browser */
}