kamathskitchen-website/themes/raavas/assets/css/main.css

@charset "utf-8";
/* variables */

:root {
    --size-base: 1em;
    --size-xs: .5em;
    --size-sm: .75em;
    --size-md: 1.5em;
    --size-lg: 2.25em;
    --size-xl: 3.375em;
    --size-xxl: 5.063em;

    /* colors */
    --gray: #565656;
    --black: #000;
    --white: #FFF;
    --link-color: #FFE1BB;
    --primary-color: var(--gray);
    --secondary-gray: #DDD;

    /* screens */
    --screen-palm: 970px;
    --screen-laptop: 1200px;

    /* fonts */
    --system-fonts: -apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", "Open Sans", "Noto Sans", "Droid Sans", sans-serif;
}

html {
    box-sizing: border-box;
    font-size: 20px;
    scroll-behavior: smooth;
    animation: fade 0.45s;
}

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* remove scroll for accessibility*/

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}



*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: "Lato", var(--system-fonts);
    font-style: normal;
    line-height: 1.5;
    color: var(--gray);
    fill: var(--gray);
    max-width: var(--screen-laptop);
    margin: 0 auto;
    padding: var(--size-md);
}

/* typography */

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.25;
    margin-bottom: 0;
    margin-top: var(--size-lg);
}

h1 {
    font-size: var(--size-lg);
}

h2 {
    font-size: var(--size-md);
}

h3,
h4,
h5,
h6 {
    font-size: var(--size-base);
}

/* page content */
/* header */
.site-header {
    font-size: 0.85em;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
}

.logo {
    font-size: 1.25em;
    text-transform: uppercase;
    font-weight: 700;
    padding: var(--size-sm);
}

.hamberger {
    display: block;
    cursor: pointer;
    width: var(--size-xxl);
    text-align: right;
    font-size: var(--size-md);
    padding: var(--size-sm);
}

@media screen and (min-width: 700px) {
    .hamberger {
        display: none;
    }
}

.menu-list {
    margin-top: var(--size-sm);
    padding: 0;
}

.menu-item {
    list-style: none;
    display: block;
}

.nav-link {
    display: block;
    padding: var(--size-sm);
}

.menu-item:last-child a {
    margin-right: 0;
    padding-right: var(--size-sm);
}

@media screen and (min-width: 700px) {
    .menu-item {
        display: inline-block;
    }

    .menu-list {
        margin: 0;
    }

    .nav-link {
        padding: var(--size-sm) var(--size-md);
    }
}

.active {
    color: #000;
}

/* header */
.home,
.post {
    display:flex;
    flex-direction:column
}

@media screen and (min-width:700px) {
    .home,
    .post {
        flex-direction:unset
    }
}

.post:not(:last-child) {
    padding-bottom: var(--size-xl);
    margin-bottom: var(--size-xl);
    border-bottom: 1px dashed var(--secondary-gray);
}

.primary {
    width:100%;
    margin-top: var(--size-lg);
}

@media screen and (min-width:700px) {
    .primary {
        width:75%
    }
}

.sidebar {
    width:100%;
    order:2;
    padding-top: var(--size-md);
    border-top: 1px dashed var(--secondary-gray);
    margin-top: var(--size-xl);
}

@media screen and (min-width:700px) {
    .sidebar {
        width:25%;
        order:unset;
        border-top: none;
        padding: unset;
        margin: unset;
    }
}

.sidebar-list {
    list-style: none;
    padding: 0;
    text-transform: capitalize;
}

.sidebar-list li {
    padding: calc(var(--size-xs)/2);
    display: inline-block;
}

@media screen and (min-width:700px) {
    .sidebar-list li {
        padding: calc(var(--size-xs)/2) 0;
        display: block;
    }
}

.sidebar-list li:first-child {
    padding-top: 0;
}

.divider {
    display: block;
    border: 0;
    text-align: center;
    overflow: visible;
    border-bottom: 1px dashed var(--secondary-gray);
    margin: var(--size-xl) var(--size-sm);
}

.content {
    padding: 0 var(--size-sm);
}

.tag-title {
     margin-bottom: var(--size-md);
     margin-right: auto;
     margin-left: auto;
}

.title {
    margin-top: 0;
}

.content article,
.content.about {
    margin-right: auto;
    margin-left: auto;
}

.post-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--size-lg);
    margin-bottom: var(--size-lg);
    border-top: 1px dashed var(--secondary-gray);
    border-bottom: 1px dashed var(--secondary-gray);
}

.list h2 {
    margin-top: var(--size-sm);
    margin-bottom: var(--size-xs);
}

.list .summary {
    margin-top: var(--size-xs);
    margin-bottom: 0;
}

.thumb img {
    border-radius: calc(var(--size-xs) / 2);
}

.related {
    margin-bottom: var(--size-xl);
}

.comments {
    border-top: 1px dashed var(--secondary-gray);
}

.single-page {
    margin-top: var(--size-xl);
}


/* font size */

.size-small {
    font-size: var(--size-md);
}

.content-max-width {
    max-width: 46.971em;
}

/* elements */

img {
    vertical-align: middle;
    max-width: 100%;
}

.figure {
    margin-top: var(--size-md);
    margin-right: 0;
    margin-left: 0;
}

.fig-caption {
    text-align: center;
    font-style: italic;
    margin-top: var(--size-sm);
}

ul {
    padding-left: var(--size-base);
    margin: var(--size-sm) 0;
}

a {
    text-decoration: none;
    color: var(--gray);
    transition: background-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.1s ease-out, fill 0.3s ease-out;
}

a:hover {
    color: var(--black);
    fill: var(--black);
    transition: background-color 0.7s ease-out, color 0.7s ease-out, box-shadow 0.3s ease-out, fill 0.7s ease-out;
}

/* custom css */

::selection {
    background-color: var(--secondary-gray);
}

.arrow {
    font-size: 0.75rem;
    line-height: 1;
}

.thumb {
    display: block;
    margin: 0 0 var(--size-md) 0;
}

@media screen and (min-width: 700px) {
    .thumb {
        margin: 0 var(--size-md) 0 0;
    }
}

.thumb img {
    width: 100%;
}

.post-meta {
    font-size: var(--size-sm);
    margin-top: var(--size-xs);
}

.post-text p {
    margin-top: var(--size-md);
    margin-bottom: var(--size-md);
}

.tag:hover .title-link,
.active,
.post-text a,
.link {
    text-decoration: underline;
    text-decoration-color: var(--link-color);
    text-decoration-thickness: 3px;
}

.quote {
    background-color: #fffcea;
    margin: var(--size-md) 0;
    padding: var(--size-xs);
    border-left: 3px solid var(--link-color);
}

.link,
.post-text a {
    white-space: nowrap;
}

.taglink::after {
    content: ",";
}

.taglink:last-child::after {
    content: ".";
}

.post-text img {
    display: block;
    margin: 0 auto;
}

.post-text a:hover,
.link:hover {
    background-color: var(--link-color);
    border-bottom: 0;
    box-shadow: 0 0 0 5px var(--link-color);
}

.post-text .thumb {
    border-bottom: unset;
    padding-bottom: 0;
    font-style: unset;
}

.post-text .thumb img {
    border-radius: 0;
}

.post-text .thumb:hover {
    background-color: unset;
    border-bottom: unset;
    box-shadow: unset;
}

.to-top {
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.footer {
    padding-top: var(--size-xl);
}

.video {
    width: 100%;
    height: auto;
}

/**  js  **/
.hide {
    display: none;
}

@media screen and (min-width: 700px) {
    .hide {
        display: block;
    }
}

.nav {
    width: 100%;
}

@media screen and (min-width: 700px) {
    .nav {
        width: unset;
    }
}

#commento {
    margin-top: var(--size-sm);
}


.half,
.three-forth,
.quarter {
    width: 100%;
}

@media screen and (min-width: 700px) {
    .half {
        width: 50%;
    }

    .quarter {
        width: 25%;
    }

    .three-forth {
        width: 75%;
    }
}