* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
padding: 16px;
}
.modal-wrapper {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .2);
display: flex;
}
.modal {
width: 40vw;
height: 40vh;
background-color: white;
margin: auto;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
position: relative;
}
.modal label {
position: absolute;
right: 0;
top: 0;
font-size: 200%;
width: 1em;
height: 1em;
line-height: 1;
text-align: center;
cursor: pointer;
}
.modal label:hover {
color: blue;
}
#openclose,
.modal-wrapper {
display: none;
}
#openclose:checked~.modal-wrapper {
display: flex;
}
#button {
color: blue;
text-decoration: underline;
cursor: pointer;
}