@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');

/* General Colors */

body {
    color: #D79717;
    background-color: #1a1a1a;
    font-family: Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Open Sans, sans-serif;
    color: #ffc107;
    padding: 0 0 25px 0;
}

.divider {
    background-color: #BA0C0C;
    width: 75px;
    height: 5px;
}

strong {
    color: #ffc107;
}

.btn-joinUs, .modalButton, .btn-turnBack {
    background-color: #BA0C0C;
}

/* Image styles */

#hero-image {
    background-color: #0E174F;
    background-image: url("../img/Hero-img.jpg");
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

#wrongpath {
    height: 100vh;
    background-color: #0E174F;
    background-image: url("../img/404-bk.jpg");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
}

/* Carousel fix for variable size images from Stackoverflow (full credit in readme.md) */

.carousel-item {
    width: 100%;
    height: 80vh;
    overflow: hidden;
}
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#screens {
    clear: both;
    line-height: 0;
    column-count: 4;
    column-gap: 0;
}

img {
    width: 100%;
    padding: 0 2%;
}

#comics img {
    width: 70%;
    border-radius: 5px;
}

#rankImg {
    width: 189px;
    height: 189px;
}

.otherachiev img, iframe {
    border: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #D79717;
}

/* Navbar Style */

nav {
    background-color: #1a1a1a;
    border: solid;
    border-width: 1px;
    border-color: #BA0C0C;
    border-radius: 5px;
}

nav .navbar-nav li a {
    color: #ffc107 !important;
}

.navbar-brand {
    width: 50px; 
}

.intro {
    height: 35vh;
    top: 65vh;
    background-color: rgba(0, 0, 0, 0.75);
}

/* Code to change hamburger toggler from StackOverflow (full credit in readme.md) */

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,193,7, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }

.navbar-dark .navbar-toggler {

border-color: #ffc107;
}

/* Footer Style */

footer {
    margin: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #BA0C0C;
    border-radius: 5px;
    padding: 1% 0 1% 5%;
}

footer a {
   float: right;
   padding: 0 5% 0 0;
}

footer i {
    color: #ffc107;
    font-size: 150%;
}

/* Column Styles */

.leadership, .strategy {
    margin-top: 82px;
}

.activities, #comics {
    background-color: #0E174F;
    background-image: url("../img/Hero-img.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

.history, .leadership {
    background-color: #0E174F;
    background-image: url("../img/guild-info-bk.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

.opaq {
    background-color: #1a1a1a;
}

.col-12, .col-6, .col-3 {
    padding: 25px 0;
}

li {
    list-style: none;
}

ul {
    padding: 0;
}

.overlay {
    background-color:rgba(0, 0, 0, 0.75)
}

p {
    padding: 0 5%;
}

.classLinks {
    padding-bottom: 5%;
}

iframe {
    width: 100%; 
    height: 315px;
}

/* Class Links section style inspired from Club Ethos section in Code Institute "Love Running" practical lesson */

.wowheadLink {
    border-style: double;
    border-width: 5px;
    border-color: #BA0C0C;
    border-radius: 50%;
    padding: 15px;
    width: 35%;
}

.wowheadLink-text {
    width: 60%;
    float: left;
    clear: both;
    text-align: right;
}

.wowheadLink-text h2 {
   color: #f81616;
}

.icyveinsLink {
    border-style: double;
    border-width: 5px;
    border-color: #163E88;
    border-radius: 50%;
    padding: 15px;
    width: 35%;
}

.icyveinsLink-text {
    width: 60%;
    float: right;
    clear: both;
    text-align: left;
}

.icyveinsLink-text h2 {
    color: #1a5dda;
}

/* Table Style */

.mythicTable {
    border-radius: 10px;
}

.mythicTable {
    background-color: #0E174F;
    background-image: url("../img/class-guide-bk.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    position: relative;
}

.table {
    color: inherit;
}

.table thead th, .table td, .table th {
    border-color: #BA0C0C;
    vertical-align: middle;
    padding-left: 0;
    padding-right: 0;
}


th img, td img {
    max-height: 56px;
    max-width: 56px;
}

/* Modal Style */

.modal-content {
    background-color: #1a1a1a;
    border-style: solid;
    border-width: 2px;
    border-color: #BA0C0C;
    border-radius: 5px;
}

.modal .close {
    color:#ffc107;
}

.modal img {
    width: 75px;
}

/* Media Queries */

/* For medium screens up to 1000px  */

@media screen and (max-width: 1000px) {
    #screens {
        column-count: 3;
    }
}

/* For small screens up to 800px */
@media screen  and (max-width: 800px) {
    #screens {
        column-count: 2;
    }
}