/* CSS for large screens */
@media screen and (min-width:768px) {

    /********************************/
    /*           GENERAL            */
    /********************************/

    body {
        max-width: 100%;
    }

    /* Makes the main section a little less wide */
    main {
        max-width: 75%;
        margin: 0 auto;
        margin-bottom: 16px;
    }

    /********************************/
    /*          NAVIGATION          */
    /********************************/

    /* Make title bigger */
    #site-title {
        font-size: 4rem;
    }
    /* and nav text a little bigger too */
    nav {
        font-size: 1.25rem;
    }

    /* Hide the toggle */
    #nav-toggle {
        display: none;
    }
    /* Put all the links into a row */
    #navlist {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    /* Show the links & center them (regardless of responsive state), including sitemap */
    #navlist > li > a:not(#sitemap), #navlist.responsive > li > a:not(#sitemap),
    #navlist #sitemap, #navlist.responsive #sitemap { 
        display: block!important; /* temp. important tag when changing window size, links just vanish otherwise if it's been opened + closed in small screen. */
        text-align: center;
        padding: 4px;
    }
    #navlist:not(.responsive) .nav-list.responsive {
        display: initial;
    }

    .nav-list a { /* the nav list's links still have their associated button so their display is not changed. but they're centered! */
        text-align: center;
        padding: 4px;
    }

    /* Navigation links switch text and background colour when hovered over */
	nav a {
		transition: color 0.5s, background-color 0.5s, text-decoration 0.5s;
	}
	nav a:hover {
		color: var(--colour-nav-hover);
		background-color: var(--colour-card);
	}
    nav a.active:hover, nav a:has(+ .nav-list:not(.responsive) .active):hover  {
        text-decoration: underline dotted var(--colour-nav-hover) 2px;
    }

    /* Other List has it's own appearance, and is same size as the link/list item it is associated with */
    #navlist li:has(a + .nav-list) {
        position: relative;
    }
    .nav-list {
        position: absolute;
        width: 100%; /* 100% of parent. */
        color: var(--colour-nav);
        background-color: var(--colour-button-lighter);
        background-image: linear-gradient(var(--colour-button-lighter), var(--colour-button-light));
        border: var(--border-default);
        border-top: none;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-top: 8px;
    }
    .nav-list > li > a {
        margin-left: -4px;
        margin-right: -4px;
    }

    /********************************/
    /*          CHARACTERS          */
    /********************************/

    .character { /* character lists */
        width: 20%;
        max-width: 150px;
    }

    /* put likes and dislikes in two columns */
    .char-likes {
        display: flex;
        flex-wrap: wrap;
    }
    .char-likes section {
        flex: 1 1 50%;
    }
    /* put char card on the right */
    .char-info {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row-reverse;
        align-items: flex-start;
    }
    /* ...unless otherwise */
    .char-info.card-on-left {
        flex-direction: row;
    }
    .char-card {
        flex: 1 1 25%;
        margin-left: 16px;
        margin-right: 0;
    }
    .char-about, .char-info > div {
        flex: 1 1 75%;
    }
    .card-on-left .char-card {
        margin-right: 16px;
        margin-left: 0;
    }

    .char-links .rel-info {
        text-align: left;
    }
    .char-links .rel-info img{
        margin-bottom: 0;
    }

    /********************************/
    /*            IMAGES            */
    /********************************/

    .char-design img, #sitemap img, .char-details img, .char-trivia img {
        margin: 0;
        margin-bottom: 8px;
        margin-top: 0;
    }

    /* images floating on left or right */
    .img-on-right, .img-on-left {
        overflow: hidden;
    }
    .img-on-right img {
        float: right;
        margin-left: 16px;
        margin-right: 0;
    }
    .img-on-left img {
        float: left;
        margin-right: 16px;
        margin-left: 0;
    }

    .char-design img, .char-trivia img {
        max-width: 25%;
        margin-right: 32px;
    }
    .char-details img {
        max-width: 25%;
    }

    /********************************/
    /*             TABS             */
    /********************************/

    /* Change colours of the tab and its text on hover */
    .tab-toggle .tab-link:hover {
		background-color: var(--colour-tab-active);
	}
    .tab-toggle .tab-link:hover a {
        color: var(--colour-tab-active-text);
    }
    /* Float the button next to the page title */
    #tab-button {
        float: right;
        margin-top: -72px;
    }

}