/************************ BODY: Start **************************//************************ BODY: Start **************************/
/************************ BODY: Start **************************//************************ BODY: Start **************************/
/************************ BODY: Start **************************//************************ BODY: Start **************************/
body {
    margin: 0.5rem;
    font-family: "Ubuntu", serif;
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.889), #071f32); /* Default Dark with a tint indigo */
    color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* Light theme colors */
body.light {
    background: linear-gradient(to bottom right, rgb(18, 133, 199, 0.2), rgba(203, 119, 201, 0.2));
    color: black;
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

.shadows-into-light-regular {
    font-family: "Shadows Into Light", serif;
    font-weight: 400;
    font-style: normal;
}

footer {
    padding-top: 5rem;
    padding-bottom: 2rem;
    text-align: center;
}
/************************ BODY: End **************************//************************ BODY: End **************************/
/************************ BODY: End **************************//************************ BODY: End **************************/
/************************ BODY: End **************************//************************ BODY: End **************************/

/******************** NAV: Start **********************//******************** NAV: Start **********************/
/******************** NAV: Start **********************//******************** NAV: Start **********************/
/******************** NAV: Start **********************//******************** NAV: Start **********************/
/* Section: Nav *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
nav {
    display: flex;
    align-items: center;
    margin-bottom: 1rem; /* Added margin to create space below the navbar */
}

.nav-title {
    font-size: 1em;
    margin-right: auto;
    padding-left: 1.6em;
    font-weight: bold;
}
/* Nav controls (container) *//**//**//**//**//**//**//**//**//**//**/
.nav-controls {                                                 /**/
    margin: 0 auto; /* Center the links */                      /**/
    padding-right: 1.6rem;                                      /**/
    font-size: 1.5em;                                           /**/
}                                                               /**/
.nav-controls ul {                                              /**/
    list-style: none;                                           /**/
}                                                               /**/
.nav-controls li {                                              /**/
    display: inline;                                            /**/
    padding: 1em;                                               /**/
}                                                               /**/
.nav-controls a {                                               /**/
    color: #cccccc8a;                                         /**/
    text-decoration: none;                                      /**/
    margin: 0 20px;                                             /**/
}                                                               /**/
body.light .nav-controls a {                                    /**/
    color: rgb(91, 91, 91);                                 /**/
}                                                               /**/
/* Effects & states */                                          /**/
.nav-controls a:hover, .nav-controls a.active {                                         /**/
    color: white;                                           /**/
}                                                               /**/
body.light .nav-controls a:hover, body.light .nav-controls a.active {                              /**/
    color: coral;                                           /**/
}                                                               /**/
                                                                /**/
/* Objects: mobile menu *//**//**//**//**//**//**//**//**/      /**/
.mobile-menu {                                      /**/        /**/
    display: none;                                  /**/        /**/
    cursor: pointer;                                /**/        /**/
    padding: 0.5rem;                                /**/        /**/
    justify-self: end;                              /**/        /**/
    border-radius: 10px;                            /**/        /**/
}                                                   /**/        /**/
/* Effects & states */                              /**/        /**/
.mobile-menu:hover {                                /**/        /**/
    background-color: rgba(166, 174, 184, 0.3); /**/        /**/
}                                                   /**/        /**/
body.light .mobile-menu:hover {                     /**/        /**/
    background-color: rgba(166, 174, 184, 0.3); /**/        /**/
}                                                   /**/        /**/
.nav-controls.active li {                           /**/        /**/
    display: block;                                 /**/        /**/
}                                                   /**/        /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/        /**/
                                                                /**/
/* Objects: theme toggle *//**//**//**//**//**//**//**/        /**/
/* - The switch - the box around the slider */      /**/        /**/
.switch {                                           /**/        /**/
    margin-left: 1.2em;                             /**/        /**/
    position: relative;                             /**/        /**/
    display: inline-block;                          /**/        /**/
    width: 40px;                                    /**/        /**/
    height: 24px;                                   /**/        /**/
}                                                   /**/        /**/
/* Hide default HTML checkbox */                    /**/        /**/
.switch input {                                     /**/        /**/
    opacity: 0;                                     /**/        /**/
    width: 0;                                       /**/        /**/
    height: 0;                                      /**/        /**/
}                                                   /**/        /**/
/* Effects & states */                              /**/        /**/
input:checked + .slider {                           /**/        /**/
    background-color: coral;                    /**/        /**/
}                                                   /**/        /**/
input:focus + .slider {                             /**/        /**/
    box-shadow: 0 0 1px coral;                  /**/        /**/
}                                                   /**/        /**/
input:checked + .slider:before {                    /**/        /**/
    -webkit-transform: translateX(26px);            /**/        /**/
    -ms-transform: translateX(26px);                /**/        /**/
    transform: translateX(16px);                    /**/        /**/
}                                                   /**/        /**/
/* - The slider - the moving part */                /**/        /**/
.slider {                                           /**/        /**/
    position: absolute;                             /**/        /**/
    cursor: pointer;                                /**/        /**/
    top: 0;                                         /**/        /**/
    left: 0;                                        /**/        /**/
    right: 0;                                       /**/        /**/
    bottom: 0;                                      /**/        /**/
    background-color: #114671;                  /**/        /**/
    -webkit-transition: .4s;                        /**/        /**/
    transition: .4s;                                /**/        /**/
}                                                   /**/        /**/
/* Effects & states */                              /**/        /**/
.slider:before {                                    /**/        /**/
    position: absolute;                             /**/        /**/
    content: "";                                    /**/        /**/
    height: 16px;                                   /**/        /**/
    width: 16px;                                    /**/        /**/
    left: 4px;                                      /**/        /**/
    bottom: 4px;                                    /**/        /**/
    background-color: white;                    /**/        /**/
    -webkit-transition: .4s;                        /**/        /**/
    transition: .4s;                                /**/        /**/
}                                                   /**/        /**/
/* - Rounded sliders */                             /**/        /**/
.slider.round {                                     /**/        /**/
    border-radius: 34px;                            /**/        /**/
}                                                   /**/        /**/
/* Effects & states */                              /**/        /**/
.slider.round:before {                              /**/        /**/
    border-radius: 50%;                             /**/        /**/
}                                                   /**/        /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/        /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/******************** NAV: End **********************//******************** NAV: End **********************/
/******************** NAV: End **********************//******************** NAV: End **********************/
/******************** NAV: End **********************//******************** NAV: End **********************/

.about {
    padding-top: 5em;
    width: 70%;
    justify-self: center;
}
.details-section {
    padding-top: 3em;
    display: flex;
    justify-content: center;
    width: 100%;
}
.platform-color {
    width: 20%;
    margin: 2rem;
    border-radius: 200px;
    /* background-color: rgb(25, 37, 102); */
    background-color: #2272b3;
    /* transition: background 3s ease; */
    transition: background 1s ease;
}
body.light .platform-color {
    background-color: coral;
}
.views-color {
    width: 20%;
    margin: 2rem;
    border-radius: 200px;
    background-color: rgb(243, 212, 76);
    transition: background 1s ease;
}
body.light .views-color {
    background-color: #196630;
}

.details-body {
    display: inline;
    width: 50%;
}

img {
    justify-self: center;
    display: flex;
    width: 50%;
}
h2 {
    font-size: 50px;
}
p {
    font-size: 20px;
    line-height: 2rem;
}
a {
    color: inherit;
    text-decoration-color: #2272b3;
    text-decoration-style: dotted;
    text-decoration-thickness: 5px;
}
body.light a {
    color: inherit;
    text-decoration-color: rgba(255, 127, 80, 0.89); 
}

.quote {
    padding-top: 2em;
    justify-self: center;
    font-family: "Shadows into light", serif;
}
h3 {
    font-size: 3rem;
}

/********************** MOBILE RESPONSIVE: Start *********************//********************** MOBILE RESPONSIVE: Start *********************/
/********************** MOBILE RESPONSIVE: Start *********************//********************** MOBILE RESPONSIVE: Start *********************/
/********************** MOBILE RESPONSIVE: Start *********************//********************** MOBILE RESPONSIVE: Start *********************/
.mobile-filters-container {
    display: flex;
}

/* Turn on mobile menu */
@media only screen and (max-width: 1422px) {
    /* NAV *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
    nav {
        padding-top: 1em;
    }
    .mobile-menu {
        display: flex;
        margin-right: 0.5em;
    }
    .nav-controls {
        display: none;
    }
    .about {
        width: auto;
    }
}
@media only screen and (max-width: 1054px) {
    .nav-title {
        padding-left: 0em;
    }
    /* SIDEBAR *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
    .mobile-filters-container {
        justify-content: center;
    }
}
@media only screen and (max-width: 700px) {

    .nav-controls{
        font-size: 1rem;
    }
    .about {
        padding-top: 0em;
    }
    .views-color, .platform-color {
        display: none;
    }
    .details-body {
        width: 70%;
    }
    h3 {
        font-size: 2rem;
    }
}
/********************** MOBILE RESPONSIVE: End *********************//********************** MOBILE RESPONSIVE: End *********************/
/********************** MOBILE RESPONSIVE: End *********************//********************** MOBILE RESPONSIVE: End *********************/
/********************** MOBILE RESPONSIVE: End *********************//********************** MOBILE RESPONSIVE: End *********************/