@media (min-width: 768px) {
body {
  margin-top: 25px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 25px;
  color: #f7efff;
  font-weight: bold;
  font-size: 125%;
  font-family: 'Montserrat', serif;
  background-color: #301705;
}

h1,h2,h3 {
  font-family: 'Roboto Slab', serif;
}
a:link {color: #ce9dff;}
a:visited {color: #e1c2ff;}
a:active {color: #ab56ff;}
#header { 
border-radius: 10px;
display: flex;justify-content: space-between; align-items: center;
background-color: #10381a; color: #f7efff; padding: 20px; 
text-shadow: #52208c 1px 1px 0, #52208c 2px 2px 0, 
               #52208c 3px 3px 0, #52208c 4px 4px 0;}
               
.logo {font-size: 24px; font-weight: bold;}
.menu {list-style: none; display: flex;}
.menu li {margin-left: 10px;}
.breadcrumbs {background-color: lightblue; padding: 10px;}
.breadcrumbs .breadcrumb-item {display: inline-block; margin-right: 5px;}

#content { border-radius: 10px;
background-color: #fff5ee; color: #10381a;
padding: 20px; margin-top: 10px;
}

.footer {border-radius: 10px; background-color: #10381a; padding: 20px; margin-top: 10px;}
.contacts {font-weight: bold;}
.copyright {text-align: center; margin-top: 10px;}
.mobilemenu {list-style: none; display: none;}
.mobilemenuopen {list-style: none; display: none;}
}

@media (max-width: 767px) {
body {
  zoom: 90%;
  color: #f7efff;
  font-weight: bold;
  font-size: 110%;
  font-family: 'Montserrat', serif;
  background-color: #301705;
}
h1, h2, h3 {font-family: 'Roboto Slab', serif;}
a:link {color: #ce9dff;}
a:visited {color: #e1c2ff;}
a:active {color: #ab56ff;}
#header {
  border-radius: 10px; display: flex; justify-content: space-between;
  align-items: center; background-color: #10381a; color: #f7efff;
  padding: 10px; text-shadow: #52208c 1px 1px 0, #52208c 2px 2px 0, 
               #52208c 3px 3px 0, #52208c 4px 4px 0;}

dialog { 
border-radius: 10px; align-items: center;
background-color: #10381a; color: #f7efff; padding: 20px; 
text-shadow: #52208c 1px 1px 0;}

.logo {font-size: 20px; font-weight: bold;}
.menu {list-style: none; display: none;}
.mobilemenu {list-style: none; display: flex;}
.mobilemenu li {margin-left: 5px;}
.mobilemenuopen {list-style: none; display: flex;}
.mobilemenuopen li {margin-left: 5px;}
.breadcrumbs {background-color: lightblue; padding: 5px;}
.breadcrumbs .breadcrumb-item { display: inline-block; margin-right: 2px;}

#content {
  border-radius: 10px;
  padding: 10px; background-color: #fff5ee;
  color: #10381a; margin-top: 2px;}
  
.footer {border-radius: 10px; background-color: #10381a; padding: 10px;}
.contacts {font-weight: bold;}
.copyright {text-align: center; margin-top: 5px;}
}