*, *::before, *::after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html{
    height: 100%;
    font-size: 100%;
}

body{
    font-family: 'Open Sans';
    color: white;
    min-height: 100%;
       
}
.navbar{
    position: relative;
    padding: 0.5rem;
    background-color: rgba(101,18,95,0.5);
    z-index: 1;
}

.navbar .logo{
    position: relative;
    left: 2rem;
    cursor: pointer;
}

.navbar .links-container{
    display: table;
    position: absolute;
    top:0;
    right:0;
    height: 100px;
    color: white;
    text-decoration: none;
}

.links-container .navbar-link{
    display: table-cell;
    position: relative;
    height: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    vertical-align: middle;
    color:white;
    font-size: 0.625rem;
    letter-spacing: 0.05rem;
    font-weight: 700;
    text-transform: uppercase; 
    text-decoration: none;
    cursor: pointer;
}

.links-container .navbar-link:hover{
    color:rgb(233,50,117);
}

.container{
    margin:0 auto;
    max-width: 64rem;
}

.container.narrow{
    max-width: 56rem;
}

@media(min-width: 640px){
    html{font-size: 112%;} 
    .column{
        float: left;
        padding-left:1rem;
        padding-right:1rem;
    }
    .column.full{width:100%;}
    .column.two-thirds{width: 66.7%;}
    .column.half{width: 50%;}
    .column.third{width: 33.3%;}
    .column.fourth{width: 25%;}
    .column.flow-opposite{float: right;}
}
@media(min-width: 1024px){
    html{font-size: 120%;}
}

.clearfix::before,
.clearfix::after{
    content:" ";
    display: table;
}

.clearfix::after{
    clear: both;
}