@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

:root {
    /*  Colors  */
    --icon-shadow: transparent;
    
    --lbl-facebook: #4267B2;
    --lbl-twitter: #1DA1F2;
    --lbl-instagram: #E1306C;
    --lbl-github: #333;
    --lbl-youtube: #ff0000;
    --lbl-messenger: #8241fb;
    
    --btn-facebook: var(--lbl-facebook);
    --btn-twitter: var(--lbl-twitter);
    --btn-instagram: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);;
    --btn-github: var(--lbl-github);
    --btn-youtube: var(--lbl-youtube);
    --btn-messenger: linear-gradient(200deg, #fc466b, #3f5efb 90%);


    --b-accent:rgb(0, 0, 0);
    --s-button:#fff;
    --name-color:#31344b;
    --about-color:#44476a;
  
    --b-background:#ffffff;
    --background: linear-gradient(315deg,#ffffff 0%,#d7e1ec 74%);
    /*  Speed of transition (Czech) */
    --rychlost: 0.5s;
    --target: _blank;
  }

*{
    transition: var(--rychlost) ease-out;
    transition-property: background, color;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color:  transparent;
}
body {
    display: grid;
    height: 100vh;
    width: 100%;
    min-height:400px;
    place-items: center;
    background: var(--background);
}

.dark-mode{
    --background: linear-gradient(315deg, rgb(24, 26, 27) 0%, rgb(41, 44, 46) 74%);
    --b-background:#181a1b;
    --b-accent:#fff;
    --s-button:#272727;
    --name-color:#ffffff;
    --about-color:#838383;
    --lbl-youtube: #ff3838;
    --lbl-github: #4e4e4e;
    /* update colors from variable */
    --btn-youtube: var(--lbl-youtube); 
    --btn-github: var(--lbl-github);
}

.pride-mode{
    --icon-shadow: #00000080;

    --btn-facebook:var(--bisexual);
    --btn-twitter:var(--transgender);
    --btn-instagram:var(--lgbt);
    --btn-github:var(--nonbinary);
    --btn-youtube:var(--lesbian);
    --btn-messenger:var(--genderfluid);

    --onecolor: #505050;

    --lbl-facebook:var(--onecolor);
    --lbl-twitter:var(--onecolor);
    --lbl-instagram:var(--onecolor);
    --lbl-github:var(--onecolor);
    --lbl-youtube:var(--onecolor);
    --lbl-messenger:var(--onecolor);
    
    --background:var(--sm-bg)
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }


.switch {
    position: relative;
    display: inline-table;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--b-accent);
    box-shadow: 0px 10px 10px rgb(0 0 0 / 10%);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: var(--s-button);
    box-shadow: 0px 10px 10px rgb(0 0 0 / 10%);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

.alink{
    display: inline-flex;
    text-decoration: none;
    /* float: left; */
}


.ohraniceni,
.ohraniceni .img-area{
    background: var(--b-background);
    border-radius: 30px;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}

.ohraniceni{
    padding: 30px 30px;
    margin: 30px;
    /* border: 1px solid red; */
    /* max-width: 1000px;  */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}

.ohraniceni .img-area{
    /* border: 1px solid red; */
    height: 150px;
    width: 150px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-area .inner-area{
    height: calc(100% - 25px);
    width: calc(100% - 25px);
    border-radius: 50%;
}
.inner-area img{
    height: 100%;
    width: 100%;
    border-radius: 100px;
    object-fit: cover;
}
.ohraniceni .name{
    font-size: 23px;
    font-weight: 500;
    color: var(--name-color);
}
.ohraniceni .about{
    font-weight: 400;
    color: var(--about-color);
    font-size: 16px;
}

.wrapper{
    display: table;
    /* display: grid; */
    /* justify-content: center; */
    text-align: center;
    vertical-align: middle;
    /* grid-template-columns: 50px 50px 50px; */
    /* border: 2px solid red; */
    /* padding: 0px 10px; */
    /* margin: 10px 0; */
    /* align-items: center; */
}

.wrapper .button{
    display: inline-block;
    text-align: left;
    flex-wrap: wrap;
    height: 60px;
    width: 60px;
    margin:0 5px;
    overflow:hidden;
    background: var(--s-button);
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
    transition: all var(--rychlost) ease-out;
    /* z-index: -100; */
    /* border: 1px solid rgb(0, 17, 255); */
}

@media only screen and (min-width: 750px){
    .ohraniceni{
        width: 650px;
    }
    .wrapper .button:hover{
        width: 200px;
    }
}
.wrapper .button .icon{
   height: 60px;
   width: 60px;
   text-align: center;
}

.wrapper .button .icon::before{
    /* border-radius: inherit; */
    content: '';
    /* overflow: hidden; */
    border-radius: 50px;
    /* display: table-caption; */
    display: flex;
    height: 60px;
    width: 60px;
    position: absolute;
    opacity: 0;
    /* z-index: 1; */
    transition: opacity var(--rychlost);
}

/* Hover Animation */

.wrapper .button:hover .icon::before{
    opacity:1;
}

/* Button Hover Background Colors */

.wrapper .button:nth-child(1) .icon::before {
    background: var(--btn-facebook);
}
.wrapper .button:nth-child(2) .icon::before {
    background: var(--btn-twitter);
}
.wrapper .button:nth-child(3) .icon::before {
    background: var(--btn-instagram);
}
.wrapper .button:nth-child(4) .icon::before {
    background: var(--btn-github);
}
.wrapper .button:nth-child(5) .icon::before {
    background: var(--btn-youtube);
}
.wrapper .button:nth-child(6) .icon::before {
    background: var(--btn-messenger);
}

.wrapper .button .icon i{
    /* z-index: 100; */
    position: relative;
    font-size: 23px;
    color: var(--b-accent);
    line-height: 60px;
    transition: all var(--rychlost) ease-out;
}

.wrapper .button:hover .icon i{
    color: #fff;
    text-shadow: 0px 0px 10px var(--icon-shadow);
}

.wrapper .button  span{
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
    transition: all var(--rychlost) ease-out;

}

/* Button Text Color */

.wrapper .button:nth-child(1) span{
    color: var(--lbl-facebook);
}
.wrapper .button:nth-child(2) span{
    color: var(--lbl-twitter);
}
.wrapper .button:nth-child(3) span{
    color: var(--lbl-instagram);
}
.wrapper .button:nth-child(4) span{
    color: var(--lbl-github);
}
.wrapper .button:nth-child(5) span{
    color: var(--lbl-youtube);
}
.wrapper .button:nth-child(6) span{
    color: var(--lbl-messenger);
}