@charset "windows-1251";

/*   
   Website for Благодійна організація «Благодійний фонд «Україно рідна» / 
             CHARITABLE ORGANISATION “CHARITABLE FOUNDATION “ UKRAINE NATIVE”
   Author: Nadiia Yanushevska
   Date:

   Filename: index.html, index_en.html
   CSS filename: style.css 

   style.css - style for the website
*/

/* 
   Styles for the main elements of html document, 
   in particular html, body, header and footer 
*/

html {
    background: rgb(251, 243, 189) url(background.webp) center center fixed;
    background-size: auto 890px;
    height: 100%;
    font-family: "Times New Roman", Times, serif;
    overflow-x: hidden;
}

body {
    background-color: hsla(53, 93%, 95%, 0.9);
    margin: 0px auto;
    padding: 2em, 0em;
    min-height: 100%;
    min-width: 320px;
    max-width: 1024px;
    width: 80%;
    outline: 4px solid hsl(53, 93%, 70%);
    overflow-y: hidden;
}

header {
    background-color: hsl(211, 85%, 95%);
    height: 13em;
    border: 4px double hsl(211, 85%, 80%);
    border-radius: 5px;
}

footer {
    height: 1px; /* remove if footer is added */
    background-color: hsl(211, 85%, 90%);
    text-align: center;
}

/* 
   Styles for the general elements of html document, 
   in particular img, p, h1, h2, h3, h5, a, 
   including hover and active effects, and p
*/
img {
    display: block;
    width: 430px;
    border-radius: 5px;
}

h1 {
    margin-right: 7em;
    margin-bottom: 2.3em;
    margin-top: 2.3em;
    float: right;
    color: mediumblue;
    font-style: oblique;
    font-variant: small-caps;
    font-size: 28px;
}

h2 {
    text-align: center;
    margin-top: 2.7em;
}

h3 {
    background-color: rgba(255, 210, 110, 0.7);
    padding-left: 1em;
}

h5 {
    text-align: center;
}

a {
    color: darkgreen;
    font-style: italic;
    text-decoration-line: none;
    transition: .4s linear;
}

a:hover, a:active {
    text-decoration: underline;
    color: dodgerblue;
    font-size: larger;
}

p {
    font-size: 1em;
}

section > p, article > p {
    text-indent: 2em;
}

/* 
   Styles for the elements of the header
*/
header > img {
    width: 9em;
    margin-left: 7em;
    margin-top: .3em;
    float: left
}

/* 
   Styles for the elements of the body
*/


body > a {
    display: block;
    background-color: hsl(211, 85%, 95%);
    border: 1px solid blue;
    border-radius: 5px;
    float: right;
    margin: 5px 7px;
    padding: 3px;
}

/* 
   Styles for the elements of the div element and 
   elements within it
*/
div > section > p {
    margin: 3px;
    width: 330px;
}

div > section > p:first-of-type {
    margin-top: 1em;
}

div > section > p:last-of-type {
    margin-bottom: 2em;
}

p#last {
    margin-bottom: 50px;
}

/* 
   Styles for the elements of the section elements 
   within the article and the elements within it
*/
article > section {
    align-items: center;
}

article > section > h4 {
    margin-left: 3em;
    text-align:center;
}

article > section > p {
    margin-left: 3em;
    margin-bottom: 2em;
    grid-area: 2 / 1 ;
}

article > section > img {
     height: 110px;
     width: auto;
     margin-right: 3em;
     margin-bottom: auto;
     margin-top: auto;
     grid-area: 1/ 2 / span 2;
}

/* Distinguishing the neighbouring sections */
article > section:nth-child(2n+1) {
    background-color: hsla(53, 93%, 95%, 0.9);
}

article > section:nth-child(2n) {
    background-color: hsla(191, 93%, 95%, 0.9);
}

article > section:nth-child(2n) > h4 {
    margin-right: 3em;
    margin-left: none;
    grid-area: 1 / 2;
}

article > section:nth-child(2n) > p {
    margin-right: 3em;
    margin-left: none;
    grid-area: 2 / 2 ;
}

article > section:nth-child(2n) > img {
     margin-right: none;
     margin-left: 3em;
     grid-area: 1 / 1 / span 2;
}

/* 
   Styles for the dl and elements within it
*/
dt {
    padding: 1em;
    width: 15em;
    font-weight: bold;
    font-variant: small-caps;
    color: darkslategrey;
}

dd {
    padding-right: 2em;
}

dd:last-of-type {
    padding-bottom: 2em;
}

/* 
   Styles for the tables and elements within them
*/
table {
    padding: .5em;
    margin: 0px auto 2em;
    background-color: hsla(125, 93%, 95%, 0.9);
    border: 2px double cornflowerblue;
    border-radius: 20px;
}

td {
    border-bottom: 1px solid cornflowerblue;
}

tr > td:first-of-type {
    border-right: 1px solid cornflowerblue;
    width: 10em;
}

/* Distinguishing tables */
table:nth-of-type(3n-1) {
    background-color: hsla(197, 93%, 95%, 0.9);
}

table:nth-of-type(3n) {
    background-color: hsla(283, 93%, 97%, 0.9);
}


/* 
   =========================
   Mobile Styles: 0 to 497px 
   =========================
*/
@media only screen and (max-width: 497px) {
    /* General styles */
    body {
        width: 100%;
        overflow-y: hidden;
    }
    
    body > section, div, article {
        margin-left: 1em;
        margin-right: 1em;
    }
    
    header {
        height: 10em;
        border: none;
        border-bottom: 2px solid hsl(211, 85%, 80%);
    } 
    
    h1 {
        font-size: 18px;
        margin: 2.5em .5em 0px 0px;
    }
    
    h2 {
        font-size: 1em;
    }
    
    p {
        font-size: .9em;
    }
    
    div {
        display: block;
    }

    div > section > p {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Hiding img, excluding the logo*/
    img {
        display: none;
    }
    
    header > img {
        display: block;
        width: 7em;
        margin-left: 2em;
    }
    
    /* p styles */
    p#last {
        margin-bottom: 35px;
    }
    
    div > section {
        margin-bottom: 30px;
    }
    
    section > p, article > p {
        text-indent: 1em;
    }
    
    /* section within article styles */
    article > section {
        display: block;
        padding-bottom: 1px;
        padding-top: 1px;
        padding-right: 5px;
    }
    
    article > section > h4 {
        margin: 5px;
    }
    
    article > section > p {
        margin: 10px;
    }
    
    article > section:nth-child(2n) > h4 {
        margin: 5px;
    }

    article > section:nth-child(2n) > p {
        margin: 10px;
    }
    
    /* table styles */
    table {
        font-size: .8em;
        padding: none;
        margin: auto none;
    }
}

/* ================================
   Tablet Styles: 498px to 819px
   ================================
*/
@media only screen and (min-width: 498px) {
    /* General styles */
    body {
        width: 100%;
        overflow-y: hidden;
    }
    
    header {
        height: 12em;
        border: none;
        border-bottom: 2px solid hsl(211, 85%, 80%);
    } 
    
    h1 {
        font-size: 22px;
        margin: 3.3em 1.5em 0px 0px;
    }
    
    h2 {
        font-size: 1.4em;
    }
    
    p {
        font-size: .9em;
    }
    
    div {
        display: block;
    }
    
    div, body > section, article {
        margin-left: 1em;
        margin-right: 1em;
    }
    
    div > section > p {
        margin-left: auto;
        margin-right: auto;
    }
    /* Hiding img, excluding the logo and 
       the img within div*/
    img {
        display: none;
    }
    
    header > img {
        display: block;
        width: 8.4em;
        margin-left: 4em;
    }
    
    div > img {
        display: block;
        width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* p styles */
    p#last {
        margin-bottom: 35px;
    }
    
    div > section {
        margin-bottom: 30px;
    }
    
    section > p, article > p {
        text-indent: 1em;
    }
    
    /* section within div and article styles */
    div > section {
    }
    
    article > section {
        display: block;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-right: 5px;
    }
    
    article > section > h4 {
        margin: 5px;
    }
    
    article > section > p {
        margin: 10px;
    }
    
    article > section:nth-child(2n) > h4 {
        margin: 5px;
    }

    article > section:nth-child(2n) > p {
        margin: 10px;
    }
    
    /* table styles */
    table {
        font-size: 1em;
        padding: none;
        margin: auto none;
    }
}

/* ================================
   Desktop Styles: 820px and greater
   ================================
*/
@media only screen and (min-width: 820px) {
    /* General styles */
    body {
        overflow-y: hidden;
    }
    header {
        height: 13em;
        border: 4px double hsl(211, 85%, 80%);
    }

    h1 {
        margin-right: 7em;
        margin-bottom: 2.3em;
        margin-top: 2.3em;
        float: right;
        font-size: 28px;
    }
    
    div {
        display: flex;
        align-items: center;
    }
    
    div, body > section, article {
        margin-left: 3em;
        margin-right: 3em;
    }
    
    /* img styles */
    img {
        display: block;
    } 
    
    header > img {
        width: 9em;
        margin-left: 7em;
        margin-top: .3em;
        float: left;
    }

    div > img {
        margin: 1.5em;
        flex: .5;
    }

    /* section within div and article styles */
    div > section {
        flex: 1;
    }
    
    div > section {
        margin-bottom: 15px;
    }
    
    article > section {
        display: grid;
    }
    
    article > section > h4 {
        grid-area: 1 / 1;
    }
    
    article > section > p {
        grid-area: 2 / 1 ;
    }

    article > section > img {
        height: 110px;
        width: auto;
        grid-area: 1/ 2 / span 2;
    }
    
}