@font-face {
    font-family:'Comic Neue Angular Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Comic Neue Angular Bold'), url('assets/fonts/ComicNeue-Angular-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: normal;
    src: local('Source Code Pro'), url('assets/fonts/SourceCodePro-VariableFont_wght.ttf') format('truetype');
}

body, html {
    font-family: Geneva, Verdana, sans-serif;
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.code {
    font-family: "Source Code Pro";
    font-weight: bold;
}

a {
    &:link { color:#3078ff; }
    &:visited { color: #9e37fd; }
    &:link:active, &:visited:active { color: #FF0000; }
}

div {
    background-color: rgba(60, 60, 60, 0.7);
    box-shadow: 0px 0px 5px rgb(60, 60, 60);
    padding: 5px 10px;
    width: fit-content;
    margin: 10px auto
}


div.towerlist {
    display: grid;
    margin: 10px auto;
    /*flex-direction: column;
    align-content: space-between;*/

    div.towerstats:hover > p {
        text-decoration: underline;
    }
}

ol.towerlist {
    list-style-type: none;
}

div.towerstats {
    display: grid;
    grid-template-columns: 1fr 1fr 0.5fr 0.3fr 0.3fr 0.3fr /*repeat(6,1fr)*/;
    margin: 10px auto;
    width: unset;


    /*& > * {
        margin: auto 5px;
    }*/
}
.name {
    width: unset;
    grid-column: 1;
}
.creator {
    width: unset;
    grid-column: 2;
}
.difficulty {
    width: unset;
    grid-column: 3;
}
.realm {
    width: unset;
    grid-column: 4;
}
.towerid {
    width: unset;
    grid-column: 5;
}
.acronym {
    width: unset;
    grid-column: 6;
}

div.left {
    margin: 10px 5px;
}

div.hidden, div.flex, div.grid {
    background-color: rgba(60,60,60,0);
    box-shadow: 0px 0px 0px;
    width: fit-content;
    margin: 0;
    padding: 0;
    &.left {
        margin: 10px 5px;
    }
    &.center {
        margin: 10px auto;
    }
}

div.grid {
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-areas:
    "title title"
    "image info"
    "image badge"
    "raw raw";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 240px auto;
}

div.flex {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

p.left {
    padding-left: 5px;
    text-align: left;
}

.flex-container {
    display: flex;
    flex-wrap: nowrap;
    padding: 10px;
}

.button-grid {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}

.button-grid > a {
    display: inline-block;
    width: 100px;
    padding: 10px 10px;
    margin: 10px;

    color: #11212d;
    font-size: 25px;
    text-align: center;
    text-decoration: none;

    outline-style: solid;
    outline-color: #11212d;
    outline-width: 5px;


    %:active{
        color: #11212d;
    }
}

.outline {
    outline-style: solid;
    outline-color: #11212d;
    outline-width: 5px;
}

#green {
background-color: rgb(100, 255, 100);
}
#blurple {
background-color: #7289da;
}
#pink {background-color: rgb(255, 100, 255);}
#dark-green {background-color: #45bf55;}
#docs {background-color: #4a90e2;}

.Easy {color: #75f347}
.Medium {color: #fffe00}
.Hard {color: #fd7c00}
.Difficult {color: #ff0c02}
.Painful {color: #c10000}
.GLB {color: #19232d;text-shadow: 2px 2px 5px gray}
.Eggplant {color: #ff00ff}
.Malicious {color: #0000ff;text-shadow: 2px 2px 5px gray}
.Chaotic {color: #0389ff}
.Wicked {color: #00ffff}
.Vile {color: #ffffff}
.nil {color: #65666d}


p, pre, h1, a {
    margin: auto;
    position: relative;
    text-align: center;
    &::selection { background: #4a90e2; }
}


img {
    width: 100%;
    height: auto;
}

.footer {
    & > p {
        font-size: 15px;
    }
}
h1 {
    font-family: "Comic Neue Angular Bold";
    font-size: 80px;
    color: #FFFFFF;
    text-shadow: 4px 4px 10px black;
}

p, pre, a {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
}
p, pre {
    text-shadow: 2px 2px 5px black;
}

/*
 * dropshadow under link
 * & > a {
 *    background-color: rgba(60, 60, 60, 0.7);
 *    box-shadow: 0px 0px 5px rgb(60, 60, 60);
 *    padding: 0px 5px;
 *    width: max-content;
 *    margin: 0px auto;
 * }
 */