* {
    box-sizing: border-box;
}

html {
    color: #4e585c;
    font-size: 1rem;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
    margin: 0;
    padding: 0;
}

h1 {
    margin: .5rem 50px;
    text-align: center;
    line-height: 1.4;
}

p {
    margin: .5rem 50px 1rem 50px;
    text-align: center;
    line-height: 1.4;
}

a {
    text-decoration: none;
    color: #5FCFF6;
}

.wrapper {
    display: flex;
    flex-direction: column;
    padding: 50px 0;
}

/* --- Giving the form group some basic styling ---*/
form {
    padding: 0 20px;
    width: 90%;
    max-width: 600px;
    border-radius: 5px;
    background-color: #f9f9f9;
    margin: 10px auto 0 auto;
}

/* --- The radio-container div wraps the input and the label. This div is for aesthetic 
       purposes. Although it is important to have the div positioned relative to support 
       the absolute positioning of the pieces we are going to create for the radio button. --- */
.radio-container {
    position: relative;
    margin: 20px 0;
    background-color: #fff;
    border-radius: 5px;
    border: 2px solid #dde1e4;
}

/* --- Setting the label to display block and width 100% lays the ground work for the whole 
       parent div to appear clickable. We adjust the padding around the table to make room 
       for the type and also give the left a lot of space so we can position the radio button 
       in the space we are creating for it. --- */
label {
    display: inline-block;
    width: 100%;
    padding: 9px 20px 10px 60px;
}

/* --- Setting the radio button position behind the pseudo elements will hide it without 
       actually telling the browser specifically to hide it. I’m kinda keeping it there 
       incase a browser can’t process the pseudo classes.  ---*/
input[type="radio"] {
    position: absolute;
    top: 46%;
    left: 12px;
    transform: translateY(-50%);
}


/* --- This is for our pseudo radio button and is for appearance only. I prefer to put the 
       ::before on the label for two reasons. 1. Some browsers don’t like it when you 
       attach pseudo classes to inputs and 2. the hover breaks if the pseudo was attached 
       to the input. */
label::before {
    content: " ";
    background-color: #fff;
    border: 1px solid #98a5ae;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
}

/*---  This is the gray box that sits behind the pseudo radio button and over our real radio 
       button. It strictly presentational and has no clickable area or functionality. Cool 
       thing since it can be linked to the label we can change it's appearance when the radio 
       button is checked. */
label::after {
    content: "";
    background-color: #e2e7eb;
    width: 46px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px 0 0 3px;
    z-index: 1;
}

/* --- Set up the simple hover state nothing fancy here. ---*/
label:hover {
    background-color: rgba(75, 169, 214, .05);
}

/* --- Checked states to change when radio button or label has been selected. */
input[type="radio"]:checked + label::before {
    width: 14px;
    height: 14px;
    background-color: #4ba9d6;
    border: 4px white solid;
}

input[type="radio"]:checked + label::after {
    background-color: #b7ddef;
}