* {
    margin: 0;
}

html,
body {
    height: 100%;
    width: 100%;
}


body {
    font-family: Arial, Helvetica, sans-serif;
    /* background-color: #555; */
}

p {
    /* Top, Right, Bottom, Left */
    /* em: font-size */
    margin: 0.5em 0 0.5em 0; 
}

header {
    display: block;

    /* Makes Navigation links stay in place. */
    position: fixed;

    /* Specifies its position */
    top: 0;
    left: 0;

    width: 100%;
    background-color: blueviolet;
    padding: 10px;
}


/* descendant combinator (space) */
/* Selectors that utilize a descendant combinator are called descendant selectors */
/* > is child combinator */
nav a:visited,
/* Specifies link not visited yet also */
nav a:link {
    color: #fff;
    /* Takes away underlines underneath */
    text-decoration: none;
}


/* Bullets disappear */
nav > ul {
    display: inline;
    padding: 0;
}


nav > ul > li {
    display: inline-block;
    list-style: none;
    margin: 0 5px 0 5px;
}

nav .decoration {
    color: #fff;
    margin-right: 0;
}

main {
    display: block;
    /* background-image: url("images/santa_boushi_big.png"); */
    padding-top: 3em;
    padding-bottom: 3em;

    /* If there is more content than the minimum 
    the box will grow to the height needed by the content. */
    /* min-height shows its effectiveness
    when there is less content than the minimum. */
    min-height: 83%;

}

.quote {
    font-size: 0.5em;
}
img {
    max-width: 100%;
}

footer {
    padding: 15px;
    background-color: blueviolet;
}


aside {
    margin-top: 1.5em;    
}



aside {
    text-align: center;
    
}

aside img {
    max-height: 200px;
}



article {
    margin-left: 0.5em;
    width: 90%;
}

.screenOnly {
    display: none;
}

@media only screen and (min-width: 768px) {
    main {
        display: flex;
    }

    aside {
        width: 20%;
        margin-left: 2%;
    }

    .screenOnly {
        display: block;
    }

    .columns-desktop {
        display: flex;
    }

}

.cheki-container {
    display: flex;
    justify-content: center;
}

.cheki {
    /* display: flex;        */
    
    width: 230px;
    /* height: 500px; */
    padding: 10px;
    margin: 10px;
    border: solid 3px #000;
    border-radius: 10px;

}
.cheki1 {
    display: flex;       
    
    width: 230px;
    /* height: 500px; */
    padding: 10px;
    margin: 10px;
    border: solid 3px #000;
    border-radius: 10px;

}



.cheki2 {
    /* display: flex;        */
    text-align: left;
    width: auto;
    /* height: 500px; */
    padding: 10px;
    margin: 10px;
    border: solid 3px #000;
    border-radius: 10px;

}



.cheki img {
    width: 100%;
    
}

.cheki .taking-date {
    font-weight: bold;
}

.cheki button {
    background-color: rgb(231, 218, 218);
    padding:  5px;
    border: solid 2px #000;
    border-radius: 5px;
    color: blue;
}