/********************************************* TEIL 1 *************
  Grundeinstellungen für Hauptelemente
******************************************************************/

:root 
{
        --bgelements: rgb(87, 84, 84);
        --font: rgba(243, 234, 234, 0.466);
        --background: rgb(209, 212, 220);
        --content: rgb(229, 233, 233);
        --highlight: rgb(185, 62, 62);
        --card: rgb(244, 211, 159);
        --fontsize: 20px;
}
      
body
{       font-family: "Arial";
        font-size: var(--fontsize);
        max-width: 70%;
        color: white;
        padding: 10px;
        margin: auto auto;
        background-image: linear-gradient(var(--content), var(--background));
}

header
{      
        margin-bottom: 1%;
        border: 2px solid var(--bgelements);
}



/* Box für Abschnitte mit Text und Bilder nebeneinander */


.sectionbox
{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        background-color: var(--bgelements);
}
.sectioncard
{
        max-width: 45%;
        margin: 20px;
}

#last
{
        max-width: 100%;
}

@media(max-width: 1200px)
{
        .sectioncard
        {
                max-width: 80%;
        }
}

p
{       padding: 20px;
        height: 80%;
}

h1
{
        color: var(--bgelements);
        font-size: 250%;
        margin-left: 50px;
}

h2
{ margin-left: 20px;}

p, img, .sectioncard
{
        border-radius: 10px; 
}

p.colored
{       
        background-color: var(--card);
        color: black;
        padding: 5%;
        border-radius: 0px; 
        margin: 0;
}

pre
{
        background-color: var(--card);
        color: black;   
        margin: 0;
        padding-bottom: 20px;     
}

.data li
{
        list-style-image: url("pictures/checkmark.png");
        font-size: 28px;
        font-family: 'Courier New', Courier, monospace;
        margin: 20px;
}

img.zoom 
{
  width: 100%;
  height: auto;
}

a
{
        font-size: 40px;
        text-decoration: none;
        color: var(--card);
}