@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');

:root {
	--color-princ: #4088cf;
	--color-second: #76b4ee;
	--color-chevron: #dd5fbe;
	--color-mug: #0092d2;
	--color-coffee: #a05425;
	--color-round: #050404;
	--color-txt: rgb(133, 133, 133);
	--color-border: rgba(255,255,255,.1)
	--color-text: #333:
	--range-slider:          #d7dada; /* slider main background color */
 	--range-handle-inactive: #99a2a2; /* inactive handle color */
 	--range-handle:          #76b4ee; /* non-focussed handle color */
 	--range-handle-focus:    #4088cf; /* focussed handle color */
 	--range-handle-border:   var(--range-handle);
 	--range-range-inactive:  var(--range-handle-inactive); /* inactive range bar background color */
 	--range-range:           var(--range-handle-focus); /* active range bar background color */
 	--range-float-inactive:  var(--range-handle-inactive); /* inactive floating label background color */
 	--range-float:           var(--range-handle-focus); /* floating label background color */
 	--range-float-text:      white; /* text color on floating label */
}

* {
	box-sizing: border-box;
	scrollbar-color: var(--color-second) var(--color-princ);
	scrollbar-width: thin;
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding:0;
	box-sizing: border-box;
	color: rgb(146, 146, 146);
	background-color: var(--color-round);
}

body {
	color: var(--color-text);
	margin: 0;
	font-family: 'Roboto', sans-serif;
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

img {
	width: 100%;
	height: auto;
	border: none !important
}

.gallery  {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: center;
}

::-webkit-scrollbar {
	width: 3px;
}

::-webkit-scrollbar-track {
	background: var(--color-second);
}

::-webkit-scrollbar-thumb {
	background: var(--color-princ);
	transition: 200ms ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-princ);
}

.button {
    border: none;
    padding: 10px;
    background: var(--color-princ);
    color: white;
    border-radius: 5px;
    transition: 200ms ease-in-out;
  }

button {
	cursor: pointer;
	transition: 200ms ease-in-out;
}

button:hover {
	transform: translate(-1px,-1px);
	box-shadow: 5px 5px 0 rgba(0,0,0,.3);
	border-radius: 3px;
} 

fieldset {
	border: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

fieldset input {
	outline: none;
	border: 1px solid var(--color-princ);
	padding: 10px;
}

fieldset label {
	text-align: left;
	color: var(--color-princ);
}

textarea {
	outline: none;
}

h2 {
	color: black !important;
	font-weight: bold !important;
}

.gallery-item, .gallery  {
	display: flex;
	gap: 15px;
	justify-content: center;
}

.gallery-item > dt{
	margin: 0;
	min-width: 40%;
	justify-content: center;
}

.gallery > dl {
	margin: 0;
	min-width: 20%;
	justify-content: center;
}

.wp-caption {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100% !important;
}

table, table tr {
	width: 100%;
	text-align: center;
}
table img {
	width: initial;
	max-width: 200px;
}

@media screen and (max-width: 800px){
	table img {
		width: 100%;
	}
}