@import url('https://fonts.googleapis.com/css?family=Roboto+Slab|Barlow');

:root {
    --headerColor: #2b2828;
    --pluginColor: lightgray;
    --backgroundColor: white;
    --textButtonColor: black;
    --highlightColor: Highlight;
}


/* Styles applied when the user prefers dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --headerColor: black;
        --pluginColor: #222222;
        --backgroundColor: #2b2828;
        --textButtonColor: white;
        --highlightColor: Highlight;
    }
}

body {
    margin: 0;
    background-color: var(--backgroundColor);
}

.header {
    width: 100%;
    background-color: var(--headerColor);

    display: flex;
    align-items: stretch; 

    margin: 0;
    padding: 0;

    position: fixed;

}

.header img {
    float: left;
    padding: 3px 10px;
}

.header h1 {
    font-size: 40px;
    color: white;
    line-height: 70px;

    margin: 0;
    padding: 0;

    font-family: 'Roboto Slab', serif;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header h1:hover {
    cursor: pointer;
}

#searchInput {
    margin: 10px;
    margin-left: auto;
    padding-left: 12px;
    
    border-radius: 25px;
    border-width: 3px;
    border-color: var(--pluginColor);
    border-style: solid;

    font-family: 'Roboto Slab', serif;
    font-size: 15px;
}

#searchInput:focus {
  outline: none;

  border-color: var(--highlightColor);
}

.main {
    margin: 0;
}

#pluginArea {
    padding: 1px;
    
    margin-inline: 10px;
}

#pluginList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    list-style-type: none;
    padding-left: 0;
    margin-top: 80px;
}

@media screen and (max-width: 1000px) {
    #pluginList {
        grid-template-columns: 1fr;
    }
}

#pluginList li {
    display: flex;
    flex-direction: column;
    color: var(--textButtonColor);
}

.plugin {
  padding: 7px;
  /* padding-inline: 12px; */
  background-color: var(--pluginColor);

  border-radius: 25px;
  border-width: 3px;
  border-color: var(--pluginColor);
  border-style: solid;

  font-family: 'Roboto Slab', serif;
  font-size: 25px;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: border-color 0.2s;
}

.plugin:hover {
    border-color: var(--highlightColor);
}

.plugin.is-active {
    border-color: var(--highlightColor);
}

.plugin > * {
    font-family: 'Barlow', sans-serif;
    font-size: initial;
    font-weight: initial;
}

.pluginOuter  {
    display: flex;
    align-items: stretch;  
    gap: 25px;

    flex: 1;
}

.pluginLeft {
    font-family: 'Roboto Slab', serif;
    font-size: 25px;
    text-align: center;

    min-width: 200px;
    max-width: 200px;
}

.pluginLeft:hover{
    cursor: pointer;
}

.pluginRight {
    display: flex;
    flex-direction: column;

    max-height: 300px;

    overflow-y: auto;
    overflow-x: hidden; /* Hides horizontal scrollbar */

}

.description, .owner, .tagsDiv, .publication{
    padding-top: 10px;
}

.pluginImage {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;

    margin-top: 10px;
    margin-bottom: 10px;
}

.tagsDiv {
    display: flex;
    flex-wrap: wrap;
}

.tag {
    display: box;
    margin: 0px;
    margin-right: 5px;
    margin-bottom: 10px;
    padding: 1px 3px;

    border-radius: 5px;

    border-color: var(--textButtonColor);
    border-width: 1px;
    border-style: solid;

}

.pluginBottom {
    display: flex;
    gap: 10px;

    margin-top: auto;
    flex: 1;
}

.buttonContainer {
    text-align: right;
    margin-left: auto;
    margin-top: auto;
}


.button {
    padding: 10px 5px;
}

button {
    border-style: solid;
    border-color: var(--textButtonColor);
    color: var(--textButtonColor);
    border-width: 2px;
    border-radius: 10px;
    padding: 2px 5px;
    margin-inline: 5px;
    margin-top: auto;

    background-color: var(--pluginColor);

    font-size: 15px;
    font-weight: bold;
    font-family: 'Barlow', sans-serif;
}

button:hover:enabled {
    color: white;
    border-color: var(--highlightColor);
    background-color: var(--highlightColor);

    cursor: pointer;
}

select {
    border-style: solid;
    border-color: var(--textButtonColor);
    color: var(--textButtonColor);
    border-width: 2px;
    border-radius: 10px;
    padding: 2px 5px;
    margin-inline: 5px;

    background-color: var(--pluginColor);

    font-size: 15px;
    font-weight: bold;
    font-family: 'Barlow', sans-serif;
}

select:hover {
    color: white;
    border-color: var(--highlightColor);
    background-color: var(--highlightColor);
}

select option {
    color: var(--textButtonColor);
    border-color: var(--textButtonColor);
    background-color: var(--pluginColor);
}

/* fix ugly scrollbars on chrome */
::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar {
  width: 4px;
  border-radius: 2px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #888;
}