* {
    margin            : 0;
    padding           : 0;
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
}

img {
    display  : block;
    max-width: 100%;
}

ul {
    list-style-position: inside;
    list-style-type    : square;
}

/* font-family: 'Roboto', sans-serif;
font-family: 'Ruda', sans-serif; */

html,
body {
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
}

.main-wrapper {
    display: grid;

    height: 100%;
}



.sidebar {
    background    : #F5F5F5;
    display       : flex;
    flex-direction: column;
}

.sidebar-header {
    padding   : 20px;
    text-align: center;
}

.sidebar-header *+* {
    margin-top: 20px;
}

.sidebar-header img {
    margin: 0 auto;
}

.sidebar-header h1 {
    font-family: 'Ruda', sans-serif;
    font-size  : 24px;
}

.sidebar-header h1 span {
    display    : block;
    font-family: 'Roboto', sans-serif;
    font-size  : 16px;
    font-weight: normal;
}

.sidebar-footer {
    display         : none;
    margin-top      : auto;
    background-color: #1D6486;
    padding         : 20px;

    justify-content: space-evenly;
}

.social-icons a {
    color     : #fff;
    font-size : 25px;
    opacity   : 0.8;
    transition: 0.3s;
}

.sidebar-footer a:hover {
    opacity: 1;
}

.main-content {
    background     : #0F2F45;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.main-content-inner {
    color  : #fff;
    padding: 30px;
}

.main-content-inner p:first-child {
    color      : #2B9CC9;
    font-size  : 22px;
    font-family: 'Ruda', sans-serif;
}

.main-content-inner a {
    color: #2BC9C8;
}

.main-content-inner>*+* {
    margin-top: 20px;
}

.main-content-inner .social-icons {
    align-content  : center;
    margin         : 0 auto;
    display        : flex;
    justify-content: center;
    margin-top     : 30px;
}

.main-content-inner .social-icons a {
    color: #fff;
}

@media screen and (min-width: 768px) {
    .sidebar-header {
        padding: 50px 30px;
    }

    .main-wrapper {
        grid-template-columns: 320px minmax(400px, 1fr);
    }

    .sidebar-footer {
        display: flex;
    }

    .main-content-inner p:first-child {
        font-size: 35px;
    }
}