/* SRC: /static/index.css */
html,body {
 margin: 0px;
 padding: 0px;
 width: 100vw;
 height: 100vh;
 overflow: scroll;
}

body {
 display: flex;
 flex-direction: column;

 background-color: #20202a;
 color: #eee;

 font-size: large;
 font-family: monospace;
}

.version {
 position: absolute;
 display: flex;
 text-align: right;
 padding: 0px;
 margin: 0px;

 font-size: small;
}

/* SRC: /static/main.css */
.Home, .Search {
 display: flex;
 justify-content: center;
 align-items: center;



 width: 100vw;
 height: 100vh;
}

.contentBox {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 
 outline: 2px solid whitesmoke;
 padding: 16px;


 min-height: 20%; 

}

.tileBox {
 display: flex;
 justify-content: center;
 padding: 2px;

 width: 100%;

 margin-top: 16px;
}

.homeTile {
 display: flex;
 flex-direction: column;
 margin: 4px;
 padding: 4px;

 justify-content: center;
 outline: 1px solid greenyellow;

 transition: all 0.5s ease-out;
}

.homeTile a {
 color: inherit;
 text-decoration: inherit;

 transition: all 0.5s ease-out;

}

.homeTile:hover {
 outline: 1px solid cyan;
 box-shadow: 2px 2px 5px white;
}

.homeTile a:hover {
 color: cyan;
}

code {
 font-family: monospace;
 white-space: pre;
 background-color: rgba(255, 255, 255, 0.100);
 padding: 4px;
 outline: 1px solid white;
}



.splitter {
 padding: 0px;
 margin: 0px;
 width: 100%;
 height: 2px;
 background-color: white;

}

a, a:link, a:visited {
 color: inherit;
 text-decoration: initial;
 transition: color 200ms ease; 
 transition: text-shadow 100ms ease;
}

a:hover {
 color: cyan;
}

a:link:active {
 color: cyan;
 text-shadow: 5px 5px 15px cyan;
}

/* SRC: /static/search/search.css */
.contentBox_ {
 align-items: start;
 margin: 0.2rem
}

.header {
 font-size: x-large;
 text-align: center;
 height: min-content;
}


.searchBar {
 display: flex;
 flex-direction: column;
 margin-top: 0.2em;
 width: 100%;
 height: max-content;

 justify-content: center;
 justify-self: center;
}

.searchBar input {
 width: 90%;
 background-color: transparent;
 color: white;
 border: 1px solid white;
 border-right: 1px dotted white;

 font-family: monospace;
 font-size: large;
}

.searchBar .searchButton {
 width: 10%;
 background-color: transparent;
 border: 1px solid white;
 border-left: none;
}

.searchBar .search_entry form {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 1em;
}
.searchBar .search_entry {
 display: flex;
}
.searchBar .sortType {
 display: flex;
 font-size: medium;
}

.searchBar summary {
 margin-top: 0.5rem;
 font-size: medium;
}

.searchBar .upload_date {
 font-size: medium;
}

.searchResultsBox {
 overflow: scroll;
 outline: 2px solid white;
 padding: 0.2em;
}

.Search {
 align-items: start;
}

.contentBox_ {
 display: grid;
 flex-direction: column;
}

.searchResultsFooter {
 display: flex;
 font-size: large;
 text-align: center;
 border-top: 0.1rem solid white;
 align-items: center;
 margin-bottom: 3rem;
}

.searchResultsFooter p {
 margin: 0.5rem;
}

.searchResultsFooter a {
 margin: 1rem;
 border: 1px solid blue;
}

/* SRC: /static/search/searchResults.css */
.searchResults {
 display: grid;
 align-self: start;
 align-content: start;
}

.fullResponse {
 font-size: small;
 overflow: scroll;
 max-width: 20rem;
}

.fullResponse table, .fullResponse table td {
 border: 2px solid transparent;
 background-color: #30303a55;
 border-collapse: collapse;
}


.fullResponse table thead {
 background-color: #000;
}

.fullResponse table tr:hover {
 background-color: #FFFFFF55;
}

.searchResultCard {
 display: grid;
 margin: 4px;
 margin-top: 8px;
 margin-bottom: 8px;

 padding: 0.5em;

 font-size: medium;
 outline: 1px solid white;

 max-width: 50rem;

 grid-template-columns: 0.9fr 1fr;
 column-gap: 0.5rem;
}

@media screen and (max-width: 550px) {
 .searchResults {
 font-size: small;
 }
 .times {
 font-size: smaller;
 }
 
}

.searchResultCard .thumbnail {
 display: grid;
 justify-self: left;
 background-color: transparent;

 justify-content: center;
 max-width: 100%;
 height: fit-content

}

.searchResultCard .thumbnail img {
 width: 100%;
 height: auto;
}

.searchResultCard .details {
 display: grid;
 border-left: 1px solid white;
 padding: 0.5rem;
 column-gap: 1em;

 justify-content: left;
 text-align: left;

 grid-template-columns: 1fr;

 grid-template-areas: "basic";
}

.searchResultCard .basic {
 align-self: left;
 justify-content: left;
}

.levelRating {
 justify-self: left;
 margin-top: 0.5em;
}

.levelTitle {
 justify-self: left;
 text-align: left;
 font-size: large;
 font-weight: bold;
 margin-bottom: 0.3rem;
}

.creatorName {
 justify-self: left;
 text-align: left;
}

.levelDescription {
 overflow-x: scroll;
 text-align: left;
 background-color: #30303a;
 padding: 0.5rem;
 font-size: small;

 /* justify-self: right;

 width: 100%;

 padding: 0.5em;

 outline: 1px dashed pink; */
}

@keyframes pulse {
 from {
  border: 2px solid initial;
  color: inherit;
 }

 to {
  border: 2px solid lime;
  color: lime
 }
}

.levelCode {
 margin-top: 0.5em;
}

.levelCode input {
 background-color: transparent;
 color: white;
 font-family: monospace;
 width: 6rem;
 text-align: center;

 border: 1px solid #505050;
 transition: background-color 200ms ease;
}

.levelCode input:focus {
 outline: none;
 background-color: #00FFFF10;
 transition: background-color 1s ease;
}

.levelCode input:active {
 background-color: lime;
}

.illegal {
 color: red;
}

/*
.levelDifficulty {
 display: flex;
 justify-self: right;
 /* z-index: 1; * /
}
.levelDifficulty span {
 text-align: end;
 justify-self: right;
 font-size: 2em;
 overflow: hidden;
}*/

.playlist-details {
 margin-bottom: 1em;
}

.playlist-details h2 {
 font-size: large;
}

.playlist-details p {
 margin: 0em;
}