:root {
  --blue: #3c78d8;
  --white: #ffffff;
        --theme: #202124;
        --one: #202124;
        --two: #ff6347;
        --three: #3c78d8;
        --four: #00A36C;
        
}
    
    @import url('https://fonts.googleapis.com/css?family=Lato');
    body {
        margin:0;
        padding: 0;
        font-family: 'Lato', sans-serif;
        background:var(--theme);
    }

    #gear {
    
        padding-right: 5px;
    }
    
    #paint {
        font-size:30px;
        color:white;
    }

    #glass {
        color: gray;
    }
    #button {
        height: 20px;
        width: 100px;
        background: var(--theme);
        text-align: center;
        margin-left:40px;
        margin-top: 10px;
        padding:10px;
  
        border-radius:2px;
        color: var(--white);
    }
    
    #button:hover {
        cursor: pointer;
        opacity: .9;
    }
    #lg_container {
        
        
        height:100%;
        width:100%;
        opacity: 1;
        
    }
    #content {
        width:600px;
        margin-right: auto;
        margin-left:auto;
       
        width: 600px;
        height: 400px;
        position: absolute; /*Can also be `fixed`*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
        text-align: center;
    }
    
    #logo {
        height: 150px;
        width: 600px;
        background-image: url(images/wp_w_600.svg);
    }
    
    #search_bar {
        padding:10px;
        padding-left: 40px;
        margin-top:10px;
        width: 540px;
        border: 0px solid white;
        border-style: hidden;
        border-radius: 20px;
        font-size:16px;
        
    }
    #search_btn {
     float: left;
       position:absolute;
        z-index: 20;
              background: none;
	color: inherit;
	border: none;
	
	font: inherit;
	cursor: pointer;
	outline: inherit;
       margin-top:20px;
        margin-left:5px;
        
     
    }
    #show {
        text-align: center;
        margin-top:10px;
        color: var(--white);
        
    }
    #edit {
        padding: 5px;
         margin-top:10px;
        text-align: center;
        width:100px;
        margin-left: auto;
        margin-right: auto;
        
        height: 20px;
        width: 100px;
        background: var(--white);
        text-align: center;
      
  
        border-radius:2px;
        color: var(--theme);
        
    }
    #edit:hover {
        cursor: pointer;
        opacity: .9;
    }
    
    /*******************/
    
    #popup {
        visibility: hidden;
        padding: 10px;
        background: white;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        
        width: 200px;
        height: 220px;
        position: absolute; 
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
    }

    
.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
	overflow: auto;
  padding-left:20px;
}

ul li{
  color: black;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  

}


ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label {
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 14px;
 padding-top:10px;
  padding-left: 30px;
  padding-bottom: 16px;
  z-index: 9;
  cursor: pointer;
 
}

ul li:hover label{
	color: gray;
}

ul li .check{
  display: block;
  position: absolute;
  border: 1px solid #AAAAAA;
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 10px;
  left: 0px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 1px solid gray;
}

ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 10px;
  width: 10px;
  top: 2.5px;
	left: 2.5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 2px solid var(--theme);
}

input[type=radio]:checked ~ .check::before{
  background: var(--theme);
}

input[type=radio]:checked ~ label{
  color: var(--theme);
}


    #color_btn {
        height:30px;
        width: 30px;
        
        margin-top:10px;
        margin-left: 10px;
        margin-bottom: 10px;
    }
    
    #color_btn:hover{
        cursor: pointer;
    }
    
    #color_block {
        visibility: hidden;
    }
    
    .color {
        font-size:25px;
        padding:2px;
        
        margin-left:10px;
        border: 2px solid white;
        border-radius: 25px;
        width:25px;
        height:25px;
    }
    .color:hover {
        cursor:pointer;
    }
    
    #one {
        background-color: var(--one);
      
    }
    #two {
        background-color: var(--two);
       
    }
    #three {
        background-color: var(--three);
    }
    #four {
        background-color: var(--four);
    }
    
    #head {
        max-width:1800px;
        margin-right: auto;
        margin-left: auto;
    }
    
    
@media only screen and (max-width: 600px) {

    #content {
        width:300px;
    }
    #logo {
        height: 75px;
        width: 300px;
             margin-left: auto;
             margin-right: auto;
        background-image: url(images/wp_w_300.svg);
    }
    #search_bar {
        padding:10px;
        padding-left:30px;
        width: 240px;
        border: 1px solid black;
        margin-left:auto;
        margin-right: auto;
     
        
        
    }
    
    #search_btn {
        visibility:hidden;
    }
}