/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 25 maj 2022, 12:55:27
    Author     : peter
*/

:root
{
    color-scheme:                       light dark;

    --header-border-color:              hsl(355,100%,50%);
    --header-color:                     white;
    --header-bg-color:                  hsl(205, 90%, 40%);

    --html-bg-color:                    white;
    --html-color:                       hsl(205, 90%, 10%);

    --hover-bg-color:                   hsl(30, 100%, 40%);
    --hover-color:                      white;
    --hover-transition:                 0.3s;

    --line-color:                       hsl(355,100%,50%);


    --alert-bg-color-danger:            darkred;
    --alert-color-danger:               white;
    --alert-border-color-danger:        var(--alert-bg-color-danger);

    --alert-bg-color-warning:           darkorange;
    --alert-color-warning:              white;
    --alert-border-color-warning:       var(--alert-bg-color-warning);

    --alert-bg-color-info:              darkblue;
    --alert-color-info:                 white;
    --alert-border-color-info:          var(--alert-bg-color-info);

    --alert-bg-color-success:           darkgreen;
    --alert-color-success:              white;
    --alert-border-color-success:       var(--alert-bg-color-success);

    --grid-columns:                     1fr minmax(20rem,120rem) 1fr;
    
    --font-size:                        1.6rem;
    
    --input-border-radius:              0.5rem;
    --input-padding:                    0.4rem;
    
}

    :root.dark-mode
    {
        --header-border-color:              hsl(355,100%,30%);
        --header-color:                     hsl(205, 90%, 60%);
        --header-bg-color:                  hsl(205, 90%, 10%);

        --html-bg-color:                    hsl(205, 90%, 5%);
        --html-color:                       hsl(205, 90%, 60%);

        --hover-bg-color:                   hsl(30, 100%, 20%);
        --hover-color:                      hsl(205, 90%, 60%);

        --line-color:                       hsl(355,100%,30%);


        --alert-bg-color-danger:            var(--html-bg-color);
        --alert-color-danger:               hsl(0, 53%, 55%);
        --alert-border-color-danger:        var(--alert-color-danger);

        --alert-bg-color-warning:           var(--html-bg-color);
        --alert-color-warning:              hsl(39, 90%, 55%);
        --alert-border-color-warning:       var(--alert-color-warning);

        --alert-bg-color-info:              var(--html-bg-color);
        --alert-color-info:                 hsl(219, 79%, 65%);
        --alert-border-color-info:          var(--alert-color-info);

        --alert-bg-color-success:           var(--html-bg-color);
        --alert-color-success:              hsl(80, 70%, 35%);
        --alert-border-color-success:       var(--alert-color-success);
    }


html,body
{
    box-sizing:                 border-box ;
    image-orientation:          from-image ;
    -webkit-appearance:         none ;
    scrollbar-color:            var(--html-color) var(--html-bg-color);
    scrollbar-width: none;
}

html
{
    background-color:           var(--html-bg-color);
    color:                      var(--html-color);
    font-size:                  10px; /*62.5%*/
    margin:                     0;
    min-height:                 100vh;
    max-height:                 100vh;
    padding:                    0;
}

body
{
    display:grid;
    grid-template-areas:        "header header header"
                                ". top ."
                                ". main ."
                                "footer footer footer"
                                ;
    grid-template-columns:      var(--grid-columns);
    grid-template-rows:         min-content min-content 1fr min-content;
    height:                     calc(var(--vh, 1vh) * 100);
    width:                      100vw;
    max-height:                 100vh;

    margin:0;
}

header
{
    background:red;
    
    
    display:                    grid;
    grid-area:                  header;
    grid-template-areas:        "header-1 header-2 header-3";
    grid-template-columns:      var(--grid-columns);
    
    height:10rem;
}

header-1,
header-2,
header-3
{
    display:                    block;
    
    width:                      100%
}

header-1
{
    background:pink;
}

header-2
{
    
}

header-3
{
    background:salmon;
}


footer
{
    grid-area: footer;
    height:5rem;
    background:blue;
}

top-container
{
    background:yellow;
    display:block;
    grid-area: top;
    width:100%;
}

main
{
    grid-area: main;
  

   font-size: 2rem;
    overflow: scroll;
    -webkit-overflow-scrolling:auto
    /*-webkit-overflow-scrolling: touch;*/

}
h1
{
    display:                    block;
    font-size:                  3.5rem;
    margin-top:                 2rem;
    margin-bottom:              2rem;
    margin-left:                0;
    margin-right:               0;
    font-weight:                bold;
}

h2
{
    display:                    block;
    font-size:                  2.5rem;
    margin-top:                 2rem;
    margin-bottom:              2rem;
    margin-left:                0;
    margin-right:               0;
    font-weight:                bold;
}

h3
{
    display:                    block;
    font-size:                  1.9rem;
    margin-top:                 2rem;
    margin-bottom:              2rem;
    margin-left:                0;
    margin-right:               0;
    font-weight:                bold;
}

h4
{
    display:                    block;
    font-size:                  1.6rem;
    margin-top:                 2rem;
    margin-bottom:              2rem;
    margin-left:                0;
    margin-right:               0;
    font-weight:                bold;
}

h5
{
    display:                    block;
    font-size:                  1.3rem;
    margin-top:                 2rem;
    margin-bottom:              2rem;
    margin-left:                0;
    margin-right:               0;
    font-weight:                bold;
}

h6
{
    display:                    block;
    font-size:                  1.1rem;
    margin-top:                 2rem;
    margin-bottom:              2rem;
    margin-left:                0;
    margin-right:               0;
    font-weight:                bold;
}

p
{
    display:                    block;
    font-size:                  1.6rem;
    margin-top:                 1.6rem;
    margin-bottom:              1.6rem;
    margin-left:                0;
    margin-right:               0;
}

@media (any-hover:hover)
    {
        .hover
        {
            cursor:                     pointer;
            transition:                 var(--hover-transition);
        }

        .hover:hover
        {
            background-color:           var(--hover-bg-color) !important;
            color:                      var(--hover-color) !important;


        }
        .hover:hover svg
        {
            fill:                       var(--hover-color) !important;

        }
    }