a:link, a:hover, a:active, a:visited{color: #000;}

html, body{margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}

canvas{margin: 0; padding: 0; border: none; display: block;}

button:hover{cursor: pointer;}

@font-face{
	font-family: "Rametto";
	src: url("data/styles/font.ttf");
}

*{ 
	font-family: "Rametto";
	color: #000;
	font-size: 17px;
}

:root{
    --if-background-color: rgb(0, 100, 131);
    --if-width: 300px;
    --if-border-width: 5px;
    --if-padding: 25px;
    --if-content-width: calc(var(--if-width) - var(--if-padding) * 2);
}

/**
 * Standard styles
 */

#content{
    display: grid;
    grid-template-columns: calc(var(--if-width) + var(--if-border-width)) calc(100% - var(--if-width));
    grid-template-rows: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

button{
    background-color: rgb(67, 202, 67);
    margin: 5px;
    border-radius: 5px;
}
button:hover:not(.used_color):not([disabled]){
    background-color: rgb(49, 150, 49);
}
button:disabled{
    background-color: rgb(121, 121, 121);
}


#loading_drawings{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(50, 182, 138, 0.699);
    text-align: center;
}
#action{
    font-size: 50px;
}
#loading_drawings > progress{
    width: 700px;
    height: 30px;
}
#warning{
    font-size: 10px;
}

#p5_loading{
    display: none;
}
#loading_maps{
    width: 100%;
    display: flex;
    justify-content: center;
}
#pixels_map_holder, #lines_map_holder{
    width: 500px;
    height: 500px;
    border-radius: 5px;
    border: 3px solid #000;
    background-color: #FFF;
    margin: 50px;
}


#user_feedback{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(50, 182, 138, 0.699);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#user_feedback > *{
    width: 50%;
}


#interface{
    background-color: var(--if-background-color);
    border: var(--if-border-width) solid #000;
    border-width: 0 5px 0 0;
}

#version{
    position: absolute;
    bottom: 55px;
}
#changelog{
    position: absolute;
    bottom: 30px;
}
#start_user_feedback{
    position: absolute;
    bottom: 0;
    height: 25px;
    font-size: 15px;
}

#color_picker{
    width: var(--if-content-width);
    height: var(--if-content-width);
}
#color_picker_numeric_holder{
    margin: 10px var(--if-padding);
    width: var(--if-content-width);
    background-color: none;
}
#color_picker_numeric{
    background-color: none;
}
#color_picker_rgb, #color_picker_hsv{
    display: none;
}
#used_colors{
    width: var(--if-content-width);
    margin: 0 var(--if-padding);
    display: flex;
    justify-content: space-between;
}
.used_color{
    width: 30px;
    height: 30px;
    margin: 0;
    background-color: white;
}
#get_color{
    width: calc(var(--if-content-width));
    margin: 0 var(--if-padding) 15px;
    font-size: 11px;
    border-radius: 3px;
    background-color: white;
}
#get_color:hover{
    background-color: rgb(150, 150, 150);
}

#free_settings, #pixel_settings{
    margin: 0px var(--if-padding);
    width: var(--if-content-width);
    height: 80px;
}

#thickness_holder{
    display: flex;
    align-items: center;
}
#thickness{
    width: calc(var(--if-content-width) - 50px);
}
#thickness_preview_holder{
    position: relative;
    margin: 0 0 0 10px;
    width: 40px;
    height: 40px;
}
#thickness_preview{
    border: 1px solid #000;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

#set_hotkey{
    float: right;
    margin: 0;
    font-size: 12px;
    height: 28px;
}

#minimap{
    width: var(--if-content-width);
    height: var(--if-content-width);
    margin: 22px;
    border-radius: 5px;
    border: 3px solid #000;
}
#minimap > canvas{
    border-radius: inherit;
}

#draw_type{
    width: var(--if-content-width);
    margin: 0 var(--if-padding);
    text-align: center;
}

#server_save{
    width: calc(var(--if-content-width) * 0.6);
    margin: 10px calc(var(--if-padding) + var(--if-content-width) * 0.2)
}
#server_answer{
    display: block;
    width: var(--if-content-width);
    font-size: 15px;
    text-align: center;
    margin: 0 var(--if-padding);
}