/* style.css */
/* bodyの背景色指定 */
body {
    background-color: rgba(10, 207, 53, 0.219);
}

/* contentクラスの横幅、背景色の指定 */
.content {
    width: 1000px;
    height: 400px;
    margin: auto;
    background-color: rgba(241, 241, 20, 0.322);
    padding: 10px;
    border-radius: 5px;
}

/* 横幅に応じたルールの切り替え */
/* PC */
@media screen and (width > 1024px) {
    .content {
        width: 80%;
        background-color: rgba(255, 192, 203, 0.63);
    }
}

/* tablet(768-1024) */
@media screen and (width <= 1024px) {
    .content {
        width: 90%;
        background-color: rgba(255, 156, 8, 0.541);
    }
}

/* tablet(<768) */
@media screen and (width < 768px) {
    .content {
        width: 80%;
        background-color: rgba(140, 0, 255, 0.199);
        /* 文字のサイズを1.5倍に */
        font-size: 1.5em;
    }
}