@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

body {
    background: var(--background-default);
}

.default{
    --background-default: #000000;
    /*
    justify-content: center;
    align-items: center;
    */
    
    /*background: linear-gradient( #d39b81, #fcd0bc) no-repeat fixed 100%;*/
    background: url('/images/afternoon_02.jpg') no-repeat fixed 100%;
    background-repeat: no-repeat;
    background-size: cover;
    font-family:'Poppins', sans-serif;
    font-size: large;
    transition: 2s background ease;

/* Loading Page --------------------------------*/ 
    --loading-page-background-color: rgb(128, 41, 7);


/* Navigation ----------------------------------*/
    --navbar-background: rgba(255, 86, 56, 0.6);
    --navbar-border: 3px solid rgb(128, 41, 7);
    --navbar-padding: 10px;

    --navbar-background-sticky: rgba(255, 97, 35, 0.95);
    --navbar-box-shadow-sticky: 0 0 10px rgb(128, 41, 7),
                                0 0 10px rgb(87, 25, 0);

 /* Logó --------------------------------------*/   
    --navi-bar-title-color: rgb(80, 23, 0);
    --navi-bar-title-font-size: x-large;
    --navi-bar-title-transition: 0.5s;
    --navi-bar-title-hover: rgb(255, 255, 255);

/* Navigation toggler --------------------------------------*/  
    --navi-toggler-background: rgb(253, 148, 115);
    --navi-toggler-border: 2px solid rgb(177, 56, 8);
    --navi-toggler-color: rgb(177, 56, 8);
    --navi-toggler-icon-background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(177, 56, 8, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

    --navi-toggler-icon-background-image-hover: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(148, 42, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    --navi-toggler-border-hover: 2px solid rgb(148, 42, 0);
    --navi-toggler-background-color-hover: rgb(255, 185, 168); 

/* Navigation button: Current One --------------------------*/  
    --button-present-background-color: rgb(177, 56, 8);
    --button-present-color: rgb(255, 253, 250);
    --button-present-border: 2px solid rgb(177, 56, 8);
    --button-present-pointer-events: none;

/* Navigation button: Other Ones ---------------------------*/  
    --button-secondary-background-color: rgb(255, 150, 124);
    --button-secondary-color: rgb(80, 23, 0);
    --button-secondary-border: 2px solid rgb(177, 56, 8);
    --button-secondary-margin: 2px;
    --button-secondary-transition: 0.2s;

    --button-secondary-hover-color:white;
    --button-secondary-hover-background-color: rgb(141, 47, 9);
    --button-secondary-hover-border: 2px solid rgb(141, 47, 9);

/* Theme Changer -------------------------------------------*/  
    --theme-selector-color: rgb(80, 23, 0);
    --theme-selector-background-color: rgb(255, 150, 124);
    --theme-selector-border: 2px solid rgb(80, 23, 0);

    --theme-selector-hover-background-color: rgb(255, 136, 107);
    --theme-selector-hover-color: rgb(71, 0, 0);
    --theme-selector-hover-border: 2px solid rgb(71, 0, 0);
    --theme-selector-width: 120px;

/* Binary Rain ---------------------------------------------*/
    --binary-rain-opacity: 0;
    --binary-rain-display: none;
    --binary-rain-red-opacity: 0;
    --binary-rain-red-display: none;
    --starfield-opacity: 0;
    --starfield-display: none;

/* Container -----------------------------------------------*/   
    --container-background-color: rgba(255, 120, 120, 0.4);
    --container-color: rgb(80, 23, 0);
    --container-margin: 10px, 10px, 10px, 10px;
    --container-padding: 20px;
    --container-border: 3px solid;
    --container-transition: 1s background ease;
    --container-margin-position: 0 auto;
    --container-position: relative;

/* Belső container -----------------------------------------------*/  
    --tablazat-about-background-color: rgba(255, 86, 56, 0.6);
    --tablazat-about-padding: 20px;
    --tablazat-about-border: 3px solid;
    --tablazat-about-transition: 1s background ease;






/* About profilkép --------------------------------------*/   
    --img-thumbnail-about-profile-background-color: linear-gradient(#fdae80, #fc7540, #e64100);
    --img-thumbnail-about-display: inline-block;
    --img-thumbnail-about-width: 250px;
    --img-thumbnail-about-margin-left: 30px;
    --img-thumbnail-about-margin-bottom: 20px;
    --img-thumbnail-about-border: 4px solid rgb(80, 23, 0);
    --img-thumbnail-about-transition: 1s;

    --img-thumbnail-about-border-hover: 4px solid rgb(158, 11, 0);
    --img-thumbnail-about-profile-background-color-hover: linear-gradient(#fdae80, #fc7540, #e64100);


/* Szövegben lévő linkek --------------------------------------*/  
    --szoveg-link-color: rgb(255, 187, 156);
    --szoveg-link-color-hover:rgb(214, 173, 163);


/* Parallax ---------------------------------------------------*/
    --parallax-color-hover: rgb(190, 54, 0);
    --parallax-text-shadow-hover: 0 0 10px rgb(255, 72, 0), 
                                  0 0 20px rgb(255, 72, 0),
                                  0 0 40px rgb(255, 72, 0), 
                                  0 0 80px rgb(255, 72, 0),
                                  0 0 120px rgb(255, 72, 0),
                                  0 0 160px rgb(255, 72, 0);
    --parallax-box-shadow-hover: 0 0 10px rgb(255, 72, 0);


/* Topológia ---------------------------------------------------*/
    --img-topology-border: 4px solid rgb(80, 23, 0);

    --img-topology-border-hover: 4px solid rgb(190, 54, 0);
    --img-topology-box-shadow-hover: 0 0 10px rgb(255, 143, 98),
                                     0 0 20px rgb(255, 143, 98);

    --img-dark-topology-border: 4px solid rgb(255, 185, 55);

    --img-dark-topology-border-hover: 4px solid rgb(190, 54, 0);
    --img-dark-topology-box-shadow-hover: 0 0 10px rgb(255, 143, 98),
                                          0 0 20px rgb(255, 143, 98);


/* Topológia (Slider) ------------------------------------------*/
    --slider-topology-content-background-color: rgb(255, 143, 98);
    --slider-topology-content-color: rgb(80, 23, 0);
    --slider-topology-content-border: 3px solid rgb(80, 23, 0);                                                             

    --slider-topology-bar-border: 2px solid rgb(80, 23, 0);
    --slider-topology-bar-hover: rgb(80, 23, 0);
    --slider-topology-bar-box-shadow-hover: 0 0 10px rgb(255, 141, 96), 
                                            0 0 20px rgb(255, 141, 96);
    --slider-topology-bar-border-hover: 2px solid rgb(148, 42, 0);
    --slider-topology-bar-color-hover: rgb(148, 42, 0);
    

/*Táblázat -----------------------------------------------------*/
    --tablazat-background-color: rgb(255, 153, 0);


/* Scrollbar ---------------------------------------------------*/
    --scrollbar-track-background-color: rgb(255, 143, 98);
    --scrollbar-track-border: 2px solid rgb(105, 30, 0);

    --scrollbar-track-background-color-hover: rgb(255, 143, 98);
    --scrollbar-track-border-hover: 2px solid rgb(105, 30, 0);

    --scrollbar-thumb-background-color: rgb(190, 54, 0);
    --scrollbar-thumb-border: 2px solid rgb(105, 30, 0);
    --scrollbar-thumb-box-shadow: 0 0 10px rgb(255, 72, 0), 
                                  0 0 20px rgb(255, 72, 0);

    --scrollbar-thumb-background-color-hover: rgb(190, 54, 0);
    --scrollbar-thumb-border-hover: 2px solid rgb(105, 30, 0);
    --scrollbar-thumb-box-shadow-hover: 0 0 10px rgb(255, 72, 0), 
                                        0 0 20px rgb(255, 72, 0);


}

.dark{
    color: rgb(255, 255, 255);
    /*background: url('/images/night.jpg') no-repeat fixed 100%;*/
    --background-default: #000000;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family:'Poppins', sans-serif;
    font-size: large;
    transition: 3s background ease;
    background: linear-gradient(#01051b, #1a245a) no-repeat fixed 100%;

/* Loading Page --------------------------------*/ 
    --loading-page-background-color: black;


/* Navigation ----------------------------------*/
    --navbar-background: rgba(37, 37, 37, 0.6);
    --navbar-border: 3px solid rgb(255, 255, 255);
    --navbar-padding: 10px;
    --navbar-color: white;

    /*--navbar-background-sticky: #01051b;*/
    --navbar-background-sticky: linear-gradient(#01051b, #1a245a);
    --navbar-box-shadow-sticky: 0 0 10px rgb(0, 0, 0),
                                0 0 20px rgb(0, 0, 0),
                                0 0 40px rgb(0, 0, 0),
                                0 0 80px rgb(0, 0, 0);

/* Logó --------------------------------------*/  
    --navi-bar-title-font-size: x-large;
    --navi-bar-title-transition: 0.5s;    
    --navi-bar-title-color: rgb(255, 255, 255);
    --navi-bar-title-hover: rgb(186, 255, 252);
    --navi-bar-title-text-shadow-hover: 0 0 10px rgb(0, 255, 242), 
                                  0 0 20px rgb(0, 255, 242),
                                  0 0 40px rgb(0, 255, 242), 
                                  0 0 80px rgb(0, 255, 242),
                                  0 0 120px rgb(0, 255, 242),
                                  0 0 160px rgb(0, 255, 242);

/* Navigation toggler --------------------------------------*/  
    --navi-toggler-background: rgb(0, 0, 0);
    --navi-toggler-border: 2px solid white;
    --navi-toggler-color: white;
    --navi-toggler-icon-background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

    --navi-toggler-icon-background-image-hover: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(186, 255, 252, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    --navi-toggler-border-hover: 2px solid rgb(186, 255, 252);
    --navi-toggler-box-shadow-hover: 0 0 10px rgb(0, 255, 242),
                                     0 0 10px rgb(0, 255, 242);

/* Navigation button: Current One --------------------------*/  
    --button-present-background-color: rgb(255, 255, 255);
    --button-present-color: rgb(0, 0, 0);
    --button-present-border: 2px solid rgb(255, 255, 255);
    --button-present-pointer-events: none;

/* Navigation button: Other Ones ---------------------------*/
    --button-secondary-background-color: rgb(0, 0, 0);
    --button-secondary-color: white;
    --button-secondary-border: 2px solid rgb(255, 255, 255);
    --button-secondary-margin: 2px;
    --button-secondary-transition: 0.2s;

    --button-secondary-hover-color: rgb(186, 255, 252);
    --button-secondary-hover-background-color: rgb(0, 0, 0);
    --button-secondary-hover-border: 2px solid rgb(186, 255, 252);
    --button-secondary-hover-text-shadow: 0 0 10px rgb(0, 255, 242), 
                                          0 0 20px rgb(0, 255, 242),
                                          0 0 40px rgb(0, 255, 242), 
                                          0 0 80px rgb(0, 255, 242);
    --button-secondary-hover-box-shadow:  0 0 10px rgb(0, 255, 242);


/* Theme Changer -------------------------------------------*/  
    --theme-selector-color: white;
    --theme-selector-background-color: black;
    --theme-selector-border: 2px solid white;

    --theme-selector-hover-background-color: rgb(37, 37, 37);
    --theme-selector-hover-color: rgb(186, 255, 252);
    --theme-selector-hover-border: 2px solid rgb(186, 255, 252);
    --theme-selector-hover-text-shadow: 0 0 10px rgb(0, 255, 242), 
                                  0 0 20px rgb(0, 255, 242),
                                  0 0 40px rgb(0, 255, 242), 
                                  0 0 80px rgb(0, 255, 242),
                                  0 0 120px rgb(0, 255, 242),
                                  0 0 160px rgb(0, 255, 242);
    --theme-selector-hover-box-shadow:  0 0 10px rgb(0, 255, 242);
    --theme-selector-width: 120px;

/* Binary Rain ---------------------------------------------*/
    --binary-rain-opacity: 0;
    --binary-rain-display: none;
    --binary-rain-red-opacity: 0;
    --binary-rain-red-display: none;
    --starfield-opacity: 1;

/* Container -----------------------------------------------*/   
    --container-background-color: rgba(0, 0, 0, 0.4);
    --container-color: rgb(226, 226, 226);
    --container-margin: 10px, 10px, 10px, 10px;
    --container-padding: 20px;
    --container-border: 3px solid;
    --container-transition: 1s background ease;
    --container-margin-position: 0 auto;
    --container-position: relative;

/* Belső container -----------------------------------------------*/  
    --tablazat-about-background-color: rgba(0, 0, 0, 0.6);
    --tablazat-about-padding: 20px;
    --tablazat-about-border: 3px solid rgb(255, 255, 255);
    --tablazat-about-transition: 1s background ease;




/* About profilkép --------------------------------------*/   
    --img-thumbnail-about-profile-background-color: linear-gradient(#01051b, #1a245a);
    --img-thumbnail-about-display: inline-block;
    --img-thumbnail-about-width: 250px;
    --img-thumbnail-about-margin-left: 30px;
    --img-thumbnail-about-margin-bottom: 20px;
    --img-thumbnail-about-border: 4px solid rgb(255, 255, 255);
    --img-thumbnail-about-transition: 1s;

    --img-thumbnail-about-border-hover: 4px solid rgb(255, 255, 255);
    --img-thumbnail-about-box-shadow-hover: 0 0 10px rgb(0, 255, 242),
                                            0 0 20px rgb(0, 255, 242),
                                            0 0 20px rgb(0, 255, 242);

    --img-thumbnail-about-profile-background-color-hover: linear-gradient(#01051b, #1a245a);

/* Szövegben lévő linkek --------------------------------------*/  
    --szoveg-link-color: rgb(1, 230, 218);
    --szoveg-link-color-hover:rgb(128, 212, 223);
    --szoveg-link-text-shadow-hover: 0 0 10px rgb(0, 255, 242), 
                                 0 0 20px rgb(0, 255, 242);
                                 

/* Parallax ---------------------------------------------------*/
    --parallax-color-hover: rgb(186, 255, 252);
    --parallax-text-shadow-hover: 0 0 10px rgb(0, 255, 242), 
                                  0 0 20px rgb(0, 255, 242),
                                  0 0 40px rgb(0, 255, 242), 
                                  0 0 80px rgb(0, 255, 242),
                                  0 0 120px rgb(0, 255, 242),
                                  0 0 160px rgb(0, 255, 242);
    --parallax-box-shadow-hover: 0 0 10px rgb(0, 255, 242);


/* Topológia ---------------------------------------------------*/
    --img-topology-border: 4px solid rgb(0, 0, 0);
    --img-topology-box-shadow: 0 0 10px rgb(255, 255, 255),
                               0 0 20px rgb(255, 255, 255);

    --img-topology-border-hover: 4px solid rgb(0, 0, 0);
    --img-topology-box-shadow-hover: 0 0 10px rgb(0, 255, 242),
                                     0 0 20px rgb(0, 255, 242);

    --img-dark-topology-border: 4px solid rgb(255, 255, 255);
    --img-dark-topology-box-shadow: 0 0 10px rgb(255, 255, 255),
                                    0 0 20px rgb(255, 255, 255);

    --img-dark-topology-border-hover: 4px solid rgb(255, 255, 255);
    --img-dark-topology-box-shadow-hover: 0 0 10px rgb(0, 255, 242),
                                          0 0 20px rgb(0, 255, 242);

/* Topológia (Slider) ------------------------------------------*/
    --slider-topology-content-background-color: rgb(0, 0, 0);
    --slider-topology-content-color: rgb(209, 209, 209);
    --slider-topology-content-border: 3px solid rgb(161, 161, 161);
    --slider-topology-content-text-shadow: ;
    --slider-topology-content-box-shadow: 0 0 10px rgb(0, 0, 0),
                                          0 0 20px rgb(0, 0, 0);                                    
                                     

    --slider-topology-bar-border: 2px solid rgb(226, 226, 226);

    --slider-topology-bar-hover: rgb(0, 0, 0);
    --slider-topology-bar-box-shadow-hover: 0 0 10px rgb(0, 255, 242), 
                                            0 0 20px rgb(0, 255, 242);
    --slider-topology-bar-border-hover: 2px solid rgb(255, 255, 255);
    --slider-topology-bar-color-hover: rgb(255, 255, 255);
    --slider-topology-bar-text-shadow-hover: 0 0 10px rgb(0, 255, 242), 
                                             0 0 20px rgb(0, 255, 242),
                                             0 0 40px rgb(0, 255, 242), 
                                             0 0 80px rgb(0, 255, 242),
                                             0 0 120px rgb(0, 255, 242),
                                             0 0 160px rgb(0, 255, 242);

    --slider-topology-bar-number-color: rgb(255, 255, 255);

/*Táblázat -----------------------------------------------------*/
    --tablazat-background-color: rgb(0, 0, 0);

/* Scrollbar ---------------------------------------------------*/
    --scrollbar-track-background-color: rgb(75, 75, 75);
    --scrollbar-track-border: 2px solid rgb(255, 255, 255);

    --scrollbar-track-background-color-hover: rgb(75, 75, 75);
    --scrollbar-track-border-hover: 2px solid rgb(255, 255, 255);

    --scrollbar-thumb-background-color: rgb(0, 0, 0);
    --scrollbar-thumb-border: 2px solid rgb(192, 192, 192);
    --scrollbar-thumb-box-shadow: 0 0 10px rgb(255, 255, 255), 
                                  0 0 20px rgb(255, 255, 255);

    --scrollbar-thumb-background-color-hover: rgb(0, 0, 0);
    --scrollbar-thumb-border-hover: 2px solid rgb(141, 232, 255);
    --scrollbar-thumb-box-shadow-hover: 0 0 10px rgb(0, 255, 242), 
                                        0 0 20px rgb(0, 255, 242);     

}

.matrix{
    /*background-image: url('/images/afternoon.jpg');*/
    --background-default: #000000;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family:'Poppins', sans-serif;
    font-size: large;
    transition: 3s background ease;

/* Loading Page --------------------------------*/ 
    --loading-page-background-color: black;


/* Navigation ----------------------------------*/
    --navbar-background: rgba(37, 37, 37, 0.6);
    --navbar-border: 3px solid rgb(44, 156, 0);
    --navbar-padding: 10px;
    --navbar-color: white;
    --navbar-box-shadow: 0 0 20px rgb(72, 255, 0);

    --navbar-background-sticky: rgba(0, 0, 0, 0.95);
    --navbar-box-shadow-sticky: 0 0 10px rgb(72, 255, 0), 
                                0 0 10px rgb(72, 255, 0),
                                0 0 20px rgb(0, 0, 0), 
                                0 0 20px rgb(0, 0, 0);

/* Logó --------------------------------------*/
    --navi-bar-title-font-size: x-large;
    --navi-bar-title-transition: 0.5s;
    --navi-bar-title-color: rgb(255, 255, 255);
    --navi-bar-title-text-shadow: 0 0 10px rgb(72, 255, 0), 
                                  0 0 20px rgb(72, 255, 0),
                                  0 0 40px rgb(72, 255, 0), 
                                  0 0 80px rgb(72, 255, 0),
                                  0 0 120px rgb(72, 255, 0),
                                  0 0 160px rgb(72, 255, 0),
                                  0 0 180px rgb(72, 255, 0);

    --navi-bar-title-hover: rgb(255, 255, 255);
    --navi-bar-title-text-shadow-hover: 0 0 10px rgb(255, 0, 0), 
                                  0 0 20px rgb(255, 0, 0),
                                  0 0 40px rgb(255, 0, 0), 
                                  0 0 80px rgb(255, 0, 0),
                                  0 0 120px rgb(255, 0, 0),
                                  0 0 160px rgb(255, 0, 0);

/* Navigation toggler --------------------------------------*/  
    --navi-toggler-background: rgb(0, 0, 0, 0.5);
    
    --navi-toggler-color: rgb(44, 156, 0);
    --navi-toggler-icon-background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(44, 156, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    --navi-toggler-box-shadow: 0 0 10px rgb(72, 255, 0),
                               0 0 10px rgb(72, 255, 0);


    --navi-toggler-color-hover: rgb(255, 149, 149);
    --navi-toggler-icon-background-image-hover: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 149, 149, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    --navi-toggler-box-shadow-hover: 0 0 10px rgb(255, 0, 0),
                                     0 0 10px rgb(255, 0, 0);

/* Navigation button: Current One --------------------------*/  
    --button-present-background-color: rgb(213, 255, 196);
    --button-present-color: rgb(0, 0, 0);
    --button-present-border: 2px solid rgb(213, 255, 196);
    --button-present-pointer-events: none;
    --button-present-box-shadow: 0 0 10px rgb(72, 255, 0), 
                                  0 0 20px rgb(72, 255, 0),
                                  0 0 40px rgb(72, 255, 0), 
                                  0 0 80px rgb(72, 255, 0);
                                  

/* Navigation button: Other Ones ---------------------------*/  
    --button-secondary-background-color: rgb(0, 0, 0);
    --button-secondary-color: rgb(213, 255, 196);
    --button-secondary-border: 2px solid rgb(213, 255, 196);
    --button-secondary-margin: 2px;
    --button-secondary-transition: 0.2s;

    --button-secondary-hover-color: rgb(255, 255, 255);
    --button-secondary-hover-background-color: rgb(0, 0, 0);
    --button-secondary-hover-border: 2px solid rgb(255, 255, 255);
    --button-secondary-hover-text-shadow: 0 0 10px rgb(255, 0, 0), 
                                          0 0 20px rgb(255, 0, 0),
                                          0 0 40px rgb(255, 0, 0), 
                                          0 0 80px rgb(255, 0, 0);
    --button-secondary-hover-box-shadow:  0 0 10px rgb(255, 0, 0),
                                          0 0 20px rgb(255, 0, 0);


/* Theme Changer -------------------------------------------*/  
    --theme-selector-color: rgb(213, 255, 196);
    --theme-selector-background-color: black;
    --theme-selector-border: 2px solid rgb(213, 255, 196);
    --theme-selector-text-shadow: 0 0 10px rgb(72, 255, 0), 
                                  0 0 20px rgb(72, 255, 0),
                                  0 0 40px rgb(72, 255, 0), 
                                  0 0 80px rgb(72, 255, 0),
                                  0 0 120px rgb(72, 255, 0),
                                  0 0 160px rgb(72, 255, 0);
    --theme-selector-box-shadow:  0 0 10px rgb(72, 255, 0);

    --theme-selector-hover-background-color: rgb(0, 0, 0);
    --theme-selector-hover-border:2px solid rgb(255, 255, 255);
    --theme-selector-hover-box-shadow: 0 0 10px rgb(255, 0, 0);
    --theme-selector-hover-color: rgb(255, 255, 255);
    --theme-selector-hover-text-shadow: 0 0 10px rgb(255, 0, 0), 
                                        0 0 20px rgb(255, 0, 0),
                                        0 0 40px rgb(255, 0, 0), 
                                        0 0 80px rgb(255, 0, 0),
                                        0 0 120px rgb(255, 0, 0),
                                        0 0 160px rgb(255, 0, 0);
    --theme-selector-width: 120px;

/* Binary Rain ---------------------------------------------*/
    --binary-rain-opacity: 1;
    --binary-rain-red-opacity: 0;
    --binary-rain-red-display: none;
    --starfield-opacity: 0;
    --starfield-display: none;

/* Container -----------------------------------------------*/   
    --container-background-color: rgba(0, 0, 0, 0.4);
    --container-color: rgb(213, 255, 196);
    --container-margin: 10px, 10px, 10px, 10px;
    --container-padding: 20px;
    --container-border: 3px solid rgb(44, 156, 0);
    --container-transition: 1s background ease;
    --container-margin-position: 0 auto;
    --container-position: relative;
    --container-box-shadow: 0 0 10px rgb(72, 255, 0);
                            
                            

/* Belső container -----------------------------------------------*/  
    --tablazat-about-background-color: rgba(0, 0, 0, 0.6);
    --tablazat-about-padding: 20px;
    --tablazat-about-border: 3px solid rgb(213, 255, 196);
    --tablazat-about-box-shadow: 0 0 10px rgb(72, 255, 0),
                                 0 0 20px rgb(72, 255, 0);
    --tablazat-about-transition: 1s background ease;




/* About profilkép --------------------------------------*/   
    --img-thumbnail-about-profile-background-color: linear-gradient(#01051b, #1c5a1a);
    --img-thumbnail-about-display: inline-block;
    --img-thumbnail-about-width: 250px;
    --img-thumbnail-about-margin-left: 30px;
    --img-thumbnail-about-margin-bottom: 20px;
    --img-thumbnail-about-border: 4px solid rgb(213, 255, 196);
    --img-thumbnail-about-box-shadow: 0 0 10px rgb(72, 255, 0),
                                      0 0 20px rgb(72, 255, 0);
    --img-thumbnail-about-transition: 0.2s;

    --img-thumbnail-about-border-hover: 4px solid rgb(255, 255, 255);
    --img-thumbnail-about-box-shadow-hover: 0 0 10px rgb(255, 0, 0),
                                            0 0 20px rgb(255, 0, 0),
                                            0 0 20px rgb(255, 0, 0);
    --img-thumbnail-about-profile-background-color-hover: linear-gradient(#01051b, rgb(255, 0, 0)); 

/* Szövegben lévő linkek --------------------------------------*/  
    --szoveg-link-color: rgb(213, 255, 196);
    --szoveg-link-text-shadow: 0 0 10px rgb(72, 255, 0),
                              0 0 20px rgb(72, 255, 0);
    --szoveg-link-color-hover:rgb(255, 186, 186);
    --szoveg-link-text-shadow-hover: 0 0 10px rgb(255, 0, 0),
                                     0 0 20px rgb(255, 0, 0);
                
/* Parallax ---------------------------------------------------*/
    --parallax-color: rgb(213, 255, 196);
    --parallax-text-shadow: 0 0 10px rgb(72, 255, 0), 
                            0 0 20px rgb(72, 255, 0),
                            0 0 40px rgb(72, 255, 0), 
                            0 0 80px rgb(72, 255, 0),
                            0 0 120px rgb(72, 255, 0),
                            0 0 160px rgb(72, 255, 0);
    --parallax-box-shadow: 0 0 10px rgb(72, 255, 0);

    --parallax-color-hover: rgb(255, 186, 186);
    --parallax-text-shadow-hover: 0 0 10px rgb(255, 0, 0), 
                                  0 0 20px rgb(255, 0, 0),
                                  0 0 40px rgb(255, 0, 0), 
                                  0 0 80px rgb(255, 0, 0),
                                  0 0 120px rgb(255, 0, 0),
                                  0 0 160px rgb(255, 0, 0);
    --parallax-box-shadow-hover: 0 0 10px rgb(255, 0, 0),
                                 0 0 20px rgb(255, 0, 0);


/* Topológia ---------------------------------------------------*/
    --img-topology-border: 4px solid rgb(0, 0, 0);
    --img-topology-box-shadow: 0 0 10px rgb(72, 255, 0),
                               0 0 20px rgb(72, 255, 0);

    --img-topology-border-hover: 4px solid rgb(0, 0, 0);
    --img-topology-box-shadow-hover: 0 0 10px rgb(255, 0, 0),
                                     0 0 20px rgb(255, 0, 0);

    --img-dark-topology-border: 4px solid rgb(255, 255, 255);
    --img-dark-topology-box-shadow: 0 0 10px rgb(72, 255, 0),
                                    0 0 20px rgb(72, 255, 0);
                                 
    --img-dark-topology-border-hover: 4px solid rgb(255, 255, 255);
    --img-dark-topology-box-shadow-hover: 0 0 10px rgb(255, 0, 0),
                                          0 0 20px rgb(255, 0, 0);


/* Topológia (Slider) ------------------------------------------*/
    --slider-topology-content-background-color: rgb(0, 0, 0);
    --slider-topology-content-color: rgb(172, 255, 139);
    --slider-topology-content-border: 3px solid rgb(172, 255, 139);
    --slider-topology-content-text-shadow: 0 0 10px rgb(72, 255, 0), 
                                           0 0 20px rgb(72, 255, 0),
                                           0 0 40px rgb(72, 255, 0), 
                                           0 0 80px rgb(72, 255, 0),
                                           0 0 120px rgb(72, 255, 0),
                                           0 0 160px rgb(72, 255, 0);
    --slider-topology-content-box-shadow: 0 0 10px rgb(72, 255, 0), 
                                          0 0 20px rgb(72, 255, 0);                                                                         

    --slider-topology-bar-box-shadow: 0 0 10px rgb(72, 255, 0), 
                                      0 0 20px rgb(72, 255, 0); 
    --slider-topology-bar-border: 2px solid rgb(213, 255, 196);
    --slider-topology-bar-text-shadow: 0 0 10px rgb(72, 255, 0), 
                                       0 0 20px rgb(72, 255, 0),
                                       0 0 40px rgb(72, 255, 0), 
                                       0 0 80px rgb(72, 255, 0),
                                       0 0 120px rgb(72, 255, 0),
                                       0 0 160px rgb(72, 255, 0);

    
    --slider-topology-bar-hover: rgb(0, 0, 0);
    --slider-topology-bar-box-shadow-hover: 0 0 10px rgb(255, 0, 0), 
                                            0 0 20px rgb(255, 0, 0);
    --slider-topology-bar-border-hover: 2px solid rgb(255, 255, 255);
    --slider-topology-bar-color-hover: rgb(255, 88, 88);
    --slider-topology-bar-text-shadow-hover: 0 0 10px rgb(255, 0, 0), 
                                             0 0 20px rgb(255, 0, 0),
                                             0 0 40px rgb(255, 0, 0), 
                                             0 0 80px rgb(255, 0, 0),
                                             0 0 120px rgb(255, 0, 0),
                                             0 0 160px rgb(255, 0, 0);

    --slider-topology-bar-number-color: rgb(255, 255, 255);

/*Táblázat -----------------------------------------------------*/
    --tablazat-background-color: rgb(0, 0, 0);

/* Scrollbar ---------------------------------------------------*/
    --scrollbar-track-background-color: black;
    --scrollbar-track-border: 2px solid black;

    --scrollbar-thumb-background-color: rgb(44, 156, 0);
    --scrollbar-thumb-border: 2px solid rgb(96, 255, 157);
    --scrollbar-thumb-box-shadow: 0 0 10px rgb(9, 255, 0), 
                                  0 0 20px rgb(9, 255, 0);

    --scrollbar-thumb-background-color-hover: rgb(156, 0, 0);
    --scrollbar-thumb-border-hover: 2px solid rgb(255, 189, 189);
    --scrollbar-thumb-box-shadow-hover: 0 0 10px rgb(255, 0, 0), 
                                        0 0 20px rgb(255, 0, 0);                     

}

/*--------------------------------------------------------------------------------*/

canvas{
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
}

#background_rain{
    opacity: var(--binary-rain-opacity);
    display: var(--binary-rain-display);
    transition: 2s background ease;
}
#background_rain_red{
    opacity: var(--binary-rain-red-opacity);
    display: var(--binary-rain-red-display);
}
#starfield{
    opacity: var(--starfield-opacity);
    display: var(--starfield-display);
    top: 0;
    left: 0;
    background: linear-gradient(#01051b, #1a245a) no-repeat fixed 100%;   
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 2s background ease;
}

.navbar-expand-md{
    background-color: var(--navbar-background);
    border: var(--navbar-border);
    padding: var(--navbar-padding);
    box-shadow: var(--navbar-box-shadow);
}


.navi-bar-title{
    color: var(--navi-bar-title-color);
    font-size: var(--navi-bar-title-font-size);
    text-shadow: var(--navi-bar-title-text-shadow);
    transition: var(--navi-bar-title-transition);

}
.navi-bar-title:hover{
    color: var(--navi-bar-title-hover);
    text-shadow: var(--navi-bar-title-text-shadow-hover);
}


.navi-toggler{
    background-color: var(--navi-toggler-background); 
    color: var(--navi-toggler-color);
    box-shadow: var(--navi-toggler-box-shadow);
    transition: 0.2s;
    border: var(--navi-toggler-border)
}
.navi-toggler-icon{
    background-image: var(--navi-toggler-icon-background-image);
}
.navi-toggler:hover{
    box-shadow: var(--navi-toggler-box-shadow-hover);
    background-color: var(--navi-toggler-background-hover); 
    color: var(--navi-toggler-color-hover);
    border: var(--navi-toggler-border-hover);
    background-color: var( --navi-toggler-background-color-hover);
   
}
.navi-toggler-icon:hover{
    background-image: var(--navi-toggler-icon-background-image-hover);
}

.button-present{
    background-color: var(--button-present-background-color);
    color: var(--button-present-color);
    border: var(--button-present-border);
    pointer-events: var(--button-present-pointer-events);
    box-shadow: var(--button-present-box-shadow);
}

.button-secondary{
    background-color: var(--button-secondary-background-color);
    color: var(--button-secondary-color);
    border: var(--button-secondary-border);
    margin: var(--button-secondary-margin);
    transition: var(--button-secondary-transition);
}
.button-secondary:hover{
    background-color: var(--button-secondary-hover-background-color);
    color: var(--button-secondary-hover-color);
    border: var(--button-secondary-hover-border);
    text-shadow: var(--button-secondary-hover-text-shadow);
    box-shadow: var(--button-secondary-hover-box-shadow);
    transition: var(--button-secondary-transition);
}

#theme-selector{
    color: var(--theme-selector-color);
    background-color: var(--theme-selector-background-color);
    border: var(--theme-selector-border);
    text-shadow: var(--theme-selector-text-shadow);
    box-shadow: var(--theme-selector-box-shadow);
    transition: 0.2s;
    width: var(--theme-selector-width);
}
#theme-selector:hover{
    background-color: var(--theme-selector-hover-background-color);
    color:var(--theme-selector-hover-color);
    text-shadow: var(--theme-selector-hover-text-shadow);
    border: var(--theme-selector-hover-border);
    box-shadow: var(--theme-selector-hover-box-shadow);
}




.container-md{
    background-color: var(--container-background-color);
    color: var(--container-color);
    margin: var(--container-margin);
    padding: var(--container-padding);
    border: var(--container-border);
    transition: var(--container-transition);
    position: var(--container-position);
    margin: var(--container-margin-position);
    box-shadow: var(--container-box-shadow);
}

.tablazat-about{
    background-color: var(--tablazat-about-background-color);
    padding: var(--tablazat-about-padding);
    border: var(--tablazat-about-border);
    transition: var(--tablazat-about-transition);
    box-shadow: var(--tablazat-about-box-shadow);
}



.img-thumbnail-about{
    display: var(--img-thumbnail-about-display);
    width: var(--img-thumbnail-about-width);
    margin-left: var(--img-thumbnail-about-margin-left);
    margin-bottom: var(--img-thumbnail-about-margin-bottom);
    border: var(--img-thumbnail-about-border);
    box-shadow: var(--img-thumbnail-about-box-shadow);
    transition: var(--img-thumbnail-about-transition);
    background: var(--img-thumbnail-about-profile-background-color);
    transition: 0.5s;
}
.img-thumbnail-about:hover{
    box-shadow: var(--img-thumbnail-about-box-shadow-hover);
    border: var(--img-thumbnail-about-border-hover);
    background: var(--img-thumbnail-about-profile-background-color-hover);
}



/*------------------------------------------------------------------------------------------------------------------------------*/

.image-profile{
    text-align: right;
}

#topology{
    text-align: center;
}


.topology-light{
    width: 98%;
    margin: 10px, 10px, 10px, 10px;
    margin-top: 20px;
    margin-bottom: 50px;
    border-radius: 15px;
    transition: 0.2s;
    border: var(--img-topology-border);
    box-shadow: var(--img-topology-box-shadow);
}
.topology-light:hover{
    border: var(--img-topology-border-hover);
    box-shadow: var(--img-topology-box-shadow-hover);
}

.topology-dark{
    width: 98%;
    margin: 10px, 10px, 10px, 10px;
    margin-top: 20px;
    margin-bottom: 50px;
    border-radius: 15px;
    transition: 0.2s;
    border: var(--img-dark-topology-border);
    box-shadow: var(--img-dark-topology-box-shadow);
}
.topology-dark:hover{
    border: var(--img-dark-topology-border-hover);
    box-shadow: var(--img-dark-topology-box-shadow-hover);
}



.btn-light{
    margin: 2px;
    transition: 0.2s background ease;
}


h1{
    text-align: center;
    font-family: Poppins, sans-serif;
}



.selector{
    text-align: left;
    font-family:'Poppins', sans-serif;
}
.selector-inner{
    text-align: right;
}

p, h3, h4, h5{
    margin: 10px;
    transition: 0.2s;
    font-family: Poppins, sans-serif;
}

h3{
    margin-bottom: 35px;
}

h4{
    margin-bottom: 25px;
}

h5{
    margin-top: 15px;
    margin-bottom: 15px;
}


.parallax{
    /*background: url("images/parallax.jpg") repeat fixed 100%;*/
    height: 200px;
    border: 4px solid;
    margin: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background: url("images/parallax.jpg") no-repeat fixed 100%;
    transition: 0.5s;
    color: var(--parallax-color);
    text-shadow: var(--parallax-text-shadow);
    box-shadow:  var(--parallax-box-shadow);
}
.parallax:hover{
    color: var(--parallax-color-hover);
    text-shadow: var(--parallax-text-shadow-hover);
    box-shadow:  var(--parallax-box-shadow-hover);
}
.parallax-inner{
    font-size: 35px;
    position: absolute;
    margin-top: 60px;
    right: 5px;
    left: 1px;
    width: 100%;
    text-align: center;
}

#index_img_title{
    /*color: rgb(0, 255, 242);*/
      color: white;
      transition: 0.5s;
}

#index_img_title:after{
    transition: 0.5s;
}

.szoveg-link{
    text-decoration: underline;
    color: var(--szoveg-link-color);
    text-shadow: var(--szoveg-link-text-shadow);
    transition: 0.5s;
}
.szoveg-link:hover{
    color: var(--szoveg-link-color-hover);
    text-shadow: var(--szoveg-link-text-shadow-hover);
}

option{
    font-family: 'Poppins', sans-serif;
}




/*----------------------------------------------------*/

/* width */
::-webkit-scrollbar {
    width: 15px;
    background-color: black;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--scrollbar-track-background-color);
    border: var(--scrollbar-track-border);
    border-radius: 50px;
}
::-webkit-scrollbar-track:hover{
    background-color: var(--scrollbar-track-background-color-hover);
    border: var(--scrollbar-track-border-hover);
}


/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-background-color);
    border: var(--scrollbar-thumb-border);
    box-shadow: var(--scrollbar-thumb-box-shadow);
    border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover{
    background: var(--scrollbar-thumb-background-color-hover);
    border: var(--scrollbar-thumb-border-hover);
    box-shadow: var(--scrollbar-thumb-box-shadow-hover);
}

.sticky{
    position: sticky;
    top: 0;
    background: var(--navbar-background-sticky);
    box-shadow: var(--navbar-box-shadow-sticky);
    border: 3px solid;
    border-top: none;
    overflow: hidden;
    z-index: 9999;
}

.vonal{
    width: 90%; 
    margin: auto;
    border: 2px solid;
    opacity: 0.6;
}

.about_vonal{
    margin: 10px;
}

th{
    border: 3px solid;
    font-size: 15px;
}

table{
    width: 100%;
    text-align: center;
    background-color: var(--tablazat-background-color);
    
}


/*Slider---------------------------------------------*/

.slidershow{
    overflow: hidden;
    aspect-ratio: 16/7;
    border: var(--img-topology-border);
    box-shadow: var(--img-topology-box-shadow);
    transition: 0.2s;
    
}
.slidershow:hover{
    border: var(--img-topology-border-hover);
    box-shadow: var(--img-topology-box-shadow-hover);
}

.navigation{
    
    bottom: 20px;
    display: flex;
    margin: 20px;
}

.bar{
    width: 50px;
    height: 10px;
    border: var(--slider-topology-bar-border);
    margin: 6px;
    cursor: pointer;
    margin: 10px;
    transition: 0.2s;
    box-shadow: var(--slider-topology-bar-box-shadow);
    text-shadow: var(--slider-topology-bar-text-shadow);

}
.bar:hover{
    background: var(--slider-topology-bar-hover);
    box-shadow: var(--slider-topology-bar-box-shadow-hover);
    border: var(--slider-topology-bar-border-hover);
    
    text-shadow: var(--slider-topology-bar-text-shadow-hover);
    color: var(--slider-topology-bar-number-color);
}



input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
    width: 500%;
    height: 100%;
    display: flex;
}

.slide{
    width: 20%;
    transition: 0.5s;
}

.slide .image{
    width: 100%;
    height: 100%;
    object-fit:contain;
    
}

#r1:checked ~ .s1, #q1:checked ~ .s1, #p1:checked ~ .s1{
    margin-left: 0;
}

#r2:checked ~ .s1, #q2:checked ~ .s1, #p2:checked ~ .s1{
    margin-left: -20%;
}

#r3:checked ~ .s1, #q3:checked ~ .s1, #p3:checked ~ .s1{
    margin-left: -40%;
}

#r4:checked ~ .s1, #q4:checked ~ .s1, #p4:checked ~ .s1{
    margin-left: -60%;
}

#r5:checked ~ .s1, #q5:checked ~ .s1, #p5:checked ~ .s1{
    margin-left: -80%;
}

.bottom-left{
    bottom: 8px;
    left: 8px;
}

.top-left{
    top: 8px;
    left: 8px;
}


.bottom-left, .top-left{
    position: absolute;
    padding: 5px;
    background-color: var(--slider-topology-content-background-color);
    
    border: var(--slider-topology-content-border);
    color: var(--slider-topology-content-color);
    transition: 0.2s;

}


@media screen and (max-width: 400px) {
    div.bottom-left {
      font-size: 10px;
    }
    div.top-left {
        font-size: 10px;
      }
}

@media screen and (min-width: 401px) {
    div.bottom-left {
      font-size: 15px;
    }
    div.top-left {
        font-size: 15px;
      }
}

@media screen and (min-width: 601px) {
    div.bottom-left {
      font-size: 20px;
    }
    div.top-left {
        font-size: 20px;
      }
}

@media screen and (min-width: 1001px) {
    div.bottom-left {
      font-size: 25px;
    }
    div.top-left {
        font-size: 30px;
      }
}

@media screen and (min-width: 1201px) {
    div.bottom-left {
      font-size: 30px;
    }
    div.top-left {
        font-size: 30px;
      }
}