@font-face {
    font-family: Rubik;
    src: url(../fonts/Rubik-Light.ttf);
}

@font-face {
    font-family: Rubik-Bold;
    src: url(../fonts/Rubik-SemiBold.ttf);
}

:root {
    --navbar-color-orange: #ff754c;
    --navbar-color-yellow: #ffc549;
    --text-font: Rubik;
    --text-font-bold: Rubik-Bold;
    --text-color: #352c3a;
}

::-moz-selection { /* Code for Firefox */
    color: #ffffff;
    background: var(--navbar-color-orange);
}
  
  ::selection {
    color: #ffffff;
    background: var(--navbar-color-orange);
}

body {
    background-color: var(--navbar-color-yellow);
}

.orange-lines {
    background-color: var(--navbar-color-orange);
    width: 100%;
    height: 40px;
}

.navbar-and-content {
    display: flex;
}

.navbar-and-content .content {
    width: calc(100% - 20%);
    height: calc(100vh - 160px);
    padding: 40px 5%;
}

.content {
    width: 100%;
    padding: 40px 0;
}

@media only screen and (max-width: 800px) {
    
    .navbar-and-content {
        display: grid;
    }

    .navbar-and-content .content {
        width: 90%;
        height: 100%;
        padding: 20px 5% 20px 5%;
        margin: 0;
    }

    #orange1 {
        display: none;
    }

}