#page_block {
    background: var(--background-gradient);
    box-shadow: none;
}

.fading_paragraph
{
    position: relative;
    word-wrap: break-word;
    font: var(--big-header-font);
    text-align: left;
    padding: 1%;
    width: 96%;
    border: groove 0.5vw rgba(0,0,0,0.1);
    border-radius: 5vw;
    background-color: var(--header-footer-color);
    background-image: url("../images/contact_message_texture.jpg");
    background-blend-mode: overlay;
    background-position: center;
    background-size: var(--header-footer-background-size);
    background-repeat: repeat;*/
}


#message
{
    text-align: center;
}

@keyframes sub_animation{
    0%{color:black;}
    25%{color:var(--darkred-color);}
    50%{color:var(--darkblue-color);}
    75%{color:var(--darkred-color);}
    100%{color:black;}
}

#page_block #introduction sub
{
    animation-name: none;
    animation-duration: 10s;
    animation-iteration-count: infinite;*/
}

#page_block #introduction{
    margin: auto;
    padding:0%;
    width:96%;
    font: var(--big-header-font);
    text-align: center;
    /*background-color: rgba(153,85,00, 0.1);*/
    
    text-shadow: 0px 0px black;
    /*The following will ensure that the width of the element will not grow with the added border-size.
    So the border will be within the defined element width.
    */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#my_picture {
    position: relative;
    float: left;
    border: 5px groove rgba(0,0,0,0.2);
    border-radius: 10px;
    margin: 0%;
    margin-right: 1%;
    width: 200px;
    max-width: 100%;
}

@media (max-width: 480px) 
{
    #my_picture
    {
        width: 150px;
    }
}

#page_block p{
    font: var(--paragraph-font);
    font-weight: normal;
    font-size:18px;
    color: black;
    text-shadow: 1px 1px white;
    padding: 0%;
    margin: 0%;
    border: none 0px black;
    /*The following will ensure that the width of the element will not grow with the added border-size.
    So the border will be within the defined element width.
    */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#page_block .paragraph{
    position: relative;
    margin: 2% 0%;
    padding:0%;
    width: 100%;
    border: none 0px black;
    /*The following will ensure that the width of the element will not grow with the added border-size.
    So the border will be within the defined element width.
    */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    line-height: 25px;
    font: var(--paragraph-font);
    
    overflow: hidden;
    transition: max-height 0.5s ease;
}

#page_block .paragraph p{
    margin: 20px auto;
}

#page_block .section_div{
    position: relative;
    font-family: var(--paragraph-font);
    width: 96%;
    margin: 5px auto;
    border-top: groove 0.5vw rgba(0,0,0,0.1);
    padding-top: 10px;
    /*The following will ensure that the width of the element will not grow with the added border-size.
    So the border will be within the defined element width.
    */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#page_block .separator{
    width: 100%;
    margin:0px;
    padding: 0px;
    border-bottom: ridge 0.5vw rgba(50,0,0,0.2);
}

#page_block .section_header{
    position: relative;
    padding: 0%;
    margin:5px;
    font-family: ZenDots;
    text-align: left;
    font-size:24px;
    letter-spacing: 3px;
    text-shadow: 0.5px 1px pink;
    color: rgba(143,55,0, 1);
    border: none 0px black;
}

#page_block .competences_list
{
    position: relative;
    list-style-type: '\2713  '; /*the V sign: ✓*/
    margin: 0%;
    line-spacing: 20px;
}

#page_block .competences_list li{
    margin: 5px;
}

#page_block #html_css_info{
    /*background-color: rgba(0,0,255,0.2);*/ /*purple*/
    background-color: var(--header-footer-color);
    background-image: url("../images/html_css.png");
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    background-blend-mode: var(--header-footer-background-blend-mode);
}

#page_block #javascript_info{
    /*background-color: rgba(255,0,0,0.3);*/ /*pink*/
    background-color: var(--header-footer-color);
    background-image: url("../images/javascript.png");
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    background-blend-mode: var(--header-footer-background-blend-mode);
}

#page_block #c_language_info{
    /*background-color: rgba(0,255,0,0.3);*/ /*green*/
    background-color: var(--header-footer-color);
    background-image: url("../images/c_language.png");
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    background-blend-mode: var(--header-footer-background-blend-mode);
}

#page_block #python_info{
    /*background-color: rgba(0,255,255,0.3);*/ /*cyan*/
    background-color: var(--header-footer-color);
    background-image: url("../images/python.png");
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    background-blend-mode: var(--header-footer-background-blend-mode);
}

#page_block #cpp_info{
    /*background-color: rgba(255,0,255,0.3);*/ /*magenta*/
    background-color: var(--header-footer-color);
    background-image: url("../images/cpp.png");
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    background-blend-mode: var(--header-footer-background-blend-mode);
}

#page_block #csharp_info{
    background-color: var(--header-footer-color);
    background-image: url("../images/csharp.png");
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    background-blend-mode: var(--header-footer-background-blend-mode);
    /*background-color: rgba(255,255,0,0.5);*/ /*yellow*/
}

#page_block #unity_info{
    background-color: var(--header-footer-color);
    background-image: url("../images/unity.png");
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    background-blend-mode: var(--header-footer-background-blend-mode);
    /*background-color: rgba(0,0,0,0.1);*/ /*gray*/
}

#page_block #java_info{
    background-color: var(--header-footer-color);
    background-image: url("../images/java_background.png");
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center;
    background-blend-mode: var(--header-footer-background-blend-mode);
    /*background-color: rgba(120,50,120,0.2);*/ /*purple-gray*/
}

#page_block .title{
    font-family: ZenDots;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
    text-shadow: 1px 1px white;
    margin: 0%;
    margin: 20px 0px;
    color: darkgreen;
}

#page_block .header{
    font-family: FjallaOne;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 1px 1px white;
    margin-bottom: 15px;
}

#page_block .highlighted_element{
    text-shadow: 0.5px 1px pink;
    color: rgba(143,55,0, 1);
    font-weight: normal;
    padding: 0vw;
}

#page_block a{
    text-decoration: none;
    font-weight: bold;
    color: blue;
}

#page_block a:hover{
    color: red;
}

#final_image{
    margin: 0% auto;
    margin-bottom: 2%;
    width: 80%;
}

#final_image img{
    width: 100%;
    opacity: 0.6;
}