html {
    font-family: Verdana;

    background-color: rgb(20,20,20);
}

body {
    background-color: unset !important;
}


/* ________ Navbar ________ */

#nav {
    color: white;

    position: fixed;

    height: 50px;

    width: 100%;

    background-color: rgb(40,40,40);

    /* border-bottom: solid 1px rgb(120, 120, 120); */
    border-bottom: solid 1px rgb(0,255,0);
}

#nav ul {
    width: fit-content;

    list-style-type: none;

    padding-top: 5px;
	padding-left: unset;

	margin-left: auto;
	margin-right: auto;
}

#nav ul a {
    cursor: pointer;

    color: white;
}

#nav ul a:hover {
    color: gray;
}

#nav ul a {
    display: inline-block;

    width: 100px;

    text-align: center;
    font-size: 26px;
}




/* ________ Content ________ */

#content-container {
    padding-top: 50px;

    min-height: 100vh;
}


/* ________ Links Search Bar ________ */

.search {
    color: white;
    
    background-color: rgb(30,30,30);

    height: 35px;
    width: 100%;

    padding-left: 15px;
    padding-right: 15px;

    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px rgb(120, 120, 120);

    border-radius: 0 0 5px 5px;
}

.search:active, .search:focus {
    background-color: rgb(30,30,30);

    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px rgb(120, 120, 120);

    text-decoration: none;

    outline: none;
}


/* ________ Links ________ */

#content-grid-container {
    padding-top: 20px;

    display: flex
;
    justify-content: center;

    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#content-grid {
    display: grid;

    grid-template-columns: repeat(auto-fit, max(200px));
    grid-auto-rows: max-content;

    grid-gap: 30px;
    margin: 30px;

    max-width: 100%;
}

#content-container .online {
    border-bottom: solid 2px rgb(0,255,0);
}

#content-container .maybe {
    border-bottom: solid 2px rgb(255, 255, 0) !important;
}

#content-container .offline {
    border-bottom: solid 2px rgb(255,0,0);
}

#online-counter {
    color: white;

    text-align: center;

    max-width: fit-content;

    font-size: 26px;

    border-bottom: solid 1px rgb(200, 200, 200);

    padding-top: 25px;

    margin-left: auto;
    margin-right: auto;
}

.oc-x {
    transition: all 0.3s;
}

.link-container {
    color: white;

    background-color: rgb(40,40,40);

    border-radius: 15px;

    text-align: center;

    margin-bottom: 50px;
}

#default {
    background-color: rgb(40,40,40) !important;

    animation: 1s infinite alternate ease-out d-breathing;
}

.default {
    border-bottom: solid 2px rgb(100,100,100);

    animation: 1s infinite alternate ease-out border-breathing;
}

#default p {
    height: 24px;
}

@keyframes d-breathing {
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0.5;
    }
}

@keyframes border-breathing {
    from
    {
        border-color: rgb(150,150,150);
    }
    to
    {
        border-color: rgb(60,60,60);
    }
}

.link-container:hover {
    color: gray;
}

.link-container p {
    margin-top: 10px !important;
}

.link {
    cursor: pointer;

    background-color: rgb(30,30,30);

    height: auto;
    width: auto;

    border: solid 1px rgb(80,80,80);
    border-radius: 15px;

    overflow: hidden;
}

.link img {
    height: 200px;
    width: 100%;
}

.websites-link {
    word-wrap: break-word;
}

.link-header {
    color: white;

    text-align: center;

    max-width: 1200px;

    font-size: 50px;

    padding-bottom: 36px;

    border-bottom: solid 1px white;

    margin-left: auto;
    margin-right: auto;
}

.link-header:first-of-type {
    padding-top: 20px;
}


/* ________ faq ________ */

.faq {
    color: white;
    text-align: center;

    font-size: 26px;

    padding-top: 50px;
}

#faq-container {
    padding-top: 25px;

    max-width: 500px;

    margin-left: auto;
    margin-right: auto;
}

#faq-list {
    color: white;
}

#faq-list div {
    /* border: 1px solid #ccc; */

    padding: 10px;
    margin: 10px;
}

#faq-list .list-container {
    padding: 0px;
    margin: 0px;
    padding-bottom: 15px;
}

#faq-list div .folder {
    border-left: solid 1px rgb(120, 120, 120);
}

#faq-list div button {
    color: white;

    display: block;

    background-color: transparent;
    
    border: none;
    text-decoration: underline;
}

#faq-list div button:focus {
    border: none;
    outline: none;
}

#faq-list p {
    cursor: pointer;

    color: rgb(200, 200, 200);

    margin-left: 20px;
}

#faq-list button {
    margin-bottom: 5px;
    cursor: pointer;
}

#faq-text {
    color: white;
}

#faq-controls {
    width: fit-content;

    padding-top: 25px;

    margin-left: auto;
    margin-right: auto;
}

#faq-text .p-title {
    text-align: center;

    border-bottom: solid 1px gray;

    padding-bottom: 5px;
}

#faq-text .paragraph {
    color: rgb(220,220,220);

    text-align: center;
}