@charset "utf-8";
/* CSS Document */
body { 
  font-family: Montserrat, sans-serif;
  color: white;
  background:url(/style/BG.png);
}

@media (max-width: 999px){
	menu {
    background: #d9d7d5;
	padding: 0.25rem;
    overflow-y: scroll;
    white-space: nowrap;}}

@media (min-width: 999px){
	menu {
	background: #d9d7d5;
    padding: 0.25rem;
    overflow-y: scroll;
    white-space: nowrap;
	display: flex;
	justify-content: center;}}

 span {
    background: #828080;
    color: #ffffff;
    display: inline-block;
    margin: 0.25rem;
    padding: 0.5rem;}

a:link {
  color: #ffffff;
	text-decoration:none;}
a:visited {
  color: #ffffff;
	text-decoration:none;}
a:hover {
  color: darkred;
  text-decoration:none;}
a:active {
  color: red;
	text-decoration:none;}

.card-container {
  container: card / inline-size;
  max-width: 999px;
  min-width: 250px;
  resize: horizontal;
  overflow: hidden;
  border: 1px solid white;
  box-shadow: 4px 4px 10px #0005;
  background: white;
  color: black;}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  background: 
    linear-gradient(to right, transparent 190px, white 190px),
    linear-gradient(to bottom, #9146eb 50%, #ea17cf 50%);
}

.content img {
  position: relative;
  width: 190px;
  height: 190px;
}

.data {
  margin: 1em;
}

@media (max-width: 450px) {
  .content {
    flex-direction: column;
    background: linear-gradient(#9146eb, #ea17cf 190px, transparent 190px);
  }
}

.frow {
    color: aqua;
	clear:both;
	padding:10px;
}

.frow .col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
  background: #CCC;
  padding:2%;
}

.frow .col:first-child { margin-left: 0; }

.frow .col4 {
  width: 19.8%;
}

.frow .col3 {
  width: 28%;
	}


@media only screen and (max-width: 800px) {
	.col {  margin: 1% 0 1% 0%;  margin-left: 0 !important;}
	.frow .col3, .frow .col4 { width: 100%; }
}