/* Makes the way the boxes are sized more intuitive */
* {box-sizing:border-box}

/* Insert Sofia Sans Font */
@font-face {
    font-family: 'Sofia Sans';
    src: url('fonts/Sofia_Sans_Condensed/SofiaSansCondensed-VariableFont_wght.ttf') format('truetype');
}



body {
    height: auto;

    font-weight: bold;

    text-align: center;
    justify-content: center;
  
    font-family:'Sofia Sans', Times New Roman;
}


/* Text here yes */
.bottominfo,
.bottomnotice,
.bottomlogos{
    border-radius: 25px;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }
    .bottomnotice,
    .bottomlogos{
        margin-top: 0.5%;
}

/* Link & Span Properties - Spans are mainly used in the contact information */
span.contactblack,
span.contactblue{
    font-size: 140%;
    color: rgb(0, 0, 0);
    margin: 1%;
    text-align: center;
    }
    span.contactblue{
        color: #0d1988;
}

a.bottomlink:link {color:#121d83; text-decoration: underline;}
a.bottomlink:visited {color:#121d83; text-decoration: none;}
a.bottomlink:hover {color:#279494; text-decoration: none;}




/* Bottominfo Properties */
.info{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 25px;
    height: auto;
    width: 100%;
    border: solid;
    }

    .personalcontact,
    .acccontact,
    .karlijn{
        height: auto;   
        padding: 5px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .personalcontact, 
    .karlijn{
        flex: 33%;
        max-width: 33%;
    }

    .acccontact{
        flex: 34%;
        max-width: 34%;
    }

    .acccontact,
    .karlijn{
        border-style: none none none dashed;
}



/* Bottomnotice Properties */
.notice{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 25px;
    height: auto;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.322);
    border: solid;
    }

    .noticetext,
    .artcredit,
    .acclogo,
    .amclogo{
        height: auto;   
        padding: 5px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .noticetext,
    .amclogo{
        flex: 35%;
        max-width: 35%;
    }

    .artcredit,
    .acclogo{
        flex: 15%;
        max-width: 15%;
        border-style: none none none dashed;
    }

    img.acclogoimg,
    img.amclogoimg{
        max-width: 100%;
}



/* Bottomlogos Properties */
.logos{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 25px;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.322);
    border: solid;
    }

    .unraid,
    .docker,
    .mariadb,
    .nextcloud,
    .jellyfin,
    .handbrake,
    .ytdl,
    .ytdlp,
    .delugevpn,
    .protonvpn,
    .nginx,
    .cloudflare{
        height: auto;   
        padding: 5px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .unraid{
        flex: 13%;
        max-width: 13%;
    }
    
    .docker{
        flex: 14%;
        max-width: 14%;
    }

    .mariadb{
        flex: 10%;
        max-width: 10%;
    }

    .nextcloud{
        flex: 10%;
        max-width: 10%;
    }

    .jellyfin{
        flex: 9%;
        max-width: 9%;
    }
    
    .handbrake{
        flex: 9%;
        max-width: 9%;
    }
    
    .ytdl{
        flex: 9%;
        max-width: 9%;
    }

    .ytdlp{
        flex: 9%;
        max-width: 9%;
    }

    .delugevpn{
        flex: 7%;
        max-width: 7%;
    }

    .protonvpn{
        flex: 7%;
        max-width: 7%;
    }

    .nginx{
        flex: 8%;
        max-width: 8%;
    }

    .cloudflare{
        flex: 12%;
        max-width: 12%;
}

@media (min-width: 2200px){
    .bottominfo,
    .bottomnotice,
    .bottomlogos{
        font-size: 125%;
    }
}

@media (max-width: 850px){
    .bottominfo,
    .bottomnotice,
    .bottomlogos{
        font-size: 75%;
        }
        .bottomnotice,
        .bottomlogos{
            margin-top: 1.5%;
    }



    /* Bottominfo Properties. */
    .info{
        display: flex;
        flex-direction: column;
        }

        .personalcontact,
        .acccontact, 
        .karlijn{
            flex: 100%;
            max-width: 100%;
        }

        .acccontact, 
        .karlijn{
            border-style: dashed none none none;
    }

    /* Bottomnotice Properties */
    .notice{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        }   

        .noticetext, 
        .artcredit{
            flex: 100%;
            max-width: 100%;
            border-style: none none dashed none;
        }

        .acclogo{
            flex: 30;
            max-width: 30%;
            border-style: none;
        }


        .amclogo{
            flex: 70%;
            max-width: 70%;
    }

    /* Bottomlogos Properties */
    .bottomlogos{
        margin-top: 1%;
        }

        .logos{
            flex-wrap: wrap;
        }

        .unraid, 
        .docker, 
        .mariadb, 
        .nextcloud, 
        .jellyfin, 
        .handbrake,
        .ytdl, 
        .ytdlp, 
        .delugevpn, 
        .protonvpn, 
        .nginx, 
        .cloudflare{
            flex: 16.6%;
            max-width: 16.6%;
    }
}